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

1、H5端

1、index.html引入jweixin.js

html 复制代码

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2、需要分享的页面

javascript 复制代码

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项目

javascript 复制代码

 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、小程序端

html 复制代码

<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>