巧借 [ 小程序云开发 ] 快速接入微信支付功能 实验手册

蓝色无风

先来个【普惠福利】- 小程序模板仅需1元哦！

一、准备工作

1.已经申请小程序，获取小程序 AppID 和 Secret 在小程序管理后台中，【设置】 →【开发设置】 下可以获取微信小程序 AppID 和 Secret。

2.微信支付商户号，获取商户号和商户密钥在微信支付商户管理平台中，【账户中心】→【商户信息】 下可以获取微信支付商户号。

在【账户中心】 ‒> 【API安全】 下可以设置商户密钥。

3.微信开发者 IDE (下载)

4.下载电商小程序代码包

5.运行环境 Node8.9 或以上

二、效果预览

三、知识点

1.学习如何用云开发控制台上传图片、录入商品数据。

2.学习如何用云开发插入、读取数据。

3.学习如何用 wx‒js‒utils 和云函数实现小程序微信支付逻辑。

4.了解微信支付相关文档 小程序侧 和 微信支付侧

5.了解微信小程序模板消息相关文档 小程序模板消息

四、任务一：创建小程序∙云开发环境

任务目标: 创建小程序∙云开发环境，用于后面存储信息和开发云函数。

1、开发者工具创建项目

打开微信开发者工具，创建一个新的小程序项目，项目目录选择电商小程序Demo的目录，AppID填写已经申请公测资格的小程序对应的AppID。

2、开通云开发环境

1）点击开发者工具上的【云开发】按钮

2）点击【同意】

3）填写环境名称和环境ID，点击【确定】创建环境，即可进入云开发控制台。

3、创建数据库

电商小程序会使用到云开发提供的数据库能力，数据库使用的是MongoDB，需要优先创建一个集合，方便之后使用。

1）打开云开发控制台，点击菜单栏中的【数据库】，然后点击左侧边栏的【添加集合】按钮

2）分别输入集合名称 "goods" 和 "order"，然后点击确定即可创建集合。

3）要将 "goods" 集合的权限，设置为 "所有用户可读，仅创建者及管理员可写"。

​

4、录入商品数据

1）在云开发控制台，点击菜单栏中的 【文件管理】，然后点击左侧的【新建文件夹】，新建一个目录goods，点击进入 goods 目录后，点击左侧的【上传文件】按钮，将小程序项目目录 ./img 中的商品图片，都选择进行上传。

打开 cloud/database/goods.json，将保存下来的文件 fileID，依照顺序，填入数据的 pic 字段中。

2）返回【数据库】，在 goods 这个 collection 下，点击【导入】，选择 cloud/database/goods.json 文件进入数据批量导入。

五、任务二：读取数据与发起订单

任务目标: 利用云开发的小程序端接口读取商品数据和在云函数发起微信支付订单

读取数据

1.将下面代码，输入到 client/pages/list/index.js 中的 getGoodsList 方法中，通过此方法， 可以获取所有商品的数据。

1. // 利用云开发新接口，读取所有商品数据
   
2. const db = wx.cloud.database();
   
3. const result = await db.collection('goods').get();
   
4. 
   
5. let data = result.data || [];
   
6. 
   
7. this.setData({
   
8.     goods: data
   
9. });

复制代码

发起订单

1.将下面代码，输入到 client/pages/list/index.js 中的 makeOrder 方法中，通过此方法，可以调用云函数进行订单发起。

1. wx.showLoading({
   
2.     title: '正在下单',
   
3. });
   
4. 
   
5. // 利用云开发新接口，调用云函数发起订单
   
6. let id = e.target.dataset.goodid;
   
7. const { result } = await wx.cloud.callFunction({
   
8.     name: 'pay',
   
9.     data: {
   
10.         type: 'unifiedorder',
    
11.         data: {
    
12.             goodId: id
    
13.         }
    
14.     }
    
15. });
    
16. 
    
17. const data = result.data;
    
18. 
    
19. wx.hideLoading();
    
20. 
    
21. wx.navigateTo({
    
22.     url: `/pages/result/index?id=${data.out_trade_no}`
    
23. });

复制代码

2.创建云函数 pay

在 cloud/functions/pay 目录下，运行以下命令，安装依赖。

1. npm i --production

复制代码

3.填写微信商户与微信小程序相关配置

新建 cloud/functions/pay/config/index.js，并填入小程序的 AppId，还有微信支付的商户号 MCHID 和 商户密钥 KEY：

