上(shàng)個(gè)月(yuè)，小(xiǎo)程序開(kāi)發內(nèi)嵌web頁面β↔£¥的(de)功能(néng)，這(zhè)個(gè)對(du≈‌≥ì)于很(hěn)多(duō)微(wēi)信開(kāiφ∏)發者都(dōu)是(shì)個(gè)重大(dà)消息。最近(jìn)兩天，筆(bǐδ♠)者項目中有(yǒu)這(zhè)樣一(yī)個(gè)需求，支持'♥小(xiǎo)程序內(nèi)嵌網頁，并且在內(nèi)嵌網頁中多(duō)次跳(tiào)轉，分¶α•↓(fēn)享後，點開(kāi)還(hái)是(shì)在跳(tiào)轉之後的(de∞‍§)網頁。對(duì)于這(zhè)樣一(yī)個(gè)新技(jì)÷↑ "術(shù)，還(hái)是(shì)充滿好(hǎo)奇，既然老(lǎo)大(dà)說(shδ® €uō)了(le)要(yào)做(zuò)，那(nà)就(jiù)嘗試去(qù)做(zuò)呗。α™≥§

首先，當然是(shì)參考微(wēi)信小(xiǎo)程序的(de)api。

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

其實使用(yòng)起來(lái)特别簡單，隻需在頁面中放(fàng)入這(zhè)樣一(yī)個σγ♥ε(gè)标簽即可(kě)，其中src一(yī)定是(shì)λ​↕要(yào)在小(xiǎo)程序管理(lǐ)中心配置過的(de)。特别注意× €Ω一(yī)下(xià)，web-view會(huì)占滿整個(gè)頁面，不(bù)管這 ε÷(zhè)個(gè)頁面有(yǒu)什(shén)麽其它的(de)東(dōn₩↓g)西(xī)，都(dōu)不(bù)會(huì)展示出來(lái)。

好(hǎo)了(le)。有(yǒu)了(le)這(zhè)個(gè)可(kě)以開(kāi&βΩ)始進入需求實現(xiàn)的(de)階段了(le)。✘•☆對(duì)于分(fēn)享功能(néng)，做(zuò)過小(xi∞γǎo)程序開(kāi)發的(de)都(dōu)不(bù)會(huì)陌生ΩΩ↓&(shēng)，在需要(yào)被分(fēn)享的(de)頁面js中加∞♠入onShareAppMessage這(zhè)樣一(yī)個(gè)事(shì)件(jiàn)即♠✔可(kě)。

在 Page 中定義 onShareAppMessage €€¥₹函數(shù)，設置該頁面的(de)轉發信息。

隻有(yǒu)定義了(le)此事(shì)件(jiàn)處理(lǐ)函數(shù)，右上φ±×(shàng)角菜單才會(huì)顯示 “轉發” 按鈕

用(yòng)戶點擊轉發按鈕的(de)時(shí)候會≠∞♦(huì)調用(yòng)

此事(shì)件(jiàn)需要(yào) return 一(yī↓‌δ)個(gè) Object，用(yòng)于自(zì)定義轉發內(nèi)容

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

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

但(dàn)是(shì)存在web-view時(shí)，↓λ¶onShareAppMessage回調函數(shù)參數(shù)res中還(hái)會(h€​≥uì)多(duō)一(yī)個(gè)webViewUr↓λl

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

看(kàn)了(le)這(zhè)麽多(duō)api，心裡(lǐ)也(yě÷ ★↔)有(yǒu)數(shù)了(le)，就(jiù)開(kāi)始愉快∞π★(kuài)的(de)撸代碼了(le)。很(hěn)快(kuài)，內(nèi)嵌&♦&ε網頁分(fēn)享的(de)功能(néng)就(jiù)是(shì)實現α∞(xiàn)出來(lái)了(le)。

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_ur±×↓l
          // 轉發成功
          wx.showToast({
            title: "轉發成功",
            icon: 'success',
            duration: 2000
          })

        },
        fail: function (res) {
          // 轉發失敗
        }
      }
    },

