首页 > 网络编程 > JavaScript > javascript技巧 > 微信小程序支付包含uniapp

微信小程序支付包含uniapp方法超详细讲解

2025-07-09 10:31:23 作者：广东蜡笔小新

微信小程序支付流程涉及多个步骤和多个参与方的交互,下面这篇文章主要介绍了微信小程序支付包含uniapp方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

本文只介绍前端的实现逻辑，所以不涉及申请微信支付API，因为该功能是后端处理。

一、了解微信支付流程

官方参考文档：微信支付开发文档

微信支付官方流程图：

二、【前端】微信支付实现步骤

1.创建订单接口

当用户点击购买按钮时，首先第一步要创建订单，后端需要提供下单接口（后端调用统一下单接口，也就是生成预支付交易单），该接口返回给前端一个订单id，此时订单处于待付款状态

代码示例：

// uniapp || 微信小程序
PlaceAnOrder(params).then((res) => {
    const PayParams = { order_id: res.order_id }; // 接口返回的订单ID
})

2.获取支付参数

通过订单id调用后端接口拿到支付参数（后端调用预支付接口的时候拿到的参数）：appId、timeStamp、nonceStr、package、signType，不过要区别uniapp的写法，和官方大有不同

字段名	变量名	必填	类型	示例值	描述
小程序ID	appId	是	String	wxd678efh567hg6787	微信分配的小程序ID
时间戳	timeStamp	是	String	1490840662	时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间
随机串	nonceStr	是	String	5K8264ILTKCH16CQ2502SI8ZNMTM67VS	随机字符串，不长于32位。推荐随机数生成算法
数据包	package	是	String	prepay_id=wx2017033010242291fcfe0db70013231072	统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=wx2017033010242291fcfe0db70013231072
签名方式	signType	是	String	MD5	签名类型，默认为MD5，支持HMAC-SHA256和MD5。注意此处需与统一下单的签名类型一致

// 微信开发工具
PlaceAnOrder(params).then((res) => {
    const wxPayParams = {
      order_id: res.data.order_id,
    };
    fetchWxPay(wxPayParams).then((payRes) => {
      const { data } = payRes; // data包含了appId、timeStamp、nonceStr、package、signType，后端已对格式做处理，格式参考上面表格
      const payData = {
        ...data,
        success(sucRes) {
          console.log('success', sucRes);
        },
        fail(err) {
          console.log('err', err);
        },
        complete() {
		  console.log('complete');
        },
      };
    });
  });
// uniapp
payApi(PayParams).then((payRes) => {
    uni.getProvider({
        service: 'payment',
        success: function (res) {
            let payConfing: any = {};
            payConfing = {
                provider: res.provider[0],
                ...payRes,
                service: 5,
				success(sucRes) {
                  console.log('success', sucRes);
                },
                fail(err) {
                  console.log('err', err);
                },
                complete() {
                  console.log('complete');
                },
            },
		}
	})
})

3.调用wx.requestPayment发起微信支付

当一切参数都能拿到并且准确无误后调用微信官方接口wx.requestPayment，如果是uniapp则使用uni.requestPayment，具体参数说明参考：https://doc.dcloud.net.cn/uni-app-x/api/request-payment.html#requestpayment

// weixin
wx.requestPayment(payData)
// uniapp
uni.requestPayment(payConfing)

总结

到此这篇关于微信小程序支付包含uniapp方法的文章就介绍到这了,更多相关微信小程序支付包含uniapp内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Django1.11配合uni-app发起微信支付的实现