摘要：網(wǎng)頁引入網(wǎng)頁發(fā)起支付由后臺返回，主要是需要統(tǒng)一下單平臺的微信支付頁面支付參數(shù)錯誤，請稍后重試支付成功支付失敗支付錯誤分享功能小程序直接分享的所在的頁面，如果需要加上頁面參數(shù)，那我們就需要處理一下了。

小程序現(xiàn)在越來越流行，但是公司的很多項目都是用網(wǎng)頁寫的，小程序語法不兼容原生網(wǎng)頁，使得舊有項目遷移至小程序代價很高；
小程序之前開放了webview功能，可以說是網(wǎng)頁應用的一大福音了，但是微信的webview有一些坑，這篇文章就是列舉一下我在開發(fā)過程中遇到的一些問題以及我找到的一些解決方案。

openid登錄問題

webview動態(tài)src

支付功能

分享功能

掃描普通二維碼跳轉(zhuǎn)特定頁面

返回按鈕缺失問題

微信webview的使用方法很簡單，只要如下設置src就可以展示具體的網(wǎng)站了。

微信環(huán)境里的很多網(wǎng)頁都是用頁面要實現(xiàn)網(wǎng)站的登錄功能，只要把登錄的信息，比如openid或者其他信息拼接到src里就好了。
這里有個問題，公眾號的賬號體系一般是以openid來判斷唯一性的，小程序是可以獲取openid的，但是小程序的openid和原公眾號之類的openid是不一樣的，需要將原先的openid賬號體系升級為unionid賬號體系。

以下是微信對unionid的介紹
獲取用戶基本信息(UnionID機制)
在關注者與公眾號產(chǎn)生消息交互后，公眾號可獲得關注者的OpenID（加密后的微信號，每個用戶對每個公眾號的OpenID是唯一的。對于不同公眾號，同一用戶的openid不同）。公眾號可通過本接口來根據(jù)OpenID獲取用戶基本信息，包括昵稱、頭像、性別、所在城市、語言和關注時間。  
請注意，如果開發(fā)者有在多個公眾號，或在公眾號、移動應用之間統(tǒng)一用戶帳號的需求，需要前往微信開放平臺（open.weixin.qq.com）綁定公眾號后，才可利用UnionID機制來滿足上述需求。  
UnionID機制說明：
開發(fā)者可通過OpenID來獲取用戶基本信息。特別需要注意的是，如果開發(fā)者擁有多個移動應用、網(wǎng)站應用和公眾帳號，可通過獲取用戶基本信息中的unionid來區(qū)分用戶的唯一性，因為只要是同一個微信開放平臺帳號下的移動應用、網(wǎng)站應用和公眾帳號，用戶的unionid是唯一的。換句話說，同一用戶，對同一個微信開放平臺下的不同應用，unionid是相同的。

做完以上步驟，就可以調(diào)用小程序api wx.getUserInfo() 來獲取用戶信息了,此步驟需要進行后臺信息解密過程，在此就不再贅述，結合小程序api文檔操作就好。

獲取到unioid之后，將unionid信息拼接到src就可以進行網(wǎng)頁登錄操作了(前提是網(wǎng)頁可以用跳轉(zhuǎn)鏈接的方式登錄，類似公眾號頁面獲取openid的形式)。

微信的webview有個坑的地方，不會動態(tài)的監(jiān)聽src的變化，這就造成了一個問題，要通過改變src實現(xiàn)頁面跳轉(zhuǎn)就不可以了。
我嘗試了一些方法之后，找到了一個解決方案：

微信webview在頁面load的時候會加載一次webview，我們就利用這個特性來實現(xiàn)動態(tài)src問題。

首先把要跳轉(zhuǎn)的鏈接信息設置成全局變量，要改變src的時候，先把要src以’？‘拆分為鏈接和參數(shù)兩部分，存入全局函數(shù),再調(diào)用onLoad就可以實現(xiàn)webview刷新了。
頁面跳轉(zhuǎn)時，我們也需要src的動態(tài)刷新，所以要把鏈接信息存入全局函數(shù)；頁面跳轉(zhuǎn)時，onShow函數(shù)會被調(diào)用，這時候再調(diào)用一次onLoad就可以了。

data: {
    url: "",
    loaded: false
}
// 小程序js里的onLoad函數(shù)可以寫成這樣
onLoad: function () {
    this.setData({
      url: getApp().globalData.urlToken + "?" +  getApp().globalData.urlData
    })
},
changUrl: function () {
    getApp().globalData.urlToken = "https://www.example.com"
    getApp().globalData.urlToken = "a=1&b=2"
    // 直接調(diào)用onLoad，就會實現(xiàn)src的刷新
    this.onLoad()
},
onShow: function () {
    if (!this.data.loaded) {
      // 第一次不運行
      this.setData({
        loaded: true
      })
      return
    }
    // 直接調(diào)用onLoad，就會實現(xiàn)src的刷新
    this.onLoad()
  }

