小程序-云开发-实现微信云支付功能

最新推荐文章于 2025-08-30 20:19:57 发布

原创

最新推荐文章于 2025-08-30 20:19:57 发布 · 3.4k 阅读

45 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #小程序 #接口 #ndk #移动开发

本文介绍了如何在小程序中使用云开发实现微信支付功能，免去了复杂的签名过程和敏感信息泄露风险。首先确保小程序具备微信支付资质，并在云控制台开通云支付。接着，在小程序端调用云函数发起支付请求，云函数端调用微信支付接口并返回支付参数。通过示例代码展示了小程序端和云函数端的实现细节，帮助开发者快速理解和应用微信云支付。

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

━━━━━━

前言

对于支付下单在小程序当中是一个非常重要的功能,在未接入云支付之前,想要实现一个支付下单的功能,借助微信官方提供的wx.requestPayment()这个接口,发起微信支付

需要获取小程序的openId,然后调起数据签名(timeStamp,nonceStr,package,signType,paySign),这些字段参数处理起来仍是有些麻烦的

但接入了云支付之后,实现一个支付功能,就相当简单容易了,免签名,直接获取小程序wx.requestPayment的所需参数

开发者无需关心证书、签名、也无需依赖第三方模块，免去了泄漏证书，支付等敏感信息的风险；还支持云函数作为微信支付进行支付和退款的回调地址，不再需要定时轮询，更加高效

您将在本文中学习到:

随机生成商品订单号,订单号不能重复
实现云支付的功能

前提条件

资质:小程序主体开通微信支付(微信支付不支持个人小程序,需要企业账户才可以)的能力,并且已绑定商户号(绑定开通商户号)的小程序

开通

开通微信支付云调用,在云控制台 -> 设置 -> 全局设置中开通,如下所示

点击添加商户号后进行账号绑定，这时候绑定了微信支付的商户号管理员的微信会收到一条授权确认的模板消息

点击模板消息会弹出服务商助手小程序,确认授权之后就可以在云开发控制台看到绑定状态为“已绑定”，而JS API权限也会显示“已授权”

微信支付流程

在小程序端:用户在小程序端点击支付时,使用wx.cloud.callFunction调用云函数(例如:支付云函数名为questionPay),并将商品描述(body),商品订单号outTradeNo,子商户号subMchId,总金额totalFee等信息参数传递给questionPay云函数
在云函数端: 在questionPay云函数中调用统一下单接口cloud.cloudPay.unifiedOrder(),该函数接收一对象,包含的参数有,商品描述(body),商品订单号(outTradeNo),云坏境的 Id,以及需要填写结果通知回调函数(如:wechatpay),它是用来接收异步支付的结果,questionPay云函数会返回成功结果的对象中会包含payment字段(包含:appId,nonceStr,package,paySign,signType(MD5),timeStamp)参数,会唤起微信支付的界面
在小程序端wx.cloudFunction的success回调函数(即调用questionPay云函数返回的对象)里调用wx.requestPayment接口发起支付请求,而从questionPay云函数返回的payment对象,参数,包含这个接口所需要的所有信息(参数),会弹出微信支付的界面
用户在小程序端支付成功,questionPay就会接收到异步的支付结果

微信云支付-小程序端代码

以下是小程序端的示例代码

Page({
  /**
   * 页面的初始数据
   */
  data: {
    slideVal: 5, // slide滑块默认初始值
    showSlide: false, // slide滑块默认显示
    showInput: true, // input表单默认隐藏
    onOff: true, // 其他金额切换开关
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {},

  // 滑动滑块
  sliderChange(event) {
    const slideVal = event.detail.value;
&nb