微信小程序webview组件交互 内嵌h5页面和网页实现微信支付实现解析

前言

小程序支持webview后，我们开发的很多h5页面都可以直接在小程序中使用，比如我们开发的微信商城、文章详情页、产品详情页。今天就来说说吧。在小程序的webview中实现微信支付功能。因为微信不允许微信支付从小程序的webview直接转账。因此，本课将涉及applet和webview之间的交互。

和往常一样，先看效果。

因为这里涉及的东西很多，记录的gif太多，我无法上传，所以我录了一段视频。

https://v.qq.com/x/page/t0913iprnay.html

原则

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

首先，定义webview来显示h5页面

我不会解释webview的用途。公文上写的很清楚，很好用。

https://developers . weixin . QQ.com/mini program/dev/component/web-view . html

Webview非常简单，即使用webview组件来显示我们的网页。

其次，定义h5页面

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

上图是我在浏览器中显示的效果。

接下来，我们在小程序的webview中显示这个页面，这也非常简单。我们只需要将我们的src定义为我们的本地网页链接。

这里有一点需要注意

因为我们是本地链接，我们需要在开发工具中检查这个项目。

第三，看看h5页面代码

！doctype html lang=' en ' head meta charset=' utf-8 ' title applet嵌入web view/title style . BTN { font-size : 70px；颜色：红色；}/style/headsdyh1我是webview中的h5页面/h1a id=' desc ' class=' BTN ' onclick=' jumppay()'点击支付/JavaScript type=' text/JavaScript ' src=' http3360https://res.wx.qq.com/open/js/jweixin-1 . 3 . 2 . js '/script script console . log(location . href)；让PayOk=GetqueryVariable(' PayOk ')；console.log('payOk '，PayOk) if(payOk){//付款成功document.getelementbyid ('desc ')。inner text=' support success ' document . getelementbyid(' desc ')。style . color=' green ' } Else { document . getelementbyid(' desc ')。innertext='点击支付' }//get参数函数get查询变量(variable){ var query=window . location . search . URL中携带的substring(1)；var vars=query . split(')；for(var I=0；i vars.lengthi ) { var pair=vars[i]。split('=')；if(对[0]==变量){返回对[1]；} } return(false)；}函数jumpPay() {让orderId=date . now()；//这里使用当前时间戳作为订单号(以后使用自己的真实订单号)。让钱=1；//订单总金额(单位分钟)让paydata={orderid: orderid，money : money }；让payDataStr=JSON . stringify(payData)；//因为您想将参数传递给applet，所以您需要将它们转换为字符串const url=./wePay/wePay？payDataStr=$ { payDataStr } `；wx . MiniProgram . navigateto({ URL : URL })；//console.log ('click to pay '，URL)console . log(' click to pay ')}/script/body/html H5代码这里就不具体解释了，简单说一下。当我们单击付款按钮时，我们使用当前时间戳作为订单号(因为订单号必须是唯一的)，然后传递订单金额(单位分钟)。为了这里的节约，就放过一分钱，花自己的钱是痛苦的。

谈谈重点

1.要实现h5跳转小程序，必须引入jweixin。

脚本类型=' text/JavaScript ' src=' http :https://RES . wx . QQ.com/open/js/jweixin-1 . 3 . 2 . js '/脚本

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

常量url=./wePay/wePay？payDataStr=$ { payDataStr } `；wx . MiniProgram . navigateto({ URL : URL })；这应该与您的小程序页面一致。PayDataStr是我们携带的参数

四、小程序支付页面

让我们来看看我们的小程序支付页面

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

核心代码只有10行支付我们实用的小程序云开发实现的支付。由于付款不是本节的重点，这里不再详细解释。感觉

感兴趣的同学可以去看看我的文章和视频

小程序支付文章：https://www.jianshu.com/p/2b391df055a9

小程序支付视频：https://edu.csdn.net/course/play/25701/310742

让我们把小程序接收参数和付款的完整代码发布给大家

page({//parameter onload : function(options){ console . log('参数来自webview '，options)//string to object let pay data=JSON . parse(options . pay datatr)console . log(' orderid '，pay data . orderid)let that=this；wx . cloud . call function({ name : ' pay '，data : { orderid 3360 pay data . orderid，money:paydata.money}，success(RES){ console . log(' get success '，res) that.goPay(res.result) }，fail(err){ console . log(' get failed '，err)})}，//微信pay go pay(pay data){ wx . request payment({ timestam p 3360 pay data . timestamp，non。/webview/webview？Payok=true '，})}，fail(RES){ console . log(' payment failed '，res)} }) })代码中的注释很清楚。这里的一点是，在我们支付成功后，我们需要告诉h5我们已经支付成功，并通知h5刷新订单或支付状态。

至此，我们已经完全实现了小程序webview显示h5页面，并实现了h5与小程序的交互，从而实现了小程序webview的支付功能。不是很简单吗？

源地址

https://github.com/qiushi123/xiaochengxu_demos

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。