上(shàng)個(gè)月(yuè)，小(xiǎo)程序開(kāi)放(fàng)了(l<δ©e)新功能(néng)，支持內(nèi)嵌網頁，所以我就(jiù)開(kāi)始了(le)小(x↑♣σiǎo)程序內(nèi)嵌網頁之路(lù)，之前我隻是(shì)個(gè)小(₹γxiǎo)安卓。

內(nèi)嵌網頁中可(kě)使用(yòng)JSSDK 1.3♠✔☆Ω.0提供的(de)接口，可(kě)坑就(jiù)來(lái)了(le)，居然不(bù∑✘≥)支持支付接口的(de)調用(yòng)，經過一(yī)番研究，總算(su₩♣★♦àn)打通(tōng)了(le)兩邊的(de)交互

大(dà)概流程

1、先說(shuō)明(míng)涉及到(dào)的(de)文(wén λ✔)件(jiàn)，下(xià)面會(huì)用(yòng)到(dào)

1.1 app.js:小(xiǎo)程序的(de)ap​'p.js文(wén)件(jiàn),在globalData裡(lǐ)定義一(yī)個(gè)全局∞÷♦變量paySuccessUrl: '',用(yòng)來(lái)保存支付成功¶±跳(tiào)轉url
1.2 wxminiwebview.js:小(xiǎo)程序中放(fàng)web-view的(de)界面 1.3  ₹ wxminipay.js:小(xiǎo)程序原生(shēng)支付界面
1.4 web_pay.vue:內(nèi)嵌網頁會(huì)調起支付的(de↓& ≠)路(lù)由組件(jiàn)界面，由于我是(shì)用(yòng)vue+vue-<&'router寫的(de)，所以你(nǐ)最好(hǎo)了(le)解≥×≈→下(xià)vue和(hé)vue-router，記得(de)引入微(wēi♦λφε)信jssdk1.3.0,最新版本才包含小(xiǎo)程序相(xiàng)對(duì)↑‌±應方法。很(hěn)遺憾，微(wēi)信并沒提供npm包，github有(yǒu)人(rén)提供∑≠的(de)commonjs引入方式的(de)微(wēi)信jssdk版本也ε₩(yě)隻有(yǒu)1.2.0,所以就(jiù)隻能(néng)這(z™"π±hè)樣引入了(le)

<script src="./static/jweixin-1.3.0.js">script>

2、首先我們像官網那(nà)樣正常嵌入一(yī)個(gè)內(nèi)嵌網頁,url'"β是(shì)wxmini_webview.js中data×←  中定義的(de)變量，webview加載的(de)就(jiù)是(shì)網頁±∏π↓就(jiù)是(shì)這(zhè)個(gè)url

<web-view src="{{url}}">web-view>

3、在內(nèi)嵌網頁web_pay.vue裡(lǐ)判斷當前是(shì)否是±&Ω(shì)微(wēi)信環境

window.wx.ready(function () {
    isWxMini = window.__wxjs_environment === 'miniprogram'
})

4、在內(nèi)嵌網頁web_pay.vue調用(yòng)支付時(shí)把支付金(jī✔∏γn)額，支付說(shuō)明(míng)，支付成功跳(tiào)轉url..♦↔÷.(任何你(nǐ)想要(yào)的(de)參數(shù)，記得(de)encodeURICom‌×✔αponent)，傳給小(xiǎo)程序原生(shēng)頁面

if (isWxMini) {
    let jumpUrl = encodeURIComponent(window.location)
    let path = `/page/pay/pay?amount=${amount}&title=${desc}&jumpUrl=${jumpUrl}`
    window.wx.miniProgram.navigateTo({
        url: path
    })
 }

5、在小(xiǎo)程序支付界面wxmini_pay.j ×s裡(lǐ)獲取到(dào)內(nèi)嵌網頁傳過來(lá←↓∞i)的(de)值,這(zhè)裡(lǐ)演示方便,實際上(shàng)是π ÷(shì)在page的(de)data裡(lǐ)存儲這(zhè)些(xiē)會(huì)顯示在界 £©面的(de)值好(hǎo)些(xiē)

onLoad: function (options) {
    console.log(options)
    // 獲取網頁傳過來(lái)的(de)值
    // TODO 用(yòng)es6解構來(lái)獲取值TO↕↑DO
    jumpUrl = options.jumpUrl
    amount = options.amount
    title = options.title
    ...
  },

