微信小程序支付前端需要注意哪些（微信小程序web-view内嵌H5使用PHP完成支付功能）
微信小程序支付前端需要注意哪些（微信小程序web-view内嵌H5使用PHP完成支付功能）2、新建WeChat项目，并创建下面目录需要创建的php文件3、小程序获取数据，调起支付界面完成支付，并返回支付是否成功 4、后台根据返回的数据判断支付是否成功，然后进行相关业务处理 1、创建PHP文件，index.php主界面，success.php支付成功，error.php支付失败
每天进步一点点...
在开发过程中，遇到使用微信小程序web-view内嵌H5完成支付的业务，我们该怎么去实现？
一、设计思路1、使用PHP请求接口获取wx_data_package支付包数据
2、使用jweixin.js把wx_data_package数据传到小程序
3、小程序获取数据，调起支付界面完成支付，并返回支付是否成功
4、后台根据返回的数据判断支付是否成功，然后进行相关业务处理
二、前期准备1、创建PHP文件，index.php主界面，success.php支付成功，error.php支付失败
需要创建的php文件
2、新建WeChat项目，并创建下面目录
需要创建的WeChat目录
三、实现代码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>支付测试</title>
<script type="text/javascript" src="https://res.wx.qq.com/open/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是请求接口返回的支付数据包
$wx_data_package = '{"package":"prepay_id=wx164122404495953ff5f88672224070000" "appid":"wxa5dasdfasdf2231" "sign":"m8i6LKiu adJJouVx6XasdaEOr K5FIuV/luTEgrqE APuO/oEVK6Fadfn4NiJMqGasdfhlgdj2FDasdf9oHSAnmHaPKiZgK37oCVe 3HyGGirDWZLOSdpI4hVvasdLpPBbmbvM6Xvg2TLwyO41Fg3fjIEasdrhkxCJss2B5uXa3BrRyL3LEC01CbJfC05uDwRRC a8erHzRjoscB Kjepnhcfp/PVO9v N6b5oKmTUCdhaF85n3U2PSFS7yzp6473oEAPi8jNiwM/dtZZvo y7z4urWoebeFfO/5l9Bx2EWaRstQqEXgh lLsVxNiccHal3nfDcqNkw==" "signType":"RSA" "noncestr":"45bd4991f99048badew9528dqfca9b7" "timestamp":"1613488960"}';
?>
<div class="btn" onclick="pay()">支付</div>
<script>
// 把wx_data_package传到小程序
function pay() {
const url = `../wePay/wePay?wxPageData=<?php echo urlencode($wx_data_package); ?>`
wx.miniProgram.navigateTo({
url: url
})
}
</script>
</body>
</html>
2、success.php和error.php两文件随便添加点东西进去做一个区别就可以了
3、webview.wxml
// pages/webview/webview.wxml
<web-view src="{{src}}"></web-view>
4、webview.js
// pages/webview/webview.js
Page({
/**
* 页面的初始数据
*/
data: {
src: "http://php.com/"
}
/**
* 生命周期函数--监听页面加载
*/
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'
})
}
})
}
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let wxPageData = JSON.parse(decodeURIComponent(options.wxPageData))
console.log(wxPageData)
this.payment(wxPageData)
}
}) 四、实现效果
1、主界面
主界面
2、调起支付时
成功调起支付界面
3、支付成功或失败后
支付成功或失败后
