初体验小程序Vue交互
//H5
我们用vue构建一个嵌入页面。在这里我们用vue/cli 3.0来搭建我们的项目，vue/cli 3.0需要vue2.0以及webpack4.0以上的版本，还需要node.js的环境
因此我们需要在全局安装vue webpack 以及 vue/cli
1.下载vue cli 3.0
分别执行
npm install -g vue
npm install -g webpack
npm install -g @vue/cli（可以通过vue serve检查是否下载安装成功）
2.创建一个vue项目
执行vue create App
3.选择一个preset，一个是默认的babel+ESLint ，另一个是手动选项的。选择手动选项，有babel，TS，CSS工具，router,Vuex等，根据自己的需求选择合适的。
这里我选择的是babel，router，Vuex，CSS（css我选择的是stylus），一直回车即可。
4.创建成功后会形成一个App文件夹，此时所有的配置以及webpack配置都已完成，cd App文件夹执行npm run serve即可运行项目，打包的话可以直接npm run build会产生一个dist文件
调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
该对象将会被 webpack-merge 合并入最终的 webpack 配置。
5.在.Vue文件中编写H5页面即可
微信小程序进入H5页面时，直接用<web-view src="{{url}}">跳转即可，路径后面可以添加需要传入H5页面的简单数据等。
坑①：跳转时要新建一个page页面坐中间跳转用，如果直接在需要跳转的当前页面添加web-view，通过判断wx-if或者hidden判断web-view是否显示渲染会有问题。
如果用wx-if判断，当从H5界面通过wx.miniProgram.navigateBack({delta:1})返回小程序时会直接跳过跳转页面（入口页面），进入tableBar页面，因为web-view是完全侵入式的，wx-if仍然是在当前页面（入口页面），所以会返回当前页面的上一层tableBar页面。
如果用hidden判断，会在tableBar页面进入到入口页面时会直接跳过入口页面进入H5页面。
H5页面返回小程序页面时，需要用到小程序的方法。所以需要注入WX的SDK，可以在Script标签中注入<script src="https://res.wx.qq.com/open/js/jweixin-x.x.x.js"></script>，这种方法在vue中会提示错误让下载某个包，所以可以不用引入SDK，直接npm install weixin-js-sdk --save，然后import wx from 'weixin-js-sdk'引入即可，然后可以通过wx.miniProgram.navigateBack({delta:1})返回到wx界面，此时可能会有疑问为什么不用wx.miniProgram里面的其他（switchTab，navigateTo，reLaunch，redirectTo）方法进行跳转，首先switchTab不能携带参数且只能跳转tabBar页面，reLaunch会关闭所有页面且入口页面的back事件会变得卡顿，redirectTo也有同样的卡顿问题，navigateTo貌似是最好的选择，可以跳转也可以传参，可是它只能跳转固定的page，而且有一个致命缺陷是，他与navigateBack配合使用之后回到上一个页面，也就是H5页面，所以在小程序页面点击back回退时，只会在小程序入口页面和H5页面切换。
坑①：跳转时要新建一个page页面坐中间跳转用，如果直接在需要跳转的当前页面添加web-view，通过判断wx-if或者hidden判断web-view是否显示渲染会有问题。
如果用wx-if判断，当从H5界面通过wx.miniProgram.navigateBack({delta:1})返回小程序时会直接跳过跳转页面（入口页面），进入tableBar页面，因为web-view是完全侵入式的，wx-if仍然是在当前页面（入口页面），所以会返回当前页面的上一层tableBar页面。
如果用hidden判断，会在tableBar页面进入到入口页面时会直接跳过入口页面进入H5页面。
H5页面返回小程序页面时，需要用到小程序的方法。所以需要注入WX的SDK，可以在Script标签中注入<script src="https://res.wx.qq.com/open/js/jweixin-x.x.x.js"></script>，这种方法在vue中会提示错误让下载某个包，所以可以不用引入SDK，直接npm install weixin-js-sdk --save，然后import wx from 'weixin-js-sdk'引入即可，然后可以通过wx.miniProgram.navigateBack({delta:1})返回到wx界面，此时可能会有疑问为什么不用wx.miniProgram里面的其他（switchTab，navigateTo，reLaunch，redirectTo）方法进行跳转，首先switchTab不能携带参数且只能跳转tabBar页面，reLaunch会关闭所有页面且入口页面的back事件会变得卡顿，redirectTo也有同样的卡顿问题，navigateTo貌似是最好的选择，可以跳转也可以传参，可是它只能跳转固定的page，而且有一个致命缺陷是，他与navigateBack配合使用之后回到上一个页面，也就是H5页面，所以在小程序页面点击back回退时，只会在小程序入口页面和H5页面切换。
//传参
在H5页面取从小程序界面带来的参数，因为我们是用navigateBack返回到小程序界面的，所以传参时不能通过路由导航传，此时要用到一个新的API：wx.miniProgram.postMessage来传递参数。
例：wx.miniProgram.postMessage({
data: {
id:this.id
},
})
注：
1.用此方法传参时，需要在小程序中使用bindmessage="handleGetMessage"，绑定一个取值的方法，通过handleGetMessage:function(e){
console.log(e.detail.data)
},
取到data中传的数据
2.该方法触发需要一定的条件
网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。
小程序向H5页面传递参数时，直接在跳转的url后面加？传参即可，取的时候，在Vue的生命周期钩子里面可以直接通过原生js的方法（自己封装一个取参数的方法）在跳转到H5页面之前拿到由小程序传过来的参数。
在H5页面取从小程序界面带来的参数，因为我们是用navigateBack返回到小程序界面的，所以传参时不能通过路由导航传，此时要用到一个新的API：wx.miniProgram.postMessage来传递参数。
例：wx.miniProgram.postMessage({
data: {
id:this.id
},
})
注：
1.用此方法传参时，需要在小程序中使用bindmessage="handleGetMessage"，绑定一个取值的方法，通过handleGetMessage:function(e){
console.log(e.detail.data)
},
取到data中传的数据
2.该方法触发需要一定的条件
网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。
小程序向H5页面传递参数时，直接在跳转的url后面加？传参即可，取的时候，在Vue的生命周期钩子里面可以直接通过原生js的方法（自己封装一个取参数的方法）在跳转到H5页面之前拿到由小程序传过来的参数。
//触发H5页面的事件
在H5页面绑定的方法事件，可以在本页面直接调用，测试时需要在微信开发者工具中跳转到H5页面之后右键调试即可。
在H5页面绑定的方法事件，可以在本页面直接调用，测试时需要在微信开发者工具中跳转到H5页面之后右键调试即可。
