微信小程序web-view内嵌H5使用PHP完成支付功能

微信小程序web-view内嵌
摘要:每天进步一点点... 在开发过程中,遇到使用微信小程序web-view内嵌H5完成支付的业务,我们该怎么去实现? 一、设计思路 1、使用PHP请求接口获取wx_data_package支付包数据 2、使用jweixin.js把wx_data_package数据传到小程序 3、小程序获取数据,调起支付界面完成支付,并返回支付是否成功 4、后台根据返回的数据判断支付是否成功,然后进行相关业务处理 二、前期准备 1、创建PHP文件,index.php主界面,success.php支付成功,error.php支付失败 ![1.png](https://api.lpya.cn/HtBlog/public/upload/article/20210217/c6dc3ee0bf5467b66a6bbef57aeb4960.png) 2、新建WeChat项目,并创建下面目录 ![2.png](https://api.lpya.cn/HtBlog/public/upload/article/20210217/4d6f0598d3db430791def8e6b264fe15.png) 三、实现代码 1、index.php ```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 ```html // pages/webview/webview.wxml <web-view src="{{src}}"></web-view> ``` 4、webview.js ```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 ```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、主界面 ![3.png](https://api.lpya.cn/HtBlog/public/upload/article/20210217/36450da155863f8daeaf67c907cd801c.png) 2、调起支付时 ![4.png](https://api.lpya.cn/HtBlog/public/upload/article/20210217/2995a94f7ef594b6217b63cac3d4db57.png) 3、支付成功或失败后 ![5.png](https://api.lpya.cn/HtBlog/public/upload/article/20210217/8893a829c6e264be797b2d3a4759f922.png)
网站信息
博主: 糊涂
Github: Github
联系邮箱:1048672466@qq.com
在线人数: 0
文章数量: 10
访问总量: 3562