长沙网站建设公司哪家专业/重庆黄埔seo整站优化
第一步:uni-app H5页面触发传参→微信小程序
onLoad(d) {this.postMessage();
},
methods: {postMessage() {wx.miniProgram.postMessage({data: {title: this.filename,//这个是要传给微信小程序的标题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: ``,}})},},}