H5页面用vue2.全家桶写的。

一、vue代码编写vue中路由的编写

1)vue init webpack test

2)/src/router/index.js中引入路由组件

import Index from 'src/components/index/index'

import Search from 'src/components/search/search'

3)/src/router/index.js中定义路由

{

path: '/index',

component: Index,

meta: {

title: '首页'

}

},

{

path: '/search',

component: Search,

meta: {

title: '搜索'

}

}

小程序web-view的src的地址就是：XXX/#/index 和 XXX/#/search。

2. 小程序web-view的src指向的H5页面自定义标题vue-wechat-title​www.npmjs.com

1)npm install vue-wechat-title --save

2) 在main.js中引入：

import VueWechatTitle from 'vue-wechat-title'

Vue.use(VueWechatTitle)

3)App.vue中

4)路由定义，见1中3)的meta。

二、本地调试找到本机在内网中的IP地址。 终端输入，MAC操作系统：ifconfig； windows操作系统：ipconfig。

修改配置项。 打开/package.json：

"scripts": {

"dev": "webpack-dev-server --host 0.0.0.0 --inline...

}

3. 测试：(电脑与手机在同一个局域网内)，如本机在内网中的IP地址：192.168.0.110

4. eslint 报错，可以打开 /package.json , 在"scripts":{....}中找到"lint": "eslint --ext .js,.vue src" 修改成："lint": "eslint --fix --ext .js,.vue src" ，如此可以自动修复代码样式。修改后，在终端中先执行，npm run lint (修改代码样式)；再执行npm run dev。(不一定好使，最好是在/.eslintrc.js中手动设置，然后再npm run dev。)

三、 小程序

1、设置“不效验合法域名、... ....”

2、小程序向H5传递数据，使用web-viewweb-view | 微信开放文档​developers.weixin.qq.com

注意：web-view页面中的bindmessage方法不会在该页面显示的时候被触发，简言之，只会在离开该web-view页面，致使web-view页面销毁了才触发，如，wx.navigateTo。点击小程序当前页面的元素就会显示H5页面。

1)准备数据

/**js**/

data:{

isShow: false

}

2)点击小程序页面的某一个元素才会跳转到指定的H5页面。

点击跳转H5页面

bindmessage="onVueMsg" />

3)点击小程序页面的某一个元素才跳转到指定的H5页面并传参。

点击跳转H5页面并传参

bindmessage="onVueMsg" />

4)点击函数toOtherLink的编写。

/*点击跳转到指定的H5页面*/

/*点击之后，如果当前小程序page就是显示web-view页面的小程序page，按钮会被web-view页面遮住，web-view页面会全屏显示*/

toOtherLink:function(){

this.setData({

isShow:true

})

},

/*输出从vue中返回的数据*/

onVueMsg:function(e){

// 小程序后退、组件销毁、分享，时才触发onVueMsg方法/* 当前不会有输出，vue中也没有编写相关代码 */

console.log(e.detail.data)

},点击小程序页面元素，跳转到当前小程序项目的另一个页面显示H5页面。

1)显示H5页面的小程序页面的，.html文件的编写

bindmessage="onVueMsg" />

2)显示H5页面的小程序页面的，.js文件的编写

/*输出从vue中返回的数据*/

onVueMsg:function(e){

// 小程序后退、组件销毁、分享，时才触发onVueMsg方法/* 当前不会有输出，vue中也没有编写相关代码 */

console.log(e.detail.data)

},

四、vue接收小程序传递过来的数据

/* 在vue的create或是mounted生命周期函数中获取从小程序传递过来的数据 */

console.log(window.location.herf)

/** 接收小程序端传递过来的数据, 用console.log()输出看不出来。可以把它赋值给页面data中的变量，显示在页面上。 **/

data(){

return {

getWChatData: ''

}

}

mounted: function () {

console.log(window.location.href.split('?')[1])

this.getWChatData = window.location.href.split('?')[1]

/*** H5接收小程序传来的一个参数，类型是，字符串或是数字等 ***/

(window.location.href).split('?')[1].split('=')[1]

/**** H5接收小程序传递过来的一个参数，类型是，object，需要先在小程序中进行数据转化，const initParams = encodeURIComponent(JSON.stringify(initData))initdata是对象类型的数据(console.log(typeof(initdata)))。web-view的url(写在小程序js文件中的)就是：'http://192.168.0.110:8080/#/index?initParamsFormWChat='+initParams****/

JSON.parse(

decodeURIComponent(window.location.href).split('?')[1].split('=')[1]

)

}

五、H5传参给小程序npm install weixin-js-sdk

在使用的vue单页面内引入：import wx from 'weixin-js-sdk'

// 在H5页面点击某一个元素，触发返回到小程序(使用了vant的button组件)危险按钮

/**js**/

methods: {

onCLick () {

wx.miniProgram.postMessage({

data: {

info: '返回数据了'

}

})

wx.miniProgram.redirectTo({

url: '/pages/index/index' // 小程序中页面的路径 })

}

},

六、在微信开发者工具的模拟器中，跳转到的H5页面上，点击'危险按钮'，调试器中可以看到，从vue返回的数据了，调试器中页面也显示了指定的小程序页面了/pages/index/index。

七、扫码测试，有时候显示接口错误提示。但是在微信开发者工具的模拟器中测试，不会有这个错误提示。

八、上线之前真实接口的调试上线使用的接口需登录小程序管理后台配置业务域名。

挖坑。。。。。。

九、缺点

H5与小程序混合开发，不能使用真实的线上地址开发还是有很多坑的，微信开发者工具还好，如果是扫码测试，提示接口错误。但是，也不能保证微信开发者工具的调试器的效果与真机测试一致。