您當前位置>首頁 » 新聞資訊 » 小(xiǎo)程序相(xiàng)關 >
微(wēi)信小(xiǎo)程序web-view內(nèi)₽↕嵌H5使用(yòng)PHP完成支付功能(néng)
發表時(shí)間(jiān)：2021-2-20
發布人(rén)：葵宇科(kē)技(jì)
浏覽次數(shù)：117
在開(kāi)發過程中，遇到(dào)使用(yòng)微(wēi¥₩)信小(xiǎo)程序web-view內(nèi)嵌H5完成支付的(de)業(yè÷←)務，我們該怎麽去(qù)實現(xiàn)？
一(yī)、設計(jì)思路(lù)
1、使用(yòng)PHP請(qǐng)求接口獲取wx_data_packag✘≠α₽e支付包數(shù)據
2、使用(yòng)jweixin.js把wx_data_package數(shù)據傳★π到(dào)小(xiǎo)程序
3、小(xiǎo)程序獲取數(shù)據，調起支付界面完成支付，并返₩ε回支付是(shì)否成功
4、後台根據返回的(de)數(shù)據判斷支付是(shì)否成功，然後€Ω≠α進行(xíng)相(xiàng)關業(yè)務處理(lǐ)
二、前期準備
1、創建PHP文(wén)件(jiàn)，index.php主界面，success. >¶php支付成功，error.php支付失敗
2、新建WeChat項目，并創建下(xià)面目錄
三、實現(xiàn)代碼
1、index.php
<!DOCTYPE html>
<html lang=σβ"en">
<head>
<meta charset=>≥×"UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>支付測試</titl¥•¶€e>
<script type="text/javascript" src=http://www.wxapp-union.com/"static/js/jweixin-1.3.2.js"></script>
<style>
<γ .btn {
padding: 10px 20px;
text-align: center;
>♠ background: #647357;
color: #fff;
}
</style>
</head>
♦•€
<body>
<?php
// 假設wx_data_package是(shì)請(qǐng)求接口返回的(↑§de)支付數(shù)據包
$wx_data_package = '{"package":"prepay_id=wx1641224044 λ↕95953ff5f88672224070000","appid":"wxa5dasdfa♠©sdf2231","sign":"m8i6LKiu+a☆δ'&dJJouVx6XasdaEOr+K5FIuV/luTEgrqE+APuO/oE✘₩★VK6Fadfn4NiJMqGasdfhlgdj2FDasdf9oHSAnmHaPKiZg©≈₽&K37oCVe+3HyGGirDWZLOSdpI4hVvasdLpPB±±¥÷bmbvM6Xvg2TLwyO41Fg3fjIEasdrhkxCJss2B5uXa3BrRyL3¥←LEC01CbJfC05uDwRRC+a8erHzRjoscB+Kjepnhcfp/PVO™•9v+N6b5oKmTUCdhaF85n3U2PSFS7yzp6473oEAPi8jNiwM/dt±∞"ZZvo+y7z4urWoebeFfO/5l9Bx2EWaRst÷♥QqEXgh+lLsVxNiccHal3nfDcqNkw==","signType":"Rγ Ω∏SA","noncestr":"45bd4991f99048badew95₹↔£∏28dqfca9b7","timestamp":"1613488960"}'β≠♦×;
?>
<div class="btn" onclick="pay()">支付</div>
<script>
// 把wx_data_package傳到(dào)小(xiǎo)程序
function pay() {
const url = `../wePay/wePay?wxPageDε÷ata=http://www.wxapp-union.com/<?php echo urlencode($wx_data_package); ?>`
wx.miniProgram.navigateT™∞o({
url: u≠♥rl
})
}
<÷ ;/script>
</body>
</html>
2、success.php和(hé)error.php兩文(wén )件(jiàn)随便添加點東(dōng)西(xī)進去(qù)做(zu'®ò)一(yī)個(gè)區(qū)别就(jiù)可(kě)以了(le)
3、webview.wxml
// pages/webview/webview.wε∑$xml
<web-view src="{{src}}"></web-view>
4、webview.js
// pages/webview/webview.js
Page({
/**
* 頁面的(de)初始數(shù)據
♥≥ */
data: {
src: "http://php.com/"
},
/**
* 生(shēng)命周期函數(shù)--監聽(tīng)頁面加載
♣™∑λ
*/
onLoad: function (options) {
if (options.payFlag !== undefined)
if (options.payFlag == "true") {
this.setData({
src: "http://php.com/success.php<©"
})
} else {
this.setData({
src: "http://php.com/error.php"★ ♦
})
}
},
})
5、wePay.js
// pages/wePay/wePay.js
Page({
data: {
},
payment(data) {
wx.requestPayment({
'timeStamp': data.timestamp,
'nonceStr': data.noncestr,
'package': data.package,
'signType': data.signType,
'paySign': data.sign,
'success': function (res) {
wx.navigateTo({
url: '../webview/webview?payFlag=true',
})
},
'fail': function (res) {
wx.navigateTo({
url: '../webview/webview?payFlag=false',
})
}
})
},
/**
* 生(shēng)命周期函數(shù)--監聽(tīng)頁面加載
•↕σ
*/
onLoad: function (options) {
let wxPageData = http://www.wxapp-union.com/γ☆JSON.parse(decodeURIComponent(options.wxPageData))
console.log(wxPageData)
this.payment(wxPageData)
},
})
四、實現(xiàn)效果
1、主界面
2、調起支付時(shí)
3、支付成功或失敗後