// wxml可以寫成這樣

webview里面可以通過jssdk來實現(xiàn)一些小程序功能，但不能直接調(diào)用小程序的支付功能，這時候我們就需要轉(zhuǎn)變一下策略了：

在網(wǎng)頁里引入微信jssdk

在網(wǎng)頁需要發(fā)起支付的地方，調(diào)用跳轉(zhuǎn)頁面的接口，控制小程序跳轉(zhuǎn)到小程序的支付頁面（這個要在小程序里多帶帶寫的）,跳轉(zhuǎn)的時候，需要把訂單的一些信息都拼接到鏈接里,訂單信息由后臺返回，需要通過微信支付系統(tǒng)的統(tǒng)一下單接口，具體參看支付文檔。
跳轉(zhuǎn)到小程序支付頁面后，由小程序頁面發(fā)起支付，支付完成后跳轉(zhuǎn)回webview頁面，通過之前設置的動態(tài)src，控制webview跳轉(zhuǎn)到特定的頁面。

// 網(wǎng)頁引入jssdk

// 網(wǎng)頁發(fā)起支付
wx.miniProgram.navigateTo({
    // payData由后臺返回，主要是需要統(tǒng)一下單平臺的prepay_id
    url: "../pay/index?data=" + encodeURIComponent(JSON.stringify(payData))
})
// 微信支付頁面
onLoad: function (option) {
    let page = this
    try {
      let data = JSON.parse(option.data)
      if (!data || !data.prepay_id) {
        console.error("支付參數(shù)錯誤，請稍后重試", data)
      }
      wx.requestPayment({
        timeStamp: "" + data.timestamp,
        nonceStr: data.nonceStr,
        package: "prepay_id=" + data.prepay_id,
        paySign: data.paySign,
        signType: data.signType,
        success: function (res) {
          getApp().globalData.urlToken = `paySuccess.html`
          // 支付成功
          getApp().globalData.urlData = "data=paySuccessData"
          wx.navigateTo({
            url: "/page/home/index",
          })
        },
        fail: function (res) {
          getApp().globalData.urlToken = `payError.html`
          // 支付失敗
          getApp().globalData.urlData = "data=payErrorData"
          wx.navigateTo({
            url: "/page/home/index",
          })
        },
        complete: function (res) {
        }
      })
    } catch (e) {
      console.error("支付錯誤", e)
    }
  }

小程序直接分享的webview所在的頁面，如果需要加上頁面參數(shù)，那我們就需要處理一下了。

webview內(nèi)是不能直接發(fā)起分享的，需要先用wx.miniProgram.postMessage接口，把需要分享的信息，推送給小程序；推送給小程序的信息不是實時處理的，而是用戶點擊了分享按鈕之后，小程序才回去讀取的，這就要求每個需要分享的頁面再進入的時候就發(fā)起wx.miniProgram.postMessage推送分享信息給小程序。
小程序頁面通過bindmessage綁定的函數(shù)讀取post信息，分享的信息會是一個列表，我們?nèi)∽詈笠粋€分享就好,把分享信息處理好，存到data里面以便下一步onShareAppMessage調(diào)用。
用戶點擊分享時，會觸發(fā)onShareAppMessage函數(shù)，在里面設置好對應的分享信息就好了。
onload函數(shù)有一個option參數(shù)的，可以讀取頁面加載時url里帶的參數(shù)，這時要對原先的onload函數(shù)進行改造，實現(xiàn)從option里讀取鏈接信息。

// 網(wǎng)頁wx.miniProgram.postMessage
wx.miniProgram.postMessage({
  data: {
    link: shareInfo.link,
    title: shareInfo.title,
    imgUrl: shareInfo.imgUrl,
    desc: shareInfo.desc
  }
})
// 小程序index wxml設置

// 小程序index js
bindGetMsg: function (e) {
    if (!e.detail) {
      return
    }
    let list = e.detail.data
    if (!list || list.length === 0) {
      return
    }
    let info = list[list.length - 1]
    if (!info.link) {
      console.error("分享信息錯誤", list)
      return
    }
    let tokens = info.link.split("?")
    this.setData({
      shareInfo: {
        title: info.title,
        imageUrl: info.imgUrl,
        path: `/page/index/index?urlData=${encodeURIComponent(tokens[1])}&urlToken=${tokens[0]}`
      }
    })
},
onShareAppMessage: function (res) {
    if (res.from === "button") {
      // 來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕
      console.log(res.target)
    }
    let that = this
    return {
      title: that.data.shareInfo.title,
      path: that.data.shareInfo.path,
      imageUrl: that.data.shareInfo.imageUrl,
      success: function (res) {
        // 轉(zhuǎn)發(fā)成功
      },
      fail: function (res) {
        // 轉(zhuǎn)發(fā)失敗
      }
    }
},
onLoad: function (option) {
    if (option.urlToken) {
      getApp().globalData.urlToken = option.urlToken
    }
    if (option.urlData) {
      getApp().globalData.urlData = option.urlData
    }
    this.setData({
      url: getApp().globalData.urlToken + "?" +  getApp().globalData.urlData
    })
},