就(jiù)在感歎自(zì)己是(shì)多(duō)麽牛x，一(yī)下(x ∞₹↓ià)子(zǐ)就(jiù)搞出來(lái)的(de)時(shí)候，發↕₹現(xiàn)離(lí)需求還(hái)差一(yī)點。需要(yào)實現(✘☆•xiàn)內(nèi)嵌網頁內(nèi)多(duō)次跳(tiào)轉分(fēn)•∑∏π享的(de)功能(néng)，這(zhè)就(jiù)需要₽↕α≤(yào)自(zì)己想辦法了(le)。在小(xiǎo)程序分(fēו©∏n)享中又(yòu)不(bù)能(néng)保持狀态，這(zh↓"¥è)個(gè)得(de)去(qù)記錄分(fēn)享時(shí)網頁的(de)路(lù)徑。其實♥÷有(yǒu)點開(kāi)發經驗的(de)都(dōu)∑λ能(néng)想到(dào)這(zhè)個(gè)辦法，那(®'nà)就(jiù)是(shì)使用(yòng)？在url後記™±錄下(xià)來(lái)，這(zhè)樣在其它用(yòng)戶打開(kāi☆π✔)轉發小(xiǎo)程序的(de)時(shí)候，取出其中的(de)參數(shù)，©×将web-view中的(de)src替換成這(zhè)個(gè₽☆)就(jiù)行(xíng)了(le)。話(huà)不(bù)多(duō)說(sh≤←÷uō)，直接上(shàng)代碼。

Page({
    web_url:"",
    data: {
      title: '測試內(nèi)嵌分(fēn)享',
      url:'',
      web_src:''
    },
    onShareAppMessage(optio​♣✘ns) {
      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.leεπ™ngth - 1]; 
        var web_src = https://www.wxapp-union.com/decodeURIComponent(currentPage.options.return_url ||
        encodeURIComponent("你(nǐ)的(de)內(nèi)嵌網頁網址"))
        this.web_url = web_src
        this.setData({
          web_src: web_src
        }, function () {

        });

    }
✘ β})

寫到(dào)這(zhè)裡(lǐ)，終于大(dà)功告成了(le)。

但(dàn)是(shì)！！！

測試出問(wèn)題了(le)！！！分(fēn)享後₩‍φ<跳(tiào)不(bù)到(dào)想要(yào)的(de)頁面！！！

找了(le)n小(xiǎo)時(shí)的(de)bug，也(yě)看(kàn)不(b ↓ù)出上(shàng)面代碼思路(lù)和(hé)實現(xiàn)有(y&≤φǒu)何問(wèn)題。由于此項技(jì)術(shù)也(yě)剛發布不(bù)久，市≈₹ ≤(shì)面上(shàng)幾乎沒有(yǒu)可(kě)以參考的(de)文(wén)↓₽章(zhāng)，隻能(néng)自(zì)己硬著(z ★he)頭皮找。

找啊找，終于在今天早上(shàng)找到(dào)了(le)這(zhè)個(gè)坑♦​>φ。

由于內(nèi)嵌網頁是(shì)單頁面應用(yòng)，在手機(jī↔ε♦¶)上(shàng)測試的(de)時(shí)候webViewUrl的(de)獲取每次都(dλ"♦ōu)會(huì)出現(xiàn)問(wèn)題，隻有☆↔>(yǒu)換成一(yī)般的(de)多(duō)頁面應用(yòng)，這(zhè ‌↑)個(gè)問(wèn)題才不(bù)會(huì)發現(xiàn)。

也(yě)不(bù)知(zhī)道(dào)這(zhè)是(shì)不(bù)是(shì)個(gè≤​✔)微(wēi)信的(de)bug，總之需求實現(xiàn)了(le)，還(hái)是(shì)很(←δ≠♦hěn)開(kāi)心的(de)。

覺得(de)筆(bǐ)者寫得(de)不(bù)錯(cuò)，可(kě)β×≥≤以點個(gè)贊哒！！！

如(rú)果此文(wén)中有(yǒu)不(bù)對(duì)的(de)地(dì)方，歡迎大(dà♦ §)家(jiā)指正交流！！！