记录下小程序的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)
      }
    }
  }
复制代码