上個(gè)月，小程序開(kāi)發(fā)內(nèi)嵌web頁(yè)面的功能，這個(gè)對(duì)于很多微信開(kāi)發(fā)者都是個(gè)重大消息。最近兩天，筆者項(xiàng)目中有這樣一個(gè)需求，支持小程序內(nèi)嵌網(wǎng)頁(yè)，并且在內(nèi)嵌網(wǎng)頁(yè)中多次跳轉(zhuǎn)，分享后，點(diǎn)開(kāi)還是在跳轉(zhuǎn)之后的網(wǎng)頁(yè)。對(duì)于這樣一個(gè)新技術(shù)，還是充滿好奇，既然老大說(shuō)了要做，那就嘗試去做唄。

首先，當(dāng)然是參考微信小程序的api。

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

其實(shí)使用起來(lái)特別簡(jiǎn)單，只需在頁(yè)面中放入這樣一個(gè)標(biāo)簽即可，其中src一定是要在小程序管理中心配置過(guò)的。特別注意一下，web-view會(huì)占滿整個(gè)頁(yè)面，不管這個(gè)頁(yè)面有什么其它的東西，都不會(huì)展示出來(lái)。

好了。有了這個(gè)可以開(kāi)始進(jìn)入需求實(shí)現(xiàn)的階段了。對(duì)于分享功能，做過(guò)小程序開(kāi)發(fā)的都不會(huì)陌生，在需要被分享的頁(yè)面js中加入onShareAppMessage這樣一個(gè)事件即可。

在 Page 中定義 onShareAppMessage 函數(shù)，設(shè)置該頁(yè)面的轉(zhuǎn)發(fā)信息。

只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示 “轉(zhuǎn)發(fā)” 按鈕

用戶點(diǎn)擊轉(zhuǎn)發(fā)按鈕的時(shí)候會(huì)調(diào)用

此事件需要 return 一個(gè) Object，用于自定義轉(zhuǎn)發(fā)內(nèi)容

示例代碼如下：

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 來(lái)自頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕
      console.log(res.target)
    }
    return {
      title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
      path: '/page/user?id=123',
      success: function(res) {
        // 轉(zhuǎn)發(fā)成功
      },
      fail: function(res) {
        // 轉(zhuǎn)發(fā)失敗
      }
    }
  }
})

但是存在web-view時(shí)，onShareAppMessage回調(diào)函數(shù)參數(shù)res中還會(huì)多一個(gè)webViewUrl

Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  }
})

看了這么多api，心里也有數(shù)了，就開(kāi)始愉快的擼代碼了。很快，內(nèi)嵌網(wǎng)頁(yè)分享的功能就是實(shí)現(xiàn)出來(lái)了。

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
          // 轉(zhuǎn)發(fā)成功
          wx.showToast({
            title: "轉(zhuǎn)發(fā)成功",
            icon: 'success',
            duration: 2000
          })

        },
        fail: function (res) {
          // 轉(zhuǎn)發(fā)失敗
        }
      }
    },

就在感嘆自己是多么牛x，一下子就搞出來(lái)的時(shí)候，發(fā)現(xiàn)離需求還差一點(diǎn)。需要實(shí)現(xiàn)內(nèi)嵌網(wǎng)頁(yè)內(nèi)多次跳轉(zhuǎn)分享的功能，這就需要自己想辦法了。在小程序分享中又不能保持狀態(tài)，這個(gè)得去記錄分享時(shí)網(wǎng)頁(yè)的路徑。其實(shí)有點(diǎn)開(kāi)發(fā)經(jīng)驗(yàn)的都能想到這個(gè)辦法，那就是使用？在url后記錄下來(lái)，這樣在其它用戶打開(kāi)轉(zhuǎn)發(fā)小程序的時(shí)候，取出其中的參數(shù)，將web-view中的src替換成這個(gè)就行了。話不多說(shuō)，直接上代碼。

Page({
    web_url:"",
    data: {
      title: '測(cè)試內(nèi)嵌分享',
      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
          // 轉(zhuǎn)發(fā)成功
          wx.showToast({
            title: "轉(zhuǎn)發(fā)成功",
            icon: 'success',
            duration: 2000
          })
        },
        fail: function (res) {
          // 轉(zhuǎn)發(fā)失敗
        }
      }
    },
    onLoad: function () {
        var pages=getCurrentPages();
        var currentPage = pages[pages.length - 1]; 
        var web_src = https://www.wxapp-union.com/decodeURIComponent(currentPage.options.return_url ||
        encodeURIComponent("你的內(nèi)嵌網(wǎng)頁(yè)網(wǎng)址"))
        this.web_url = web_src
        this.setData({
          web_src: web_src
        }, function () {

        });

    }
})

寫(xiě)到這里，終于大功告成了。

但是?。?！

測(cè)試出問(wèn)題了?。。》窒砗筇坏较胍捻?yè)面?。?！

找了n小時(shí)的bug，也看不出上面代碼思路和實(shí)現(xiàn)有何問(wèn)題。由于此項(xiàng)技術(shù)也剛發(fā)布不久，市面上幾乎沒(méi)有可以參考的文章，只能自己硬著頭皮找。

找啊找，終于在今天早上找到了這個(gè)坑。

由于內(nèi)嵌網(wǎng)頁(yè)是單頁(yè)面應(yīng)用，在手機(jī)上測(cè)試的時(shí)候webViewUrl的獲取每次都會(huì)出現(xiàn)問(wèn)題，只有換成一般的多頁(yè)面應(yīng)用，這個(gè)問(wèn)題才不會(huì)發(fā)現(xiàn)。

也不知道這是不是個(gè)微信的bug，總之需求實(shí)現(xiàn)了，還是很開(kāi)心的。

覺(jué)得筆者寫(xiě)得不錯(cuò)，可以點(diǎn)個(gè)贊噠?。?！

如果此文中有不對(duì)的地方，歡迎大家指正交流！??！