微信小程序之web-view中的页面分享

Posted 2021-02-28 风行者夜色

遇到的问题

• 由于整个小程序都是用web-view嵌入的，这个时候，如果单纯的进行页面分享，只会导致不管在web-view的哪个页面进行分享，都会在点击后进入首页。

解决思路

• 首先是开启小程序的页面分享功能

wx.showShareMenu({
  withShareTicket: true, // 该参数在做分享到群内的统计的时候可以用到，单独分享给某个人是undefined，在小程序的load或者show的回调中可以拿到这个值
})

• 然后在onShareAppMessage中包装一下分享的信息，该回调是在点击右上角的分享之后，但是信息还没有发出去之前进行的一次回调，传入了一个包含from,dataset以及webViewUrl三个参数的对象。它的返回值就是对应的分享信息，这个时候我们拿到了对应的webview里面的url之后就可以做一些自己需要的操作了。

  onShareAppMessage(options) {
    console.log(options);
    const { webViewUrl } = options;
    const i = webViewUrl.indexOf(‘?‘);
    let search = ‘‘,
      url = webViewUrl;
    if(i !== -1) {
      url = webViewUrl.slice(0, i);
      search = `${webViewUrl.slice(i + 1)}`;
    }
    const shareObj = {
      title: "分享的标题",        // 默认是小程序的名称(可以写slogan等)
      path: `/pages/index?url=${url}${search ? ‘&‘ : ‘‘}${search}`,        // 默认是当前页面，必须是以‘/’开头的完整路径，通过拼接的方式，把需要分享的web-view的url以及参数拼接进去，然后在该`web-view`的页面中去做参数判断，一旦传入了对应的url和参数，就进入对应的url并携带对应的参数
      // imageUrl: ‘‘,     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
      success: function (res) {
        // 转发成功之后的回调
        if (res.errMsg == ‘shareAppMessage:ok‘) {
        }
      },
      fail: function () {
        // 转发失败之后的回调
        if (res.errMsg == ‘shareAppMessage:fail cancel‘) {
          // 用户取消转发
        } else if (res.errMsg == ‘shareAppMessage:fail‘) {
          // 转发失败，其中 detail message 为详细失败信息
        }
      },
      complete: function () {
        // 转发结束之后的回调（转发成不成功都会执行）
      }
    }
    // 来自页面内的按钮的转发
    if (options.from == ‘button‘) {
      var data= options.target.dataset;
      console.log(data.name);     // shareBtn
      // 此处可以修改 shareObj 中的内容
      // shareObj.path = ‘/pages/index‘ + data.name;
    }
    // 返回shareObj
    return shareObj;
  }

还存在的问题

• 这样分享之后，进入之后确实能够进入到对应的url中，但是会出现无法回退到小程序首页的问题。由于整个小程序只有一个web-view，导致了所有页面的切换都是在一个原生页面下进行的，所以如果需要进行回退，最好是新增一个web-view的页面，用到专门处理分享的链接。