在原來的H5支付頁面中加個判斷

前提需要添加這個：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>var isWxMini = window.__wxjs_environment === 'miniprogram' // 判斷場景是否小程序 if (isWxMini) { // 把要用到的參數傳到小程序中進行支付 wxJson是由后臺協商好返回的數據格式，該代碼僅供參考，不能實際使用const wxJson = {amount: 100 // 訂單金額，如還需其他參數可增加};//1.跳轉頁面wx.miniProgram.navigateTo({url: "/pages/pay/pay?param=" + wxJson // 微信小程序調用支付的頁面})//2.返回上一級頁面//直接在這請求接口 獲取支付的信息 wx.miniProgram.navigateBack({delta: 1})wx.miniProgram.postMessage({ data:res }) //返回參數 } else {// 這里放原理的支付邏輯 }

接下來在小程序中添加一個頁面pay，空白頁即可

//1.跳轉onLoad: function (options) {var amount= options.amount;wx.request({url: '/miniProgram/getPayParam?amount=' + amount, // 后臺接口，返回調起微信支付所需參數method: 'get',success: function(res) {　　　　　　wx.requestPayment({'timeStamp': res.data.data.timeStamp,'nonceStr': res.data.data.nonceStr,'package': res.data.data.package,'signType': 'MD5','paySign': res.data.data.paySign,'success': function (res) {//定義小程序頁面集合var pages = getCurrentPages();//當前頁面 (wxpay page)var currPage = pages[pages.length - 1];//上一個頁面 （index page）var prevPage = pages[pages.length - 2];//通過page.setData方法使index的webview 重新加載url 有點類似于后臺刷新頁面//此處有點類似小程序通過加載URL的方式回調通知后端 該訂單支付成功。后端邏輯不做贅述。wx.redirectTo({ url: '/pages/index/index' });//小程序主動返回到上一個頁面。即從wxpay page到index page。此時index page的webview已經重新加載了url 了//微信小程序的page 也有棧的概念navigateBack 相當于頁面出棧的操作wx.navigateBack();},'fail': function (res) {console.log("支付失敗");console.log(res);var pages = getCurrentPages();var currPage = pages[pages.length - 1];var prevPage = pages[pages.length - 2];console.log("準備修改數據");wx.redirectTo({ url: '/pages/index/index' });console.log("準備結束頁面")// wx.navigateBack();}})}}) } //2.返回上一級<web-view src="{{url}}" bindmessage="onLoadMessage" bindload="onWebLoad" binderror="onWebError"></web-view>onLoadMessage(e) {console.log('onLoadMessage')console.log(e)let paylist = e.detail.datafor (let str of paylist) {console.log(str,'str')let item = JSON.parse(str)console.log(item,'item')app.payOrder(item.pay, function () {}, function () {})}},

總結

以上是生活随笔為你收集整理的微信小程序中web-view调用微信支付的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。