記錄下小程序的webview分享內頁

做者：last order

前言

第一次在掘金髮文章，請大佬多多指教，來自一個萌新。

最近在作小程序，遇到了點小問題，就是小程序的webview內頁分享，網上也去翻了下，也找到了答案，分享下答案。

實現思路

作的時候，遇到了2個問題：

• 分享出去的地址404，說找不到頁面
• 分享出去的地址一直是首頁

1. 第一個問題

最開始的時候，點擊分享，分享出去的頁面一直說找不到頁面，網上查找了下方案，說是webview地址的問題，最後也確實是這樣，改爲動態地址就ok了。

2. 第二個問題

第二個問題，分享出去的頁面一直是首頁，實現思路是點擊分享的時候，經過onShareAppMessage的一個options參數，裏面有個webViewUrl，這個就是你當前的webview地址，把這個當成參數進行傳遞就好了，並經過wx.setStorageSync存儲到本地，網頁把須要傳遞的數據經過wx.postmessage發送給小程序，在小程序進行保存。

這時候，標題和分享信息已經拿到了，而後就是如何分享，以前咱們已經在點擊分享的時候拿到了url參數，須要注意的是小程序遇到#這個符號的話，會把後面的所有截掉，因爲以前已經把url地址保存到了本地，咱們只要處理就能夠了，而後這樣就能夠分享了。

至於爲何須要用到本地存儲，是由於分享的地址帶#號，被微信給攔截掉了，就這樣。

好了，具體就是這個樣子了，若是有問題的話，在私聊我吧。第一次在掘金寫文章，之後請多指教。

let url = wx.getStorageSync('web_url');
    if (url) {
      let address = 'https://www.baidu.com/'
      let split = url.split(address)
      let res = address + split[1]
      console.log(res)
      this.setData({
        url: res
      })
    }
onShareAppMessage: function (options) {
    let that = this
    wx.setStorageSync('web_url', options.webViewUrl)
    let path = '/pages/index/index?return_url=' + options.webViewUrl
    console.log(path, options)
    return {
      title: this.data.storeInfo.shop_name,
      path: path,
      success: function (res) {
        // 轉發成功
        wx.showToast({
          title: "轉發成功",
          icon: 'success',
          duration: 2000
        })
      },
      fail: function (res) {
        console.log('失敗')
        console.log(res)
      }
    }
  }
複製代碼