微信小程序web-view内嵌H5使用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支付失败

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

需要创建的php文件

2、新建WeChat项目,并创建下面目录

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

需要创建的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、主界面

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

主界面

2、调起支付时

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

成功调起支付界面

3、支付成功或失败后

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

支付成功或失败后

分享到:

您可能还会对下面的文章感兴趣: