1、H5端
1、index.html引入jweixin.js
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2、需要分享的页面
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 style="position: 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 style="margin-top: 1rem; color: white; text-align: center;"> <div style="width: 1rem; height: 0.8rem; margin: 0 auto 20px;position: fixed;top: 0;right:0.6rem"> <img src="${this.arrowImg}" style="width: 100%; height: 100%; object-fit: contain;" alt="分享指引箭头" /> </div> <div style="font-size: 14px; margin-bottom: 20px;">请点击右上角. . .进行分享</div> </div> <div style="position: absolute; bottom: 50px; color: white; background: #1aad19; padding: 10px 20px; border-radius: 5px; cursor: pointer;" onclick="document.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 class="offical"> <web-view :src="src" @message="getMessage"></web-view> </view> </template> <script> export default { data() { return { src:``, hallId:'' }; }, onLoad(options) { console.log(options,'options') let openId=uni.getStorageSync('openId') if(options.hallId){ this.src = `https://fwzx.cn/yjs?openId=${openId}&hallId=${options.hallId}` }else{ this.src=`https://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 lang="scss" scoped> .offical{ width: 100%; height: 100%; } </style>