6、支付成功後,把跳(tiào)轉url附帶支付結果及當前時(shí)間(jiān)保存到(dσφ>'ào)全局變量

paySuccess () {
    let currentTime = new Date().getTime()
    //這(zhè)是(shì)為(wèi)了(le)防止wxmini_webvie©™≈ w.js文(wén)件(jiàn)裡(lǐ)調用(yòng)setData由于前後兩個✘¶‍$(gè)url一(yī)緻導緻路(lù)由不(bù)觸發刷新的•®≥£(de)bug
    jumpUrl = options.jumpUrl+encodeURIComponent(`?payResult=1&time=${currentTime}`) 
    //payResult=1表示支付成功，這(zhè)裡(lǐ)我偷懶了(le)直接在url後面'♦≥π補?,實際情況比較複雜(zá)
    //為(wèi)了(le)實現(xiàn)支付成功返回後♣>的(de)無刷新加載,這(zhè)裡(lǐ)的(de)參數(shù)應該是(shì)屬于路☆§(lù)由web_pay.vue的(de),而不(bù)是(shì)屬于windλ≥≤σow.location.search的(de)
    //所以要(yào)判斷路(lù)由錨點#的(de)位置和(hé)是(shì)否已經有(•∞yǒu)路(lù)由參數(shù)（如(rú)果是(shì)™₩vue-router的(de)history模式我沒用(yòng)過,應<"€♥該和(hé)window.location一(yī)樣吧(ba)）
    getApp().globalData.paySuccessUrl=jumpUrl //保存跳(tiào)轉url到(dào)小(xiǎo)程序全局變量裡(lǐ)
    wx.navigateBack() //返回會(huì)上(shàng)個(gè)頁面，也(yě)就(jiù)是(✘ shì)承載網頁的(de)容器(qì)頁面wxmini‍± ₩_pay.js
}

7、回到(dào)小(xiǎo)程序wxmini_webview.js,會(huì→ε<)觸發onshow,在裡(lǐ)面進行(xíng)界面無刷新加載

onShow: function () {
    console.log('on show')
    let paySuccessUrl = getApp().globalData.payS✘'uccessUrl
    getApp().globalData.paySuccα ≥®essUrl="" //清空(kōng)支付成功url，防止一(yī)些(xiē)操作(zuò)觸發onShβ¶♥ ow事(shì)件(jiàn)
    if (paySuccessUrl) {
      let url = decodeURIComponent(paySuccessUrl)
      this.setData({
      //這(zhè)裡(lǐ)在次說(shuō)明(míng)↕★下(xià)步驟6中的(de)&time=${currentTime},就(jiù)是(Ω<shì)因為(wèi)不(bù)加這(zhè)個(gè)當你(nǐ)第一(y‌∏ī)次支付成功回來(lái)這(zhè)裡(lǐ)
      //這(zhè)個(gè)url跟你(nǐ)第二次支付成功回來(lái)這(zhè)裡(lǐ)是≠π₹(shì)一(yī)樣的(de)，會(huì)導緻第二次支付開(kāi)始，這(zhγ​≈∑è)裡(lǐ)的(de)setData方法失效
        url 
      })
    }
  },

8、步驟7中的(de)setData會(huì)觸發we≤ ©∑bview中的(de)網頁加載，由于我采用(yòng)的(de)是(shì)vue-router, ≠&★而且前後兩個(gè)url隻有(yǒu)路(lù)由的(de)參數(shù)query不(bù♦↕)一(yī)樣，所以并不(bù)會(huì)觸發界面刷新，也(yě)不(bù)會(≤&÷♥huì)觸發路(lù)由的(de)重新加載，而是(shì)隻會(huì)觸發befo♦§✔βreRouteUpdate 這(zhè)個(gè)方法，←↔σπ舉個(gè)例子(zǐ)，現(xiàn)在支付前界面是(shì)httε₹ps://host/#/pay,然後支付成功後跳(tiào)轉https:/∞↑→/host/?
payResult=1&time=123456#/pay,此時(shí)界面φ"≤✘不(bù)會(huì)刷新，pay路(lù)由也(yě)不(bù'<γ)會(huì)重新加載，而是(shì)觸發beforeR∑ outeUpdate (to, from, next),你(nǐ)要(yào)做(zuò)的(d‍β ✔e)隻是(shì)在這(zhè)裡(lǐ)界面解析to.query裡©λ(lǐ)的(de)數(shù)據，然後該幹嘛幹嘛

beforeRouteUpdate (to, from, next) {
      console.log('路(lù)由發生(shēng)改變，很(hěn)有(yǒu)可(kě)能(néng)是(sλ​<hì)小(xiǎo)程序的(de)支付成功回調')
      let payResult = to.query.payResult
      if (payResult) { // 小(xiǎo)程序支付成功
        if (payResult === '1') {
          console.log('支付成功,下(xià)班打卡走人(rén)')
        }
      }
      next()
    },

這(zhè)麽晚了(le)，先睡(shuì)了(le)，如(rú)果δ​↕♥有(yǒu)空(kōng)我再整理(lǐ)個(gè)☆∏demo，如(rú)果文(wén)章(zhāng)對(duì)你(nǐ)有(yǒu)幫助麻煩點≤$ ↔個(gè)贊