微信小程序webview內頁面分享

需求：微信小程序內部使用webview嵌套了h5頁面，現在要添加一個新的功能，用戶在哪個頁面進行了分享，被分享的用戶從鏈接進來就跳轉到哪個分享頁面。

由於webview內部頁面無法直接調起小程序的轉發，所以為了實現webview中的頁面分享，把h5頁面地址作為參數傳輸，在接收的頁面中取出並賦值到當前頁面webview中的src中，即可進行展示。

三個注意點：

• 如何拿到webview中當前的頁面鏈接，以及一些動態參數如何傳遞給小程序？

動態參數包括要跳轉的h5頁面地址，分享鏈接展示的圖片
這些參數需要通過h5頁面來進行獲取，然后h5再傳輸給小程序，小程序分享的時候進行攜帶。

查閱開發文檔webview看到bindmessage屬性，網頁向小程序 postMessage 時，會在特定時機（小程序后退、組件銷毀、分享）觸發並收到消息。e.detail = { data }，data是多次 postMessage 的參數組成的數組

H5網頁需要引入JSSDK 1.3.2提供的接口wx.miniProgram.postMessage向小程序傳輸參數
webview通過bindmessage定義的方法接收h5傳輸的數據，需要注意的時，每次發送數據后數據都會添加到e.detail.data中的數組，並不會清除掉上一次傳遞的數據，所以我們取數組的最后一位元素。

由此，h5頁面引入JSSDK 1.3.2，使用wx.miniProgram.postMessage發送參數，小程序頁面使用webview的bindmessage屬性接收參數即可完成動態參數的傳遞。

• 被分享用戶打開分享鏈接進入跳當前頁還是新建一個頁面？

建議新開一個頁面。

• 特殊字符的編碼問題

當url作為參數傳遞，地址中出現”#”號時，”#”及其后面的字符串都會被忽略，不會被發送到服務器。因為瀏覽器將一個url視為一個html頁面，而”#str”表示該頁面的id為str的塊

可使用encodeURIComponent和decodeURIComponent編碼解碼。會將這些特殊字符轉義。

 

h5內代碼實現

//先引入微信JS-SDK 1.3.2
wx.miniProgram.postMessage({ data: {url:'http://www.xxx.com',title:'xxx'} })

首頁wxml代碼實現

<!--home.wxml-->
<web-view src="{{url}}" bindmessage="getmessage"></web-view>

首頁js代碼實現

  
// home.js
// 接收web-view傳來的數據
  getmessage(e) {
    let obj = e.detail.data[e.detail.data.length - 1];
    this.setData({
      message:obj
    })
  },
　// 配置分享
  onShareAppMessage: function () {
    let that = this;
    return {
      title: that.data.message.title,
      path: '/pages/share/share?url=' + encodeURIComponent(that.data.message.url),
      imageUrl: that.data.imageUrl
    }
  },

分享頁js代碼實現

  //share.js
　onLoad: function (options) {
    this.setData({
      url:decodeURIComponent(options.url)
    })
  },

分享頁wxml代碼實現

<!--share.wxml-->
<web-view src="{{url}}"></web-view>