1. module.exports = {
   
2.   mpAppId: '', // 小程序 AppID
   
3.   envName: '', // 小程序云开发环境ID
   
4.   MCHID: '', //商户号
   
5.   KEY: '', // 商户密钥
   
6.   TIMEOUT: 10000 // 毫秒
   
7. };

复制代码

4.将下面代码，输入到 cloud/functions/pay/index.js 中的 switch 代码块中，通过此 case，可以进行订单的发起。

1. case 'unifiedorder': {
   
2.     // 在云函数参数中，提取商品 ID
   
3.     const { goodId } = data;
   
4. 
   
5.     // 查询该商品 ID 是否存在于数据库中，并将数据提取出来
   
6.     let goods = await goodCollection.doc(goodId).get();
   
7. 
   
8.     if (!goods.data.length) {
   
9.         return new Res({
   
10.             code: 1,
    
11.             message: '找不到商品'
    
12.         });
    
13.     }
    
14. 
    
15.     // 在云函数中提取数据，包括名称、价格才更合理安全，
    
16.     // 因为从端里传过来的商品数据都是不可靠的
    
17.     let good = goods.data[0];
    
18. 
    
19.     // 拼凑微信支付统一下单的参数
    
20.     const curTime = Date.now();
    
21.     const tradeNo = `${goodId}-${curTime}`;
    
22.     const body = good.name;
    
23.     const spbill_create_ip = ip.address() || '127.0.0.1';
    
24.     // 云函数暂不支付 http 触发器，因此这里回调 notify_url 可以先随便填。
    
25.     const notify_url = 'http://www.qq.com'; //'127.0.0.1';
    
26.     const total_fee = good.price;
    
27.     const time_stamp = '' + Math.ceil(Date.now() / 1000);
    
28.     const out_trade_no = `${tradeNo}`;
    
29.     const sign_type = WXPayConstants.SIGN_TYPE_MD5;
    
30. 
    
31.     let orderParam = {
    
32.         body,
    
33.         spbill_create_ip,
    
34.         notify_url,
    
35.         out_trade_no,
    
36.         total_fee,
    
37.         openid,
    
38.         trade_type: 'JSAPI',
    
39.         timeStamp: time_stamp,
    
40.     };
    
41. 
    
42.     // 调用 wx-js-utils 中的统一下单方法
    
43.     const {
    
44.         return_code,
    
45.         ...restData
    
46.     } = await pay.unifiedOrder(orderParam);
    
47. 
    
48.     let order_id = null;
    
49. 
    
50.     if (return_code === 'SUCCESS'&& restData.result_code === 'SUCCESS') {
    
51.         const {
    
52.             prepay_id,
    
53.             nonce_str
    
54.         } = restData;
    
55. 
    
56.         // 微信小程序支付要单独进地签名，并返回给小程序端
    
57.         const sign = WXPayUtil.generateSignature({
    
58.             appId: mpAppId,
    
59.             nonceStr: nonce_str,
    
60.             package: `prepay_id=${prepay_id}`,
    
61.             signType: 'MD5',
    
62.             timeStamp: time_stamp
    
63.         }, KEY);
    
64. 
    
65.         let orderData = {
    
66.             out_trade_no,
    
67.             time_stamp,
    
68.             nonce_str,
    
69.             sign,
    
70.             sign_type,
    
71.             body,
    
72.             total_fee,
    
73.             prepay_id,
    
74.             sign,
    
75.             status: 0, // 订单文档的status 0 未支付 1 已支付 2 已关闭
    
76.             _openid: openid,
    
77.         };
    
78. 
    
79.         let order = await orderCollection.add(orderData);
    
80. 
    
81.         order_id = order.id;
    
82.     }
    
83. 
    
84.     return new Res({
    
85.         code: return_code === 'SUCCESS' ? 0 : 1,
    
86.         data: { out_trade_no, time_stamp, order_id, ...restData }
    
87.     });
    
88. }

复制代码

5.上传云函数 在微信开发者工具中，右键点击云函数 pay，选取好环境后，选取好环境后，点击【创建并部署】。

六、任务二：发起支付与模板消息通知

任务目标: 利用云函数发起支付与发送模板消息

发起支付

1.将下面代码，输入到 client/pages/result/index.js 中的 pay 方法中，通过此方法，可以调起微信支付。

1. let orderQuery = this.data.order;
   
2. let out_trade_no = this.data.out_trade_no;
   
3. let _this = this;
   
4. 
   
5. const {
   
6.     time_stamp,
   
7.     nonce_str,
   
8.     sign,
   
9.     sign_type,
   
10.     prepay_id,
    
11.     body,
    
12.     total_fee
    
13. } = orderQuery;
    
