目前的一個小程序項目需要把客戶之前的h5頁面嵌入到現(xiàn)在的小程序中，并且之前的支付功能要正常。小程序提供了webview開放能力供我們使用，但是不允許在webview直接調(diào)起微信支付。因此只能另辟蹊徑。我們今天來講一講。在小程序的webview里實現(xiàn)微信支付功能。
在webview中不能支付，那只能把webview嵌入h5頁面的支付挪到小程序中，也就是把支付時的參數(shù)傳給小程序，小程序調(diào)起原生支付，這里面有兩種情況，一種是同一主體的，另外一種是非同主體。
1.同主體
適用場景：同一主體下H5頁面
前置條件：商戶號已和小程序綁定
流程：H5內(nèi)獲取支付必須參數(shù)，傳遞給小程序，小程序內(nèi)調(diào)用支付
2.非同一主體
適用場景：第三方商品
前置條件：商戶號已和小程序綁定
原理：由于第三方商品是內(nèi)嵌第三方頁面，需要傳遞當(dāng)前小程序appid，結(jié)合第三方商戶號等信息，調(diào)用微信統(tǒng)一下單接口，返回支付必須參數(shù)。小程序內(nèi)發(fā)起支付。
接下來就是代碼實現(xiàn)，webview中src中配置網(wǎng)頁鏈接，參數(shù)的話，通過get方式傳遞
<web-view src="xxx.com?name='zhangsan'"></web-view>
h5頁面可以直接在url中獲取到，這里就不過多解釋。拿到參數(shù)后可以處理其他邏輯，重點（需要后端配合），生成的支付參數(shù)要用小程序的方式，參數(shù)格式如下
timeStamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',
拿到參數(shù)后，只需要再重新打開小程序頁面即可，打開方式
[圖片上傳失敗...(image-f4607d-1652854761337)]
let url = "../payPage/index?payParam="encodeURIComponent(JSON.stringify(payParam));
wx.miniProgram.navigateTo({
url: url
});
保險一點，我們用 encodeURIComponent 函數(shù)編碼，通過這種方式，可以打開小程序，只需要在小程序?qū)?yīng)頁面中，接收參數(shù)，調(diào)用支付即可。
注意：記得在小程序頁面用 decodeURIComponent 解碼
非同一主體流程一樣，只不過在用webview的時候，把當(dāng)前小程序的appid一同傳過去，生成的支付參數(shù)要用傳遞過去的appid生成，這樣才能在當(dāng)前小程序支付。其他的也不多說，這都是一步一步調(diào)通并上線的項目，如果有不懂的可以留言。
獲取更多關(guān)于web前端的知識，請關(guān)注【青年碼農(nóng)】
