uniapp微信小程序webview嵌套H5页面分享笔记

1、H5端1、index.html引入jweixin.jsscript srchttps://res.wx.qq.com/open/js/jweixin-1.6.0.js/script2、需要分享的页面postMessageToMiniProgram (shareData) { // alert(JSON.stringify(window.wx)) // 1. 判断是否在小程序 web-view 环境中 const userAgent window.navigator.userAgent.toLowerCase(); const isInMiniProgram userAgent.includes(miniprogram); // 2. 检查微信JS-SDK是否可用 if (isInMiniProgram window.wx.miniProgram) { try { window.wx.miniProgram.postMessage({ data: shareData // 发送的数据对象 }); console.log(H5向小程序发送消息成功, shareData); } catch (error) { console.error(H5向小程序发送消息失败, error); } } else { console.warn(不在小程序web-view环境中无法发送消息); } let guide document.createElement(div); guide.id share-guide; guide.innerHTML div styleposition: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; div stylemargin-top: 1rem; color: white; text-align: center; div stylewidth: 1rem; height: 0.8rem; margin: 0 auto 20px;position: fixed;top: 0;right:0.6rem img src${this.arrowImg} stylewidth: 100%; height: 100%; object-fit: contain; alt分享指引箭头 / /div div stylefont-size: 14px; margin-bottom: 20px;请点击右上角. . .进行分享/div /div div styleposition: absolute; bottom: 50px; color: white; background: #1aad19; padding: 10px 20px; border-radius: 5px; cursor: pointer; onclickdocument.getElementById(share-guide).remove() 我知道了 /div /div ; document.body.appendChild(guide); }, //点击分享 goShareHall() { // 构造分享数据 const shareInfo { title: ${this.detail.name}的纪念馆, // 分享标题 imageUrl: this.defaultAvatar, // 分享图片建议使用绝对路径 path: window.location.href, // 分享的H5页面链接 hallId:this.id }; // 发送给小程序 this.postMessageToMiniProgram(shareInfo); },3、点击分享后的卡片进入H5项目async created() { this.openId this.getParams(window.location.href,openId) this.hallId this.getParams(window.location.href,hallId) console.log(this.openId, openId) console.log(this.hallId, hallId) if(!this.openId) { this.$toast.fail(暂未获取到用户信息请稍后再试); return } if(this.openId) { await this.passwordSubmit() } if(this.hallId){ this.$router.push(/memorialHall/${this.hallId}); } },2、小程序端template view classoffical web-view :srcsrc messagegetMessage/web-view /view /template script export default { data() { return { src:, hallId: }; }, onLoad(options) { console.log(options,options) let openIduni.getStorageSync(openId) if(options.hallId){ this.src https://fwzx.cn/yjs?openId${openId}hallId${options.hallId} }else{ this.srchttps://fwzx.cn/yjs?openId${openId} } console.log(this.src,this.src) this.$forceUpdate() }, onLaunch() { wx.showShareMenu({ withShareTicket: true }) }, // 分享到微信好友 onShareAppMessage(options) { return { title: 事业服务中心, path: /pagesA/webView/webView?hallId${this.hallId}, imageUrl: , } }, methods: { getMessage(e) { console.log(e,H5传给小程序的参数) // alert(JSON.stringify(e)) if(e.detail.data){ this.hallId e.detail.data[0].hallId; this.$forceUpdate() } } }, } /script style langscss scoped .offical{ width: 100%; height: 100%; } /style