微信小程序 webviewH5如何分享好友_h5 open-type="share-CSDN博客

本文链接：https://blog.csdn.net/meteorsshower2013/article/details/104550356

通过给 button 组件设置属性 open-type=“share”，可以在用户点击按钮后进行分享。

webview承载网页的容器。会自动铺满整个小程序页面。

但是在webview页面中，没法使用小程序组件button, 所以这行不通。

1 开启转发选项

当然你需要在H5页面中，引导用户点击右上角的“三个点”。

可以在webview页面中，右上角菜单中开启转发选项。
在这里插入图片描述

在onLoad 生命周期中，加入下面这行代码即可。

wx.showShareMenu()

参考微信开发文档：

webview
wx.showShareMenu(Object object)
button组件

2 定义转发事件

在这里插入图片描述

可以看到我们可以在 onShareAppMessage 事件中获取到 webViewUrl 。

如果在webview中H5的链接可以唯一标识，那我们可以在path中，携带此参数。例如我H5中是新闻链接，那我们可以把newsId当做参数传过去
或者我们可以把webviewUrl变为短连接传过去

Page({
  onShareAppMessage: function (res) {
    
      console.log(res.target)
      console.log(res.webViewUrl)
    
    return {
      title: '自定义转发标题',
      path: '/pages/main/webview?newsID=' + newsId
    }
  }
})

参考微信开发文档：

Page中onShareAppMessage(Object object)

3. 在聊天窗口中打开小程序，进入此H5页面

在这里插入图片描述
直接在onLoad函数中，解析携带来的参数

onLoad(options) {
      console.log(options)
      if (options && options.newsID) {
        this.serverUrl = `${serverUrl}#/newsDetail/${options.newsID}`
      } 
      wepy.showShareMenu()
    }