淺談小程式內嵌網頁及內嵌網頁跳轉分享實現

肖呵呵發表於2019-03-04
網頁

上個月，小程式開發內嵌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，總之需求實現了，還是很開心的。

覺得筆者寫得不錯，可以點個贊噠！！！
如果此文中有不對的地方，歡迎大家指正交流！！！

相關文章