除了分享功能之外，小程序還可以通過配置，實現(xiàn)掃描普通二維碼跳轉(zhuǎn)特定頁面的功能。

以下是微信對此功能的介紹
為了方便小程序開發(fā)者更便捷地推廣小程序，兼容線下已有的二維碼，微信公眾平臺開放掃描普通鏈接二維碼跳轉(zhuǎn)小程序能力。
功能介紹
普通鏈接二維碼，是指開發(fā)者使用工具對網(wǎng)頁鏈接進行編碼后生成的二維碼。
線下商戶可不需更換線下二維碼，在小程序后臺完成配置后，即可在用戶掃描普通鏈接二維碼時打開小程序，使用小程序的功能。
對于普通鏈接二維碼，目前支持使用微信“掃一掃”或微信內(nèi)長按識別二維碼跳轉(zhuǎn)小程序.
二維碼規(guī)則
根據(jù)二維碼跳轉(zhuǎn)規(guī)則，開發(fā)者需要填寫需要跳轉(zhuǎn)小程序的二維碼規(guī)則。要求如下：

二維碼規(guī)則的域名須通過ICP備案的驗證。
支持http、https、ftp開頭的鏈接（如：http://wx.qq.com、https://wx.qq.com/mp/、https://wx.qq.com/mp?id=123）。
一個小程序帳號可配置不多于10個二維碼前綴規(guī)則。

前綴占用規(guī)則
開發(fā)者可選擇是否占用符合二維碼匹配規(guī)則的所有子規(guī)則。如選擇占用，則其他帳號不可申請使用滿足該前綴匹配規(guī)則的其他子規(guī)則。
如：若開發(fā)者A配置二維碼規(guī)則：https://wx.qq.com/mp?id=123，并選擇“占用所有子規(guī)則“，其他開發(fā)者將不可以配置滿足前綴匹配的子規(guī)則如https://wx.qq.com/mp?id=1234。
我推薦的方式
webview實現(xiàn)方式


設置跳轉(zhuǎn)功能小程序后臺就可以設置，鏈接是分為四部分，路https://www.example.com/wxmin...。


https://www.example.com
域名



/wxmini/
小程序前置規(guī)則，需要在服務器上建一個文件夾，并且把驗證文件放在文件夾線


home.html
需要跳轉(zhuǎn)的網(wǎng)頁頁面


a=1
跳轉(zhuǎn)頁面的參數(shù)




對onload函數(shù)再進行處理，實現(xiàn)普通二維碼跳轉(zhuǎn)。

// 對index onLoad在進行處理
onLoad: function (option) {
    this.resetOption(option)
    if (option.urlToken) {
      getApp().globalData.urlToken = option.urlToken
    }
    if (option.urlData) {
      getApp().globalData.urlData = option.urlData
    }
    this.setData({
      url: getApp().globalData.urlToken + "?" +  getApp().globalData.urlData
    })
},
resetOption: function (option) {
    if (!option) {
      return
    }
    if (option.q) {
      option.q = decodeURIComponent(option.q)
      if (option.q.indexOf("https://www.example.com/wxmini/") == -1) {
        return
      }
      let tmp = option.q.replace("/wxmini", "")
      let tmps = tmp.split("?")
      option.urlToken = tmps[0]
      option.urlData = tmps[1]
    } else {
      option.urlData = decodeURIComponent(option.urlData)
    }
}

如果web頁面是在第一個頁面的話，這時候會有一個問題，小程序的返回按鈕就沒有了，webview無法使用微信的返回按鈕了，這時候只要在webview頁面前多加一個跳轉(zhuǎn)頁面就好了（第一個頁面也可以設置成獲取用戶權限的頁面，不過我感覺這樣體驗不好，也不是所有頁面都要用戶獲取了權限才可以使用）

最終的頁面層級

"pages": [
    "page/index/index", // 首頁，處理onload里的option內(nèi)容，為了返回按鈕設置的
    "page/home/index", // webview所在的頁面
    "page/auth/index", // 獲取用戶權限的頁面
    "page/pay/index", // 支付頁面
    "page/error/index" // 錯誤信息頁面
  ],

webview文檔

小程序unionid介紹

unionid獲取方式