浅谈小程序内嵌网页及内嵌网页跳转分享实现

上个月，小程序开发内嵌web页面的功能，这个对于不少微信开发者都是个重大消息。最近两天，笔者项目中有这样一个需求，支持小程序内嵌网页，而且在内嵌网页中屡次跳转，分享后，点开仍是在跳转以后的网页。对于这样一个新技术，仍是充满好奇，既然老大说了要作，那就尝试去作呗。 首先，固然是参考微信小程序的api。

<web-view src="https://mp.weixin.qq.com/"></web-view>
复制代码

其实使用起来特别简单，只需在页面中放入这样一个标签便可，其中src必定是要在小程序管理中心配置过的。特别注意一下，web-view会占满整个页面，无论这个页面有什么其它的东西，都不会展现出来。

好了。有了这个能够开始进入需求实现的阶段了。对于分享功能，作太小程序开发的都不会陌生，在须要被分享的页面js中加入onShareAppMessage这样一个事件便可。

在 Page 中定义 onShareAppMessage 函数，设置该页面的转发信息。 只有定义了此事件处理函数，右上角菜单才会显示 “转发” 按钮 用户点击转发按钮的时候会调用 此事件须要 return 一个 Object，用于自定义转发内容

示例代码以下：

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      success: function(res) {
        // 转发成功
      },
      fail: function(res) {
        // 转发失败
      }
    }
  }
})
复制代码

可是存在web-view时，onShareAppMessage回调函数参数res中还会多一个webViewUrl

Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  }
})
复制代码

看了这么多api，内心也有数了，就开始愉快的撸代码了。很快，内嵌网页分享的功能就是实现出来了。

onShareAppMessage(options) {
      var that = this
      var return_url = options.webViewUrl
      return {
        title: that.data.title,
        path: return_url,
        success: function (res) {
          that.web_url = return_url
          // 转发成功
          wx.showToast({
            title: "转发成功",
            icon: 'success',
            duration: 2000
          })
          
        },
        fail: function (res) {
          // 转发失败
        }
      }
    },
    ``` 就在感叹本身是多么牛x，一会儿就搞出来的时候，发现离需求还差一点。须要实现内嵌网页内屡次跳转分享的功能，这就须要本身想办法了。在小程序分享中又不能保持状态，这个得去记录分享时网页的路径。其实有点开发经验的都能想到这个办法，那就是使用？在url后记录下来，这样在其它用户打开转发小程序的时候，取出其中的参数，将web-view中的src替换成这个就好了。话很少说，直接上代码。 ```javascript
Page({
    web_url:"",
    data: {
      title: '测试内嵌分享',
      url:'',
      web_src:''
    },
    onShareAppMessage(options) {
      var that = this
      var return_url = options.webViewUrl
      var path = '/page/test/test?return_url=' + encodeURIComponent(return_url)
      console.log(path, options)
      return {
        title: that.data.title,
        path: path,
        success: function (res) {
          that.web_url = return_url
          // 转发成功
          wx.showToast({
            title: "转发成功",
            icon: 'success',
            duration: 2000
          })
        },
        fail: function (res) {
          // 转发失败
        }
      }
    },
    onLoad: function () {
        var pages=getCurrentPages();
        var currentPage = pages[pages.length - 1]; 
        var web_src = decodeURIComponent(currentPage.options.return_url ||
        encodeURIComponent("你的内嵌网页网址"))
        this.web_url = web_src
        this.setData({
          web_src: web_src
        }, function () {
          
        });
        
    }
})
复制代码

写到这里，终于大功告成了。 可是！！！ 测试出问题了！！！分享后跳不到想要的页面！！！ 找了n小时的bug，也看不出上面代码思路和实现有何问题。因为此项技术也刚发布不久，市面上几乎没有能够参考的文章，只能本身硬着头皮找。 找啊找，终于在今天早上找到了这个坑。 因为内嵌网页是单页面应用，在手机上测试的时候webViewUrl的获取每次都会出现问题，只有跳转方式换成通常的多页面应用的跳转方式，好比a标签href等跳转方式，而不是router-link这种方式（以vue为例），这个问题才不会出现。 也不知道这是否是个微信的bug，总之需求实现了，仍是很开心的。

以为笔者写得不错，能够点个赞哒！！！ 若是此文中有不对的地方，欢迎你们指正交流！！！