第一步：uni-app H5页面触发传参→微信小程序
onLoad(d) { this.postMessage(); }, methods: { postMessage() { wx.miniProgram.postMessage({ data: { title: "微信小程序转发分享自定义的标题",//这个是要传给微信小程序的标题 path: `?a=1&b=2&c=3`,//这个是要传给微信小程序的参数 } }) }, }
第二步：微信小程序代码，分享页面传参→H5页面
index.wxml
<web-view src="{{src}}" bindmessage="bindmessage" />
index.js
Page({ data: { src: "https://www.shuzhiqiang.com/#/",//注意后面有"/#/" shareData: {}, }, onLoad(d) { if (d && Object.keys(d).length) { let p = Object.keys(d).reduce((p, k, i) => p + `${i === 0 ? '?' : '&'}${k}=${d[k]}`, ''); this.setData({ src: this.data.src + p });// 通过web-view的src路径传参，从微信小程序传参给H5 } }, // 当点击小程序右上角胶囊“…”的时候接收H5传过来的值 bindmessage(d) { if (d && d.detail && d.detail.data) { //console.log('H5传过来的最新信息', JSON.stringify(d.detail.data.slice(-1)[0], null, 2)); this.setData({ shareData: d.detail.data.slice(-1)[0] });//因为bindmessage推送过来的数据是push的形式，所以最新的数据是在最后 } }, // 注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮 onShareAppMessage() { return { // 用Promise延时一下，避免bindmessage还未执行完毕，就唤起转发 promise: new Promise(resolve => { setTimeout(() => { resolve({ title: this.data.shareData.title, path: `/pages/index/index${this.data.shareData.path}`,//这个path是来自H5页面的传参路径 }) }, 100) }) } } }); wx.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline']// shareAppMessage表示“发送给朋友”按钮，shareTimeline表示“分享到朋友圈”按钮 })
第三步：打开分享的微信小程序卡片，uni-app H5页面获取参数
在H5项目的App.vue页面获取参数实现自动跳转到对应页面，包括携带的参数值
import wx from "weixin-js-sdk"; //npm install --save weixin-js-sdk export default { onLaunch() { // 监听各种跳转 ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab', 'navigateBack', ].forEach(v => { uni.addInterceptor(v, { success: e => this.watchRouter(e), }) }); this.watchRouter(); }, onShow(d) { d = d.query; if (d && Object.keys(d).length) { let path = d.path; delete d.path; let p = Object.keys(d).reduce((p, k, i) => p + `${i === 0 ? '?' : '&'}${k}=${d[k]}`, ''); let url = `${path}${p}`; // console.log('跳转路径&参数', url) uni.navigateTo({url}); } }, onHide() {}, methods: { watchRouter(d) { wx.miniProgram.postMessage({ data: { title: `自定义标题！`, path: ``, } }) }, }, }
