广场
实验室
Sign in
微信小程序web-view内嵌H5使用PHP完成支付功能
糊涂
类别:
微信小程序
最后修改于:
2021年07月22日 17:17:17
浏览:
591
在开发过程中,遇到使用微信小程序web-view内嵌H5完成支付的业务,我们该怎么去实现? ### 一、设计思路 1、使用PHP请求接口获取wx_data_package支付包数据 2、使用jweixin.js把wx_data_package数据传到小程序 3、小程序获取数据,调起支付界面完成支付,并返回支付是否成功 4、后台根据返回的数据判断支付是否成功,然后进行相关业务处理 ### 二、前期准备 1、创建PHP文件,index.php主界面,success.php支付成功,error.php支付失败  2、新建WeChat项目,并创建下面目录  ### 三、实现代码 1、index.php ```php
支付测试
支付
``` 2、success.php和error.php两文件随便添加点东西进去做一个区别就可以了 3、webview.wxml ```html // pages/webview/webview.wxml
``` 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、主界面  2、调起支付时  3、支付成功或失败后 
标签:
WeChat
PHP
版权声明:本文为博主原创文章,遵循
CC 4.0 BY-SA
版权协议,转载请附上原文出处链接和本声明!
本文链接:https://lpya.cn/detail/25
评论列表
{{item.user.e_name}}
回复
{{itemTwo.parentuser.e_name}}@{{itemTwo.subuser.e_name}}
回复
检测你正在使用手机端,为了更好的用户体验,请跳转手机版本。
确 定