小程序内嵌h5页面，小程序webview网页等可以实现微信支付(小程序接入h5)。

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

小程序支持webview后，我们开发的很多h5页面都可以直接在小程序中使用，比如我们开发的微信商城、文章详情页、商品详情页，一套可以在很多地方开发使用。今天就来说说吧。在小程序的webview中实现微信支付功能。因为微信不允许微信支付在小程序的webview中直接转账。所以这节课会涉及到小程序和webview的交互。

老规矩，先看效果。因为这里涉及的东西比较多，gif也太多，无法上传，所以录了一段视频。https://v.qq.com/x/page/t0913iprnay.html

首先说一下实现原理。实现原理是我们可以在webview的h5页面下单，然后点击支付按钮。当我们点击支付按钮时，我们将跳转到applet页面，并将订单编号和订单总金额传输到applet。然后小程序会用订单号和订单金额调整微信支付，实现支付。支付成功或失败，都会有回拨。然后我们将相应的回调传递给webview，以刷新webview中的订单和支付状态。

首先，定义webview来显示h5页面。webview的用法我就不解释了。公文里写的很清楚，很好用。https://developers . weixin . QQ . com/mini program/dev/component/web -view . html

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

第二，定义h5页面。我在这里启动了一个本地服务器来显示一个简单的h5页面。

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

这里需要注意的一点是，因为我们是本地链接，所以需要在开发者工具中检查这一项。

第三，看一看h5页面代码

四、小程序支付页面，我们来看看我们的小程序支付页面

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

在这里支付我们实用小程序云开发实现的支付。核心代码只有10行。由于支付不是本节的重点，这里就不详细解释了。有兴趣的同学可以看看我写的关于小程序支付的文章和我录的视频:https://www.jianshu.com/p/2b391df055a9小程序支付视频:https://edu.csdn.net/course/play/25701/310742,请大家贴出小程序接收参数和支付的完整代码。

page({//H5 parameter onload:function(options){ console . log(" Parameters from webview "，options)//string to object let pay data = JSON . parse(options . paydatastr)console . log(" orderId ；，pay data . orderid)let that = this；wx . cloud . call function({ name: ；支付 ，data: { orderId: payData.orderId，money: payData.money }，success(RES){ console . log( ；Get“成功，RES)that . gopay(RES . result)；}，fail(err){ console . log( ；Get failed "，err)}}，//微信支付GoPay(pay data){ wx . request payment({ timest:pay data . timest，non centr:pay data . non centr，package: paydata.package，sign type: # 39；MD5 # 39，paySign: payData.paySign，success(RES){ console . log( ；支付成功”，res) //您可以在这里支付成功后跳转到webview页面，将支付成功状态发送回wx . navigate to({ URL: # 39；../webview/webview？payOk = true # 39，}) }，fail(RES){ console . log( ；支付失败”，RES)}}})代码里的注释很清楚。这里需要告诉h5我们支付成功，并通知h5在我们支付成功后刷新订单或支付状态。至此，我们已经完全实现了小程序webview显示h5页面，实现了h5与小程序的交互，实现了小程序webview的支付功能。不是很简单吗？以上是如何通过小程序内联h5页面、小程序webview网页等方式实现微信支付的细节。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：小程序内嵌h5页面，小程序webview网页等可以实现微信支付(小程序接入h5)。 https://zhujicankao.com/81655.html