小程序内嵌h5页面，小程序webview页面等方法实现微信支付。

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

小程序支持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页面代码。html & gt& ltmeta & gt& lttitle & gt该小程序嵌入了WebView

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

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

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

page({//parameter onload by H5传递:function(options){ console . log(" Parameters by webview "，options)//String to object let pay data = JSON . parse(options . pay data str)console . log(" orderId & quot；，pay data . orderid)let that = this；wx . cloud . call function({ name:& quot；支付& quot，data: { orderId: payData.orderId，money: payData.money }，success(RES){ console . log(& quot；成功获取”，RES)that . gopay(RES . result)；}，fail(err){ console . log(& quot；未能获取"，err)})，//微信支付gopay(pay data){ wx . request payment({ timestamp:pay data . timestamp，non centr:pay data . non centr，package: payData.package，signType: 'MD5 '，paySign: payData.paySign，success(RES){ console . log(& quot；支付成功"，res) //您可以在支付成功后跳转到这里的webview页面，将支付成功状态发送回wx.navigateto ({URL:'../webview/webview？payOk=true '，}) }，fail(RES){ console . log(& quot；支付失败”，res)}})代码里的注释很清楚。这里有一点:我们支付成功后，需要告诉h5我们支付成功，通知h5刷新订单或支付状态。至此，我们已经完全实现了小程序webview显示h5页面，实现了h5与小程序的交互，实现了小程序webview的支付功能。是不是很简单？

微信app下载微信是一款支持通过手机网络发送语音消息、视频、图片、文字的手机通讯软件。微信可以单独聊天，也可以群聊，根据地理位置找到附近的人，带给你全新的移动通信体验。快来拯救下载体验给有需要的朋友吧！

下载

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

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

本文由主机参考刊发，转载请注明：小程序内嵌h5页面，小程序webview页面等方法实现微信支付。 https://zhujicankao.com/120523.html