小程序web-view内嵌网页分享获取标题

最新推荐文章于 2025-06-27 09:20:23 发布

原创最新推荐文章于 2025-06-27 09:20:23 发布 · 5.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在小程序的web-view组件中实现分享功能，通过监听bindmessage事件接收分享信息，并在网页中使用jweixin库发送分享数据，实现标题和描述的自动获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序web-view内嵌网页分享如果获取标题和点击分享小程序跳回当前分享链接

首先在web-view组件上绑定bindmessage事件

<web-view  wx:if="{{url!=''}}" src='{{url}}'  bindmessage="bindmessage"></web-view>

在js文件中定义好bindmessage函数用于接收分享时触发的分享事件

bindmessage(e) {//接收web-view传递的参数
    if (e.detail.data[e.detail.data-1].title){
      this.setData({//存储状态
        title: e.detail.data[0].title
      })
    }
    
  },

要想能够在分享时接收到标题等信息必须在网页中插入如下代码

 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script type="text/javascript">
        //{data:{}}
        wx.miniProgram.postMessage({ data:{title: '我这里是标题网页标题。',desc:'我这里是网页描述。'} });
    </script>