小程序与内嵌web-view的交互

1.小程序带参跳转h5页面

(1)小程序端

<web-view src="{{url}}"></web-view>

//使用web-view标签的url即可
let h5Url = 'https://XXXX.com/XX';       //h5项目发布后的公共域名地址
let token = wx.getStorageSync('token');  //按需携带token
let param1 = 1;                          //按需携带其他参数
//拼接地址并赋值
let url = `${h5Url}/pages/index?token=${token}&param1=${param1}`
this.setData({ url: url })

(2)h5端

需下载微信sdk：npm install weixin-js-sdk
测试条件有限，暂时在main.js获取参数。h5存取参数使用store里的数据和方法维护

//main.js
import store from './store'

let obj = {};
window.location.href.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>obj[k]=v);
//处理获取到的参数
if(obj.token) {
  store.dispatch('setToken', token);  //保存、更新token，具体略
}
if(obj.param1) {
  store.state.param1 = obj.param1;
}

2.h5页面带参跳回小程序

(1)h5端

wx.miniProgram.navigateTo({
  url: `/pages/index/index?param1=1`,
})

(2)小程序端

//onLoad直接获取参数
onLoad: function (options) {
  console.log('接收h5传值', options.param1)
},