在开发过程中，遇到使用微信小程序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、支付成功或失败后
支付成功或失败后