網(wǎng)頁(yè)程序遷移至微信小程序web-view詳解

AlphaGooo 發(fā)布于2019-08-02 11:04 / 3636人閱讀

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

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

遇到的問(wèn)題

openid登錄問(wèn)題

webview動(dòng)態(tài)src

支付功能

分享功能

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

返回按鈕缺失問(wèn)題

openid登錄問(wèn)題

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

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

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

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

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

webview動(dòng)態(tài)src

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

微信webview在頁(yè)面load的時(shí)候會(huì)加載一次webview，我們就利用這個(gè)特性來(lái)實(shí)現(xiàn)動(dòng)態(tài)src問(wèn)題。

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

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

// wxml可以寫(xiě)成這樣

支付功能

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

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

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

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

// 網(wǎng)頁(yè)發(fā)起支付
wx.miniProgram.navigateTo({
    // payData由后臺(tái)返回，主要是需要統(tǒng)一下單平臺(tái)的prepay_id
    url: "../pay/index?data=" + encodeURIComponent(JSON.stringify(payData))
})
// 微信支付頁(yè)面
onLoad: function (option) {
    let page = this
    try {
      let data = JSON.parse(option.data)
      if (!data || !data.prepay_id) {
        console.error("支付參數(shù)錯(cuò)誤，請(qǐng)稍后重試", 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("支付錯(cuò)誤", e)
    }
  }

分享功能

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

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

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

// 小程序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("分享信息錯(cuò)誤", 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") {
      // 來(lái)自頁(yè)面內(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
    })
},

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

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

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

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

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


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


https://www.example.com
域名



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


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


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




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

https://www.example.com	域名
/wxmini/	小程序前置規(guī)則，需要在服務(wù)器上建一個(gè)文件夾，并且把驗(yàn)證文件放在文件夾線
home.html	需要跳轉(zhuǎn)的網(wǎng)頁(yè)頁(yè)面
a=1	跳轉(zhuǎn)頁(yè)面的參數(shù)

// 對(duì)index onLoad在進(jìn)行處理
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)
    }
}

返回按鈕缺失問(wèn)題

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

最終的頁(yè)面層級(jí)

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

參考鏈接

webview文檔

小程序unionid介紹

unionid獲取方式

GPU云服務(wù)器云服務(wù)器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/52743.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

AlphaGooo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

如何申請(qǐng)免費(fèi)SSL域名證書(shū)？手把手教你不花一分錢(qián)！

閱讀 3897·2021-11-22 13:52
UCloud WebRTC 來(lái)了！支持萬(wàn)人直播的一站式實(shí)時(shí)音視頻解決方案

閱讀 3748·2019-12-27 12:20
父容器高度不定，子容器填滿父容器剩余高度

閱讀 2476·2019-08-30 15:55
NodeJs 【加強(qiáng)版】實(shí)現(xiàn)跨域WebSocket 即時(shí)通訊

閱讀 2239·2019-08-30 15:44
CSS視覺(jué)效果

閱讀 2328·2019-08-30 13:16
avalon js+css3實(shí)現(xiàn)roundabout 圖片輪播

閱讀 652·2019-08-28 18:19
窺探原理：實(shí)現(xiàn)一個(gè)簡(jiǎn)單的前端代碼打包器 Roid

閱讀 1983·2019-08-26 11:58
angularjs利用$http異步上傳Excel文件

閱讀 3530·2019-08-26 11:47

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

網(wǎng)頁(yè)程序遷移至微信小程序web-view詳解

相關(guān)文章