之前我曾向大家介绍过一种通过小程序云开发来实施微信支付的方法,不过那过程相对复杂,且常常伴随一些问题。今天,我将为大家展示一种更为简便的方法,该方法将利用官方提供的支付API来构建小程序的支付功能。
传送门
借助小程序云开发实现小程序支付功能
老规矩,先看本节效果图
我们成功打造了这一支付系统,完全依赖于小程序的云开发技术,无需自行搭建服务器,无需购置域名,无需进行域名备案,也无需提供技术支持。仅需一个基础的云函数,便能轻松实现微信小程序的支付功能。
核心代码就下面这些
一,创建一个云开发小程序
关于构建云开发小程序的细节,此处我就不再详述。若您不知如何构建此类小程序,不妨查阅我之前发布的文章,或者观看我制作的视频教程。
创建云开发小程序有几点注意的
1,一定不要忘记在app.js里初始化云开发环境。
2,创建完云函数后,一定要记得上传
二, 创建支付的云函数
1,创建云函数pay
三,引入三方依赖
引入第三方依赖的初衷,在于构建支付所需的关键参数。我们通过npm进行依赖的安装,而npm的运行又依赖于node环境。至于node的安装方法,本文将不予详述,有兴趣的读者可以自行在百度搜索,网上资源丰富得很。
1,首先右键pay,然后选择在终端中打开
2,我们使用npm来安装这个依赖。
在命令行里执行 npm i
安装完成后,我们的pay云函数会多出一个.json 文件
到这里我们的依赖就安装好了。
四,编写云函数pay
完整代码如下
//云开发实现支付
一定要注意把,,换成你自己的。
到这里我们获取小程序支付所需参数的云函数代码就编写完成了。
不要忘记上传这个云函数。
出现下图就代表上传成功
五,写一个简单的页面,用来提交订单,调用pay云函数。
这个页面很简单,
1,自己随便编写一个订单号(这个订单号要大于6位)
2,自己随便填写一个订单价(单位是分)
3,点击按钮,调用pay云函数。获取支付所需参数。
下图是官方支付api所需要的一些必须参数。
这是通过调用pay云函数所获取的参数展示,我们需要确认的是,这些参数与上图所需求的是否相同。
六,调用wx.实现支付
下图是官方的示例代码
这里不在做具体讲解了,把完整代码给大家贴出来
// pages/pay/pay.js
到这里,云开发实现小程序支付的功能就完整实现了。
实现效果 1,调起支付键盘
2,支付完成
3,log日志,可以看出不同支付状态的回调
此图展示了支付完成的反馈信息,于支付完成反馈环节,我们得以对订单的支付状态进行相应调整。
下图是支付失败的回调,
下图是支付完成的状态。
经过一番努力,我们已顺利完成了微信小程序支付功能的设置。这过程真是简单得令人难以置信。
如果感觉图文不是很好理解,我后面会录制视频讲解。
视频讲解