近似過程
1，先說明壹下涉及的文件，下面會用到。
1.1 app.js:applet的app . js文件，在globalData中定義了壹個全局變量paySuccessUrl:“”，用於保存支付成功跳轉Url。
1.2 wxminiwebview.js:小程序中的web-view接口1.3 wxminipay.js:小程序的原生支付接口。
1.4 web_pay.vue:嵌入式網頁會調出支付路由組件的界面。既然我是用vue+vue-router寫的，那妳最好了解壹下vue和vue-router，記得介紹壹下微信jssdk1.3.0。只有最新版本包含applet的相應方法。可惜微信沒有提供npm包，github裏有人介紹的commonjs的微信jssdk版本只有1.2.0，只能這樣介紹了。
& lt腳本src= "。/static/jweixin-1.3.0.js " >腳本& gt
2.首先我們像官網壹樣正常嵌入壹個嵌入式網頁，url是wxmini_webview.js中data定義的變量，webview加載的網頁就是這個url。
& ltweb-view src = " { { URL } } " & gt；web-view & gt；
3.判斷嵌入網頁web_pay.vue中是否是微信環境。
window.wx.ready(function () {
isWxMini = window。_ _ wxjs _ environment = = = ' mini program '
})
4.在嵌入式網頁web_pay.vue上調用支付時，發送支付金額、支付描述、支付成功跳轉url...(妳想要的任何參數，記住encodeURIComponent)到applet的本機頁面。
if (isWxMini) {
let jump URL = encodeURIComponent(window . location)
let path = `/page/pay/pay？amount = $ { amount } & amp標題= $ { desc } & amp；jump URL = $ { jump URL } ` 0
window . wx . mini program . navigate to({
url:路徑
})
}
5.從小程序支付接口wxmini_pay.js中的嵌入式網頁獲取值，這裏方便演示。其實把這些將要顯示在界面中的值存儲在頁面的數據中更好。
onLoad:函數(選項){
console.log(選項)
//獲取網頁傳遞的值。
// TODO使用es6解構來獲取TODO值。
jumpUrl = options.jumpUrl
金額=選項.金額
title =選項
...
},
6.支付成功後，將跳轉url附帶的支付結果和當前時間保存到全局變量中。
paySuccess () {
let currentTime =新日期()。getTime()
//這是為了防止wxmini_webview.js文件中對setData的調用導致路由因為兩個URL壹致而不觸發刷新。
jump URL = options . jump URL+encodeURIComponent(`？支付結果= 1 & amp；time=${currentTime} `)
//payResult=1表示支付成功。我在這裏偷懶，直接在網址後補上？實際情況更復雜。
//為了實現支付成功返回後不刷新的加載，這裏的參數應該屬於路由web_pay.vue，而不是window.location.search
//所以需要判斷路由錨#的位置，是否已經有路由參數(如果不使用vue-router的歷史模式，應該和window.location壹樣)。
Getapp()。global data . paysuccessurl = jump url//將跳轉URL保存到applet全局變量中。
Wx.navigateBack() //返回會議的最後壹頁，即承載網頁的容器頁面wxmini_pay.js。
}
7.返回applet wxmini_webview.js會觸發onshow，加載界面，不刷新。
onShow: function () {
console.log('on show ')
let paySuccessUrl = getApp()。
Getapp()。global data . paysuccessurl = " "//清除支付成功url，防止某些操作觸發onShow事件。
if (paySuccessUrl) {
let URL = decodeURIComponent(paySuccessUrl)
this.setData({
//這裏，在第6步，我們將解釋&；Time=${currentTime}，只是因為妳第壹次成功回到這裏就不加這個了。
//這個url和妳成功回到這裏進行第二次支付的時候是壹樣的，會導致第二次支付開始，這裏的setData方法無效。
全球資源定位器(Uniform Resource Locator)
})
}
},
8.步驟7中的setData將觸發webview中的網頁加載。因為我用的是vue-router，而且兩個URL只是在路由參數查詢上不同，所以不會觸發界面刷新，也不會觸發路由的重載，只會觸發beforeRouteUpdate的方法。比如付款前的界面是https://host/#/pay now，付款成功後跳轉到https:/。支付結果= 1 & amp；時間= 123456 #/支付。此時不會刷新界面，也不會重新加載支付路線。而是會觸發beforeRouteUpdate (to，from，next)。您所要做的就是在這裏的接口中解析to.query中的數據，然後做您想做的事情。
beforeRouteUpdate(收件人，發件人，下壹個){
Console.log('路由變了，很可能是小程序的付費被成功回調')
let pay result = to . query . pay result
If (payResult) {// applet支付成功。
if (payResult === '1') {
Console.log('支付成功，下班打卡')
}
}
下壹個()
},