14. 
    
15. wx.requestPayment({
    
16.     timeStamp: time_stamp,
    
17.     nonceStr: nonce_str,
    
18.     package: `prepay_id=${prepay_id}`,
    
19.     signType: 'MD5',
    
20.     paySign: sign,
    
21.     async success(res) {
    
22.     wx.showLoading({
    
23.         title: '正在支付',
    
24.     });
    
25. 
    
26.     wx.showToast({
    
27.         title: '支付成功',
    
28.         icon: 'success',
    
29.         duration: 1500,
    
30.         async success() {
    
31.         _this.getOrder();
    
32. 
    
33.         await wx.cloud.callFunction({
    
34.             name: 'pay',
    
35.             data: {
    
36.             type: 'payorder',
    
37.             data: {
    
38.                 body,
    
39.                 prepay_id,
    
40.                 out_trade_no,
    
41.                 total_fee
    
42.             }
    
43.             }
    
44.         });
    
45.         wx.hideLoading();
    
46.         }
    
47.     });
    
48.     },
    
49.     fail: function (res) { }
    
50. })

复制代码

2.将下面代码，输入到 cloud/functions/pay/index.js 中的 switch 代码块中，通过此 case，可以进行进行微信支付。

1. case 'payorder': {
   
2.     // 从端里出来相关的订单相信
   
3.     const {
   
4.         out_trade_no,
   
5.         prepay_id,
   
6.         body,
   
7.         total_fee
   
8.     } = data;
   
9. 
   
10.     // 到微信支付侧查询是否存在该订单，并查询订单状态，看看是否已经支付成功了。
    
11.     const { return_code, ...restData } = await pay.orderQuery({
    
12.         out_trade_no
    
13.     });
    
14. 
    
15.     // 若订单存在并支付成功，则开始处理支付
    
16.     if (restData.trade_state === 'SUCCESS') {
    
17.         let result = await orderCollection
    
18.           .where({ out_trade_no })
    
19.           .update({
    
20.             status: 1,
    
21.             trade_state: restData.trade_state,
    
22.             trade_state_desc: restData.trade_state_desc
    
23.           });
    
24. 
    
25.         
    
26.         let curDate = new Date();
    
27.         let time = `${curDate.getFullYear()}-${curDate.getMonth() +
    
28.           1}-${curDate.getDate()} ${curDate.getHours()}:${curDate.getMinutes()}:${curDate.getSeconds()}`;
    
29. 
    
30.         // 调用另一个云函数，发送模板消息，通知用户已经支付成功了
    
31.         // 如果在实验中拿不到模板消息的模板 id，这段可以暂时去掉
    
32.         let messageResult = await app.callFunction({
    
33.           name: 'wxmessage',
    
34.           data: {
    
35.             formId: prepay_id,
    
36.             openId: userInfo.openId,
    
37.             appId: userInfo.appId,
    
38.             page: `/pages/result/index?id=${out_trade_no}`,
    
39.             data: {
    
40.               keyword1: {
    
41.                 value: out_trade_no // 订单号
    
42.               },
    
43.               keyword2: {
    
44.                 value: body // 物品名称
    
45.               },
    
46.               keyword3: {
    
47.                 value: time// 支付时间
    
48.               },
    
49.               keyword4: {
    
50.                 value: (total_fee / 100) + "元" // 支付金额
    
51.               }
    
52.             }
    
53.           }
    
54.         });
    
55.          
    
56.     }
    
57. 
    
58.     return new Res({
    
59.         code: return_code === 'SUCCESS' ? 0 : 1,
    
60.         data: restData
    
61.     });
    
62. }

复制代码

模板消息通知

1.配置小程序相关信息 新建 cloud/functions/wxmessage/config/index.js，并填写小程序相关配置。

1. module.exports = {
   
2.   secret: '', // 小程序 secret
   
3.   templateId: '' // 模板 id
   
4. };

复制代码

模板 id 可以在小程序管理后台的【模板消息】‒> 【我的模板】中获取，如果仍未添加，则可以在【模板库】中先添加 支付成功通知模板。

2.在 cloud/functions/wxmessage 目录下，运行以下命令，安装依赖。安装完毕后，在开发者工具中右键点击该目录，点击上传并创建云函数。

1. npm i ––production

复制代码

七、预览

实验完成，可以在微信开发者工具中，用手机微信扫一扫预览效果。

更多云技术课程学习，欢迎访问