前端不同项目集成间传参问题--以HBuilder打包vue项目中

        互联网时代飞速发展，如今前端开发不再只是单纯的网页设计。在几乎人手一部手机的情况下，移动端开发、多端兼容等名词慢慢地占据了我们的视野。而我们都知道原生Android或者iOS开发需要专门的开发人员，对于一般的小公司而言会耗费大量的人力和成本。那如何能使得原本在浏览器中运行的H5项目或者其他框架下的项目能像App一样，运行在各种终端呢？此时web-app就应运而生。
        我们希望有一个简单的机制，能把我们已经开发好的项目一键打包成App，然后直接扫码下载即可使用。更进一步，我们希望能有一个平台能够快速集成多个不同技术栈下的项目或者产品，这样我们就能独立开发、分别维护且能很好的集成各种业务功能。
        前段时间学习APICloud，发现很有意思。万事万物，终归来说都是有联系的，增增减减，稍加修饰，你融于我，我也融于你，最后成为一个结晶体，比独自绽放时更加光彩动人。但是局限在于，它有一套自己的语法规范，不能直接集成自己的项目，那这样就给我们带来一些不便，代码依赖性强，复用性低。后来查阅资料，发现HBuilder有很好的"一键打包"机制，自此开始了探索之路。
        首先介绍一下我在vue项目中集成其他项目的做法。

        1) 直接使用超链接url实现页面跳转： vue中集成其他项目链接
        2) iframe引进
       统一路由管理，创建组件，组件中使用iframe标签实现跳转其他页面。iframe的src属性设置成了可配置的，这样便于我们动态管理和修改。

<template>
  <div class="AttendenceInsert" :style="PageStyles">
      <iframe :src = "iframeSrc" id="project" name="project"></iframe>
  </div>
</template>

        在Vue项目中成功引入了其他业务功能后，我们面临的一个难题就是：如何在两个项目中进行数据的交互。因为我们最终的目的是将集成后的项目打包成App运行在移动端，那么就从APP的登录页面开始，我们就应该思考该如何设置及获取相关参数了。
       1、在vue的入口文件登录组件或者注册组件中，成功跳转Home页的同时设置传参，以用户名这一参数为例。

this.$router.push({ path: "/home",query:{username: this.username}});

       2、在Home组件中接收参数并使用：

//获取参数
this.username = this.$route.query.username;
alert("Home页-您所登录的账号是:" + this.username);

向各组件传参

       3、在子组件中接收参数：

 mounted () {
   this.username = this.$route.params.username;
 }
//注：vue中组件间通过路由传参有两种方式:  query、params。这里分别使用了query和params，其具体区别在此不赘述，可查阅相关资料自行了解。

       4、在iframe所在组件中接收参数后，我们使用hash的方法进行传值处理。

hash方法实现iframe的传参功能

       4、组件间成功实现传参后，对vue项目进行打包: npm run build。打包后会生成一个dist文件夹，我们使用HBuilder编辑器打开此目录。右键单击目录，将web项目转换成app项目，此时会默认生成一个manifest.json配置文件，支持开发者设置启动页、app图标、名称、版本号等图片及相关参数。

转换成app项目
       5、打包成App：
打成原生安装包
使用默认提供的证书直接打包

       6、打包完成后即可下载相应的apk文件，然后在手机上直接进行安装。至此，如何在vue项目中集成其他页面应用和如何实现两个项目间的传值以及如何利用HBuilder对vue项目进行打包成App都有了一个相对详细的方法及步骤说明。
       另外注意：本篇的所有实践暂未涉及到服务端的交互及逻辑处理，不一定适用所有情况，需视实际情景参考及使用。