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

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

openid登錄問題

webview動態src

支付功能

分享功能

掃描普通二維碼跳轉特定頁面

返回按鈕缺失問題

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

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

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

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

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

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

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

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

data: {
    url: "",
    loaded: false
}
// 小程序js里的onLoad函數可以寫成這樣
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"
    // 直接調用onLoad，就會實現src的刷新
    this.onLoad()
},
onShow: function () {
    if (!this.data.loaded) {
      // 第一次不運行
      this.setData({
        loaded: true
      })
      return
    }
    // 直接調用onLoad，就會實現src的刷新
    this.onLoad()
  }

// wxml可以寫成這樣

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

在網頁里引入微信jssdk

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

// 網頁引入jssdk

// 網頁發起支付
wx.miniProgram.navigateTo({
    // payData由后臺返回，主要是需要統一下單平臺的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("支付參數錯誤，請稍后重試", 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所在的頁面，如果需要加上頁面參數，那我們就需要處理一下了。

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

// 網頁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") {
      // 來自頁面內轉發按鈕
      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) {
        // 轉發成功
      },
      fail: function (res) {
        // 轉發失敗
      }
    }
},
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
    })
},

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

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

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

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


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


https://www.example.com
域名



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


home.html
需要跳轉的網頁頁面


a=1
跳轉頁面的參數




對onload函數再進行處理，實現普通二維碼跳轉。

// 對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頁面前多加一個跳轉頁面就好了（第一個頁面也可以設置成獲取用戶權限的頁面，不過我感覺這樣體驗不好，也不是所有頁面都要用戶獲取了權限才可以使用）

最終的頁面層級

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

webview文檔

小程序unionid介紹

unionid獲取方式