VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动
华纳云最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

小程序开发教程专栏介绍了多种实现微信支付功能的方法小程序内嵌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

4f4e527085d58c79f61374eeecbfe0e.png

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

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

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

422f2913775f4a6b96c48f706fe0cf5.png

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

6fa19b17642d9a24a220be2637216e7.png

第三,看一看h5页面代码

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

88a9b814b0f8dae8e63b953ea079509.png

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

975aa8116d90a0de6e5e86a0ac73eb4.png

在这里支付我们实用小程序云开发实现的支付。核心代码只有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网页等方式实现微信支付的细节。请多关注主机参考其他相关文章!

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

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

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 小程序内嵌h5页面,小程序webview网页等可以实现微信支付(小程序接入h5)。
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!