初体验小程序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页面切换。

//传参
在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页面以后右键调试便可。