小程序内联h5页面，小程序webview内网页等等方法实现微信支付（h5调用微信小程序登录）

小程序内联h5页面，小程序webview内网页等等方法实现微信支付（h5调用微信小程序登录）

小程序开发教程栏目介绍多种方法实现微信支付功能

小程序支持webview以后，我们开发的好多h5页面，就可以直接在小程序里使用了，比如我们开发的微信商城，文章详情页，商品详情页，就可以开发一套，多处使用了。我们今天来讲一讲。在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信支付。所以我们这节课就要涉及到小程序和webview的交互了。

老规矩先看效果。

因为这里涉及的东西比较多，录gif太多，没法上传，我就录制了一段视频出来。https://v.qq.com/x/page/t0913iprnay.html

原理

一，定义webview显示h5页面

关于webview的使用，我就不做讲解了，官方文档里写的很清楚，用起来也很简单。https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

webview很简单，就是用一个webview组件，显示我们的网页。

二，定义h5页面

我这里启动一个本地服务器，用来展示一个简单的h5页面。

上图是我在浏览器里显示的效果。接下来我们在小程序的webview里显示这个页面，也很简单，只需要把我们的src定义为我们的本地网页链接就可以了。

这里有一点需要注意

因为我们是本地链接，我们需要到开发者工具里把这一项给勾选。

三，来看下h5页面代码

关键点说一下

1， 必须引入jweixin，才可以实现h5跳转小程序。

2，跳转到小程序页面的方法

const url = `../wePay/wePay?payDataStr=${payDataStr}`;wx.miniProgram.navigateTo({ url: url });-

这里要和你小程序的页面保持一致。payDataStr是我们携带的参数

四，小程序支付页

来看下我们的小程序支付页

小程序支付页功能很简单，就是来接收我们h5传过订单号和订单金额。然后去调起微信支付，实现支付。支付成功和支付失败都有对应的回调。

支付我们这里实用的小程序云开发来实现的支付，核心代码只有10行。由于支付不是本节的重点，所以这里不做具体讲解。感兴趣的同学可以去看我写的文章和我录的视频小程序支付文章：https://jianshu.com/p/2b391df055a9小程序支付视频：https://edu.csdn-/course/play/25701/310742下面把小程序接收参数和支付的完整代码贴出来给大家

Page({ //h5传过来的参数 onLoad: function(options) { console.log("webview传过来的参数", options) //字符串转对象 let payData = JSON.parse(options.payDataStr) console.log("orderId", payData.orderId) let that = this; wx.cloud.callFunction({ name: "pay", data: { orderId: payData.orderId, money: payData.money }, success(res) { console.log("获取成功", res) that.goPay(res.result); }, fail(err) { console.log("获取失败", err) } }) }, //微信支付 goPay(payData) { wx.requestPayment({ timeStamp: payData.timeStamp, nonceStr: payData.nonceStr, package: payData.package, signType: 'MD5', paySign: payData.paySign, success(res) { console.log("支付成功", res) //你可以在这里支付成功以后，再跳会webview页，并把支付成功状态传回去 wx.navigateTo({ url: '../webview/webview?payOk=true', }) }, fail(res) { console.log("支付失败", res) } }) }})-

代码里注释很清楚，这里有一点，就是我们支付成功后，需要告诉h5我们支付成功了，通知h5去刷新订单或者支付状态。到这里我们就完整的实现了小程序webview展示h5页面，并且做到了h5和小程序的交互，实现了小程序webview的支付功能。是不是很简单呢。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。