干货：如何借助小程序云开发实现小程序支付功能（含源码）

我们在做小程序支付相关的开发时总会遇到这些难题
1.小程序调用微信支付时必须要有自己的服务器
2.有自己的备案域名
3.有自己的后台开发
这就导致我们做小程序支付时的成本很大
本节就来教大家如何使用小程序云开发实现小程序支付功能的开发，不用搭建自己的服务器，不用有自己的备案域名，只需要简简单单的使用小程序云开发。

老规矩先看效果图：

---

本节知识点：

1.云开发的部署和使用
2.支付相关的云函数开发
3.商品列表
4.订单列表
5.微信支付与支付成功回调

支付成功给用户发送推送消息的功能会在后面讲解

下面就来教大家如何借助云开发使用小程序支付功能

支付所需要用到的配置信息
1.小程序appid
2.云开发环境id
3.微信商户号
4.商户密匙

一、准备工作

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

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

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

这里特殊说明下——个人小程序是没有办法使用微信支付的，所以如果想使用微信支付功能必须是非个人账号（当然个人可以办个体户工商执照来注册非个人小程序账号）

3.微信开发者 IDE
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

4.开通小程序云开发功能
https://edu.youkuaiyun.com/course/play/9604/204526

二、商品列表的实现

效果图如下
由于本节重点是支付的实现所以这里只简单贴出关键代码

wxml布局如下：

<view class="container">
   <view class="good-item"  wx:for="{
   {goods}}"  wx:key="*this"  ontap="getDetail" data-goodid="{
   {item._id}}">
   <view class="good-image">
      <image src="{
   {pic}}"></image>
   </view>
  <view class="good-detail">
    <view class="title">商品:  {
   {
   item.name}}</view>
    <view class="content">价格： {
   {
   item.price / 100}} 元  </view>
    <button
        class="button"        
        type="primary"         
        bindtap="makeOrder"        
        data-goodid="{
   {item._id}}"
   >下单</button>
   </view>
 </view></view>

我们所需要做的就是借助云开发获取云数据库里的商品信息然后展示到商品列表，关于云开发获取商品列表并展示本节不做讲解（感兴趣的同学可以翻看作者历史博客，有写过的）

三、支付云函数的创建

首先看下我们支付云函数都包含那些内容

简单先讲解下每个的用处

config下的index.js是做支付配置用的，主要配置支付相关的账号信息
lib是用的第三方的支付库，这里不做讲解
重点讲解的是云函数入口 index.js

下面就来教大家如何去配置

1.配置config下的index.js,
这一步所需要做的就是把小程序appid、云开发环境ID、商户id、商户密匙填进去。

2.配置入口云函数

详细代码如下
代码里注释很清楚了这里不再做单独讲解

const cloud = require('wx-server-sdk')
cloud