淺談小程序内嵌網頁及内嵌網頁跳轉分享實現

發表時間：2021-3-31

發布人：葵宇科技

浏覽次數：65

上個(gè)月(yuè)，小程序開發内嵌web頁面的功能，這個(gè)對于很多微信開發者都是個(gè)重大消息。最近兩天，筆者項目中(zhōng)有這樣一個(gè)需求，支持小程序内嵌網頁，并且在内嵌網頁中(zhōng)多次跳轉，分享後，點開還是在跳轉之後的網頁。對于這樣一個(gè)新技術(shù)，還是充滿好奇，既然老大說了要做，那就嘗試去做呗。

首先，當然是參考微信小程序的api。

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

其實使用起來特别簡單，隻需在頁面中(zhōng)放入這樣一個(gè)标簽即可(kě)，其中(zhōng)src一定是要在小程序管理中(zhōng)心配置過的。特别注意一下(xià)，web-view會占滿整個(gè)頁面，不管這個(gè)頁面有什麼其它的東西，都不會展示出來。

好了。有了這個(gè)可(kě)以開始進入需求實現的階段了。對于分享功能，做過小程序開發的都不會陌生，在需要被分享的頁面js中(zhōng)加入onShareAppMessage這樣一個(gè)事件即可(kě)。

在 Page 中(zhōng)定義 onShareAppMessage 函數，設置該頁面的轉發信息。

隻有定義了此事件處理函數，右上角菜單才會顯示 “轉發” 按鈕

用戶點擊轉發按鈕的時候會調用

此事件需要 return 一個(gè) Object，用于自定義轉發内容

示例代碼如(rú)下(xià)：

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中(zhōng)還會多一個(gè)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，一下(xià)子(zǐ)就搞出來的時候，發現離(lí)需求還差一點。需要實現内嵌網頁内多次跳轉分享的功能，這就需要自己想辦法了。在小程序分享中(zhōng)又不能保持狀态，這個(gè)得去記錄分享時網頁的路(lù)徑。其實有點開發經驗的都能想到這個(gè)辦法，那就是使用？在url後記錄下(xià)來，這樣在其它用戶打開轉發小程序的時候，取出其中(zhōng)的參數，将web-view中(zhōng)的src替換成這個(gè)就行了。話不多說，直接上代碼。

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 = https://www.wxapp-union.com/decodeURIComponent(currentPage.options.return_url ||
        encodeURIComponent("你(nǐ)的内嵌網頁網址"))
        this.web_url = web_src
        this.setData({
          web_src: web_src
        }, function () {

        });

    }
})