微信小程序 webviewH5如何分享好友

通過給 button 組件設置屬性 open-type=“share”，可以在用戶點擊按鈕後進行分享。

webview承載網頁的容器。會自動鋪滿整個小程序頁面。

但是在webview頁面中，沒法使用小程序組件button, 所以這行不通。

1 開啓轉發選項

當然你需要在H5頁面中，引導用戶點擊右上角的“三個點”。

可以在webview頁面中，右上角菜單中開啓轉發選項。

在onLoad 生命週期中，加入下面這行代碼即可。

wx.showShareMenu()

參考微信開發文檔：

1. webview
2. wx.showShareMenu(Object object)
3. button組件

2 定義轉發事件

可以看到我們可以在 onShareAppMessage 事件中獲取到 webViewUrl 。

1. 如果在webview中H5的鏈接可以唯一標識，那我們可以在path中，攜帶此參數。例如我H5中是新聞鏈接，那我們可以把newsId當做參數傳過去
2. 或者我們可以把webviewUrl變爲短連接傳過去

Page({
  onShareAppMessage: function (res) {
    
      console.log(res.target)
      console.log(res.webViewUrl)
    
    return {
      title: '自定義轉發標題',
      path: '/pages/main/webview?newsID=' + newsId
    }
  }
})

參考微信開發文檔：

1. Page中onShareAppMessage(Object object)

3. 在聊天窗口中打開小程序，進入此H5頁面

直接在onLoad函數中，解析攜帶來的參數

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