【微信小程序】web-view 第三方网站分享，用户打不开提示错误

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

页面由 webview 组件承载，点击右上角 ··· 分享转发出去后，用户却无法打开（如下图真机所示），
大部分情况下，IOS 苹果系统打开是空白页，安卓系统才会有提示！

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、初步排查

小程序webview嵌套h5 分享后，点击分享的小程序打不开页面，安卓机提升不支持打开，http://https%3A%2F%2F的页面

一开始以为是分享url encodeURIComponent导致，于是分享之前decode url后，发现提示页面不存在

二、解决方案

分享URL需要修改为小程序的路径，不然会找不到页面

代码如下（示例）：

data() {
    return {
      webUrl: '',
    }
  },
onLoad(option) {
  this.webUrl = decodeURIComponent(option.url);
},

// vue2 写法
onShareAppMessage() {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const currentRoute = currentPage.route;

    let url = `${currentRoute}?url=${encodeURIComponent(this.webUrl)}`

    return {
      title: '页面1',
      path: url,
      imageUrl: ''
    }
}

---

总结

问题原因主要是由于小程序跳转路径不正确导致，修改后可以正常跳转到小程序web-view页面