小程序如何实现微信支付

　　介绍

这篇文章主要介绍小程序如何实现微信支付,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

原理

先说下实现原理吧,实现原理就是我们在webview的编辑页面里实现下单功能,然后点击支付按钮,我们点击支付按钮的时候会跳转到小程序页面,把订单号,订单总金额,传递到小程序里,然后小程序里使用订单号和订单金额去调起微信支付,实现付款,付款成功或者失败时都会有回调,我们再把对应的回调传递给webview,刷新webview里的订单和支付状态。

一、定义webview显示编辑页面

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

小程序如何实现微信支付

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

二、定义编辑页面

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

小程序如何实现微信支付

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

小程序如何实现微信支付

这里有一点需要注意

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

小程序如何实现微信支付

三,来看下编辑页面代码

& lt; !DOCTYPE html> 　　& lt; html lang=癳n"祝辞 　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞 　　& lt; title>小程序内嵌webview 　　& lt; style> 　　.btn { 　　字体大小:70 px; 　　颜色:红色; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; h2>我是webview里的编辑页面& lt;/h2> 　　& lt; id=癲esc"类=癰tn"> const url=" . ./wePay/wePay ? payDataStr=$ {payDataStr} '; 　　wx.miniProgram.navigateTo ({ 　　url: url 　　});

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

小程序如何实现微信支付

四,小程序支付页

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

小程序如何实现微信支付

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

小程序如何实现微信支付

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

页面({//编辑传过来的参数>以上是“小程序如何实现微信支付”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

小程序如何实现微信支付