为了账号安全,请及时绑定邮箱和手机立即绑定

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

2020.06.11 07:11 6364浏览

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

必备条件

  • 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,然后我用手机微信支付下试试




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

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

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消