纵有疾风起
人生不言弃

小程序支付003~借助云开发10行代码实现小程序支付功能

接上篇,上一篇我们已经注册完企业小程序,并成功的完成了微信认证。这一节我们就来开始正式的关联微信支付了,给我们的小程序接入支付功能。
传送门:《企业微信小程序的注册图文详解》

必备条件

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

一,小程序关联微信商户

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(1)

把我们小程序的appid复制下

小程序支付003~借助云开发10行代码实现小程序支付功能插图(2)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(3)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(4)

小程序支付003~借助云开发10行代码实现小程序支付功能插图(5)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(6)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(7)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(8)

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

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(9)

2,开通云开发功能

小程序支付003~借助云开发10行代码实现小程序支付功能插图(10)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(11)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(12)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(13)
image.png

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(14)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(15)

6,手机微信上进行确认

小程序支付003~借助云开发10行代码实现小程序支付功能插图(16)

小程序支付003~借助云开发10行代码实现小程序支付功能插图(17)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(18)

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

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

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(19)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(20)

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

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

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(21)

然后新建云函数pay0610

小程序支付003~借助云开发10行代码实现小程序支付功能插图(22)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(23)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(24)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(25)

4,编写页面

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(26)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(27)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(28)

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

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

这里取到环境id

小程序支付003~借助云开发10行代码实现小程序支付功能插图(29)

然后在app.js里配置

小程序支付003~借助云开发10行代码实现小程序支付功能插图(30)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(31)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(32)

小程序支付003~借助云开发10行代码实现小程序支付功能插图(33)

小程序支付003~借助云开发10行代码实现小程序支付功能插图(34)

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

小程序支付003~借助云开发10行代码实现小程序支付功能插图(35)

到这里我们就可以成功的在小程序里使用微信支付了,后面无非把价格和商品名字做活,做成动态传入的。
后面我也会把源码放到网盘里,有需要的同学,去我公号里回复‘云开发支付’就可以获取了。

小程序支付003~借助云开发10行代码实现小程序支付功能插图(36)

文章转载于:https://www.jianshu.com/p/102270f02075

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 小程序支付003~借助云开发10行代码实现小程序支付功能

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活