初体验小程序Vue交互

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

//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页面取从小程序界面带来的参数，因为我们是用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页面之后右键调试即可。