小程序內嵌網頁跳轉分享實現

對於分享功能，作太小程序開發的都不會陌生，在須要被分享的頁面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，能夠獲取當前頁面的URL地址。

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

須要實現內嵌網頁內屢次跳轉分享的功能，這就須要本身想辦法了。在小程序分享中又不能保持狀態，這個得去記錄分享時網頁的路徑。其實有點開發經驗的都能想到這個辦法，那就是使用？在url後記錄下來，這樣在其它用戶打開轉發小程序的時候，取出其中的參數，將web-view中的src替換成這個就好了。話很少說，直接上代碼。

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 () {

        });

    }
})

寫到這裏，終於大功告成了。