收藏
回答

组件webview使用postmessage为什么没有生效?

h5页面如下:当前链接已经配置了业务域名

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <title></title> -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
   
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>报名成功</h1>
            <button id="jumpBtn">返回首页test</button>
            <button onclick="shareMiniProgramPage()">分享小程序页面</button>
        </div>
        <div class="imgbox">


            <!-- <p>关注【发球局 Girt Glee】公众号</p> -->
            <!-- <p>为您推送最新活动动态</p> -->
            <div class="imgItem">
                <img src="https://gritglee.net/qrcode.jpg" style="width: 170px;height:170px;"/>
                <p>长按关注【发球局】公众号</p>
                <p>关注公众号,为您推送报名通知、活动订阅通知等最新活动动态</p>
            </div>
        </div>
    </div>



    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
       
        document.getElementById('jumpBtn').addEventListener('click', function() {
        // 判断是否在小程序环境中
            if (typeof wx !== 'undefined' && wx.miniProgram) {
                // 直接跳转
                wx.miniProgram.switchTab({
                    url: '/pages/index/index', // 替换为你的目标页面路径
                    success: () => {
                        console.log('跳转成功');
                    },
                    fail: (err) => {
                        console.error('跳转失败:', err);
                    }
                });
            } else {
                window.location.href = window.location.href + '?jumpTo=/pages/home/index'
                // 非小程序环境处理
                alert('请在小程序中打开');
            }
        })
        
        function shareMiniProgramPage() {
            if (typeof wx !== 'undefined' && wx.miniProgram) {
                // 方式 2:通过 postMessage 发送数据,由小程序 onMessage 监听处理
                wx.miniProgram.postMessage({
                    data:[{
                        action: 'share',
                        path: '/pages/detail/detail',  // 目标页面路径
                        title: '分享标题',            // 可选
                        imageUrl: '分享图片URL'       // 可选
                    }]
                });
            } else {
                alert('请在微信小程序中打开');
            }
        }
    </script>
</body>
</html>

小程序内部:/pages/signup/paySuccess页面使用了webview组件,代码如下:

<template>
  <view class="pay-success-page">
    <web-view 
    :src="webViewUrl"
    bindmessage="handleWebViewMessage"
    ></web-view>
  </view> 


</template>


<script>
export default {
  data() {
    return {
      webViewUrl: "https://gritglee.net/qrcode.html" // 存储公众号关注页面的URL
    };
  },
  // 在微信小程序中,需要在页面 onLoad 中处理
  onLoad() {},
  computed: {
     activity_info() {
      return this.$store.getters['activity/activity_info']
    },
  },
  onShareAppMessage() {
    let shareImg ='';
    if(this.activity_info.multimedia && this.activity_info.multimedia.length){
      shareImg = this.activity_info.multimedia[0].url
    }else{
      shareImg = '/static/share.png'
    }
    return {
      title: '发球局',
      path: `/pages/detail/detail?from=share&activityId=${this.activity_info.activity_id}`, // 分享路径,可带参数
      imageUrl:shareImg, // 可选,分享图片
      shareTicket: true 
    }
  },
  methods: {
     handleWebViewMessage(e) {
      console.log(e,"paysuccess")
        const { action, path, title, imageUrl } = e.detail.data[0];
        if (action === 'share') {
            // 跳转到目标页面并设置分享信息
            wx.navigateTo({
                url: path,
                success: () => {
                    // 在目标页面设置分享信息(需目标页面已配置 onShareAppMessage)
                    console.log('跳转成功,分享数据:', { title, imageUrl });
                }
            });
        }
    },
  }
}
</script>
这里handleWebViewMessage方法没有进来,为什么
回答关注问题邀请回答
收藏

1 个回答

  • Mr.Zhao
    Mr.Zhao
    星期一 17:11

    webview文档看过没有?

    星期一 17:11
    有用
    回复
登录 后发表内容