借助云开发实现小程序支付功能

 

必备条件

• 1，必须注册微信支付的商户号
• 2，企业小程序必须通过认证
• 3，小程序关联微信支付商户号

一，小程序关联微信商户

1，登录小程序后台，点击关联更多商户号

 

 

2，关联商户号需要用到appid,点击如下所示的关联更多AppID

 

把我们小程序的appid复制下

 

然后去授权关联我们的微信支付商户号

 

授权完成以后，我们的小程序端会出现下面这样的，点击下确认即可。

 

这样我们就可以成功的关联微信支付商户号了

点击下上图的确认，然后再点击下图所示的授权。

 

可以看到我们的小程序和微信商户号成功的关联起来了

 

二，开通云开发并绑定微信商户号

1，然后新建小程序，开始代码部分。
这里的appid一定要是你关联过微信支付商户的，并且还得是企业小程序。这里创建项目时记得选择不使用云服务，因为使用默认云开发的话，会创建一大堆无用的文件。

 

 

2，开通云开发功能

 

3，给你的云开发环境起个名，英文或者拼音

然后点击确定，等待创建云开发，创建好以后如下。

 

4，然后点击设置，全局配置，可以看到有个微信支付配置

 

image.png

有的同学这里看不到微信支付配置，是因为你的小程序开发工具版本过低。最好下载最新版本的开发者工具。
5，云开发配置微信商户号。

添加完以后还需要手机上进行授权确认

6，手机微信上进行确认

 

可以看到这里已经授权绑定了

 

退款的我们后面会再讲。
这个时候我们准备工作就全部做好了，接下来就要愉快的写代码。

三，云开发支付代码的编写

1，看官方文档，其实说的很详细了，接下来我带大家过一遍。

 

这里也把官方链接贴出来给大家。
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/open/pay/CloudPay.unifiedOrder.html
其实官方有给我们完整的示例。

我们只需要把这段代码复制到我们自己的云函数里就行了。

 

2，创建云开发统一支付的云函数

我们首先要创建云函数的根目录

 

 

然后新建云函数pay0610

 

然后把官方示例直接复制到我们自己的云函数里

3，把云函数里的信息替换成我们自己的

 

上面标注重要的是一定要替换成自己的。然后保存修改，部署云函数

 

4，编写页面

在index.wxml里写一个按钮，点击的时候调起我们的支付云函数

 

 

然后在index.js里编写点击事件

 

我们这个时候直接点击支付，看看会不会调起支付

 

这个时候一大堆爆红，仔细看下，可以看出我们云开发环境id没有初始化。

5，app.js里配置云开发环境id

这里取到环境id

 

 

然后在app.js里配置

 

然后我们再点击下支付，可以看到我们成功的调起了支付

6,然后我用手机微信支付下试试

 

 

 

支付成功后，我们的控制台也会有相应的日志打印。

 

到这里我们就可以成功的在小程序里使用微信支付了，后面无非把价格和商品名字做活，做成动态传入的。