云开发，让微信小程序微信支付变得如此容易

最近在搞微信小程序，总结一下微信支付。

自从云开发接入微信支付之后，前端在做微信支付这一块终于能抬起头来了，不需要再向后端低头，受气了。

来,展示

前提

在开搞之前，首先要知道商户号，和微信支付安全密钥，这里不逼逼这个，不知道的自行百度一下，都是些手工活。

开通云开发

首先，如果你建项目的时候，不是建的云开发项目，那就要在小程序开发工具上方开通一下。

配置云开发环境

开通完云开发之后，就要配置一下它的开发环境。

在跟目录下有一个projece.config.json的文件，在文件里面，配置一下，下面配置⬇️

"cloudfunctionRoot":"cloud"(这个文件名可以随便起)

接着在项目新建一个cloudfunctionRoot配置同样名字的文件夹，这个文件夹就是存放所有云开发的代码的地方。

这个文件夹跟其他文件夹不同，它的后面还带一个环境，这个环境名，就是开通云开发功能时填写的名字。

👌，到这里就已经配置好云开发环境了。

走起

环境弄好了，现在，就可以把微信支付整起来。Coming on !

在云开发文件夹，鼠标有件新建一个NODE云函数文件，它就会自动给我们分配一个云函数,结构如下，我门只要看的是index.js。

index.js默认内容如下

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

它return出来的，就是我们能够拿到的。那怎么才能拿到呢？看下面👇

我们要是想在开发的时候，拿到云开发，某个函数返回的数据，那必须要实例化一下，云开发环境，这里就在app.js的oonLaunch生命周期实例化一下它。

 onLaunch() {
    wx.cloud.init({
      env:"zhengjia-5cgei"(这个就是开通云开发时分配给我们的环境)
    })
  }

到这里，就已经可以调用wx.cloud.callFunction回调函数拿到云函数给返回的数据了。

wx.cloud.callFunction({
      name:"cloudPay"(要调用哪个云函数就写上哪个云函数名字),
      data:{},(如果要给云函数传参数，可以写在这里，它会在main函数里的第一个参数里被接收到)
      success:()=>{}，(调用成功这里就可以接收到返回来的数据)
      fail:()=>{}
    })

说到这里可能大伙都在破口大骂了，怎么说了那么多，还没说到微信支付，这狗棒东西。

对不起，刚才双手被别人压住了🙈（这句话希望你永远听不懂，听懂的掌声，哈哈哈）

它来了

嗯嗯呃呃....不比比了，微信支付它来了。

首先，要在需要搞微信支付的那个云函数的文件夹里安装一个tenpay

npm i tenpay

然后，在index.js里面配置一下，并实例化一下。

const tenpay = require('tenpay')
// 微信支付配置
const config = {
  appid: 'wxf931f0570249940a',(公众号ID)
  mchid: '1600735010',(微信商户号)
  partnerKey: 'Fh2yS9rS9RhXmC7rQKVBuOvfOc1QttSc123eee',(微信支付安全密钥)
}
//实例化
const api = tenpay.init(config)

// 云函数入口函数
exports.main = async () => {
  const wxContext = cloud.getWXContext()
  //调用getPayParams，就可以返还wx.requestPayment拉起微信支付所需的参数了
  let result = await api.getPayParams({
    out_trade_no: 11111111111（订单号）,
    body: "test"（订单描述）,
    total_fee: 1000（订单金额，分为单位）,
    openid: wxContext.OPENID(openID)
  });
 //这里将这样参数return出去就OK
  return result
}

到这里，就xx的将微信支付所需的所有东西整好了，我们来用一下。

随便找个地方，写个button

<button bindtap="pullWx">拉起微信支付</button>

js

pullWxPay是我将，wx.cloud.callFunction和x.requestPayment做的一次封装的函数，大伙可以自行调用这两个函数，如果对pullWxPay封装有意思的，在下面留言，我发给你。

效果👇

这里，我上面写了1000分，所以是10.00。

总结

自从云开发接入微信支付之后，真的让微信支付在小程序上简单了不少，流程也好了很多，方便又易用，最重要的是前端仔不需要受后端大哥的气了，哈哈哈。

最后，如果对你有帮助，请给小可怜一个❤️，这是对一个切图仔最大的鼓励，谢谢🙏