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

 更新时间:2025年07月09日 10:31:34   作者:广东蜡笔小新  
微信小程序支付流程涉及多个步骤和多个参与方的交互,下面这篇文章主要介绍了微信小程序支付包含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的写法,和官方大有不同

字段名变量名必填类型示例值描述
小程序IDappIdStringwxd678efh567hg6787微信分配的小程序ID
时间戳timeStampString1490840662时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间
随机串nonceStrString5K8264ILTKCH16CQ2502SI8ZNMTM67VS随机字符串,不长于32位。推荐随机数生成算法
数据包packageStringprepay_id=wx2017033010242291fcfe0db70013231072统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=wx2017033010242291fcfe0db70013231072
签名方式signTypeStringMD5签名类型,默认为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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Echart中国地图更换背景图的方法示例

    Echart中国地图更换背景图的方法示例

    本文主要介绍了Echart中国地图更换背景图的方法示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • JS实现电子时钟入门操作

    JS实现电子时钟入门操作

    这篇文章主要为大家详细介绍了JS实现电子时钟入门操作,实现带有表盘的时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • IE与FF下javascript获取网页及窗口大小的区别详解

    IE与FF下javascript获取网页及窗口大小的区别详解

    本篇文章主要是对IE与FF下javascript获取网页及窗口大小的区别进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JavaScript获取Excel表格的列序号和列名

    JavaScript获取Excel表格的列序号和列名

    这篇文章主要介绍了JavaScript获取Excel表格的列序号和列名,在处理Excel文件时,通常要获取xx列的数据,这就要求先找到列序号,下文关于列名获取需要的小伙伴可以参考一下
    2022-05-05
  • JavaScript页面刷新与弹出窗口问题的解决方法

    JavaScript页面刷新与弹出窗口问题的解决方法

    解决JavaScript页面刷新与弹出窗口问题
    2010-03-03
  • JavaScript六种常见的继承方法分享

    JavaScript六种常见的继承方法分享

    继承是面向对象编程中的一个重要概念,它允许一个对象(子类或派生类)获取另一个对象(父类或基类)的属性和方法,在 JavaScript 中,有多种方式可以实现继承,本文将给大家介绍六种常见的JavaScript继承方法,需要的朋友可以参考下
    2023-09-09
  • Bootstrap每天必学之警告框插件

    Bootstrap每天必学之警告框插件

    Bootstrap每天必学之警告框插件,使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 微信小程序开发之全局配置与页面配置实现

    微信小程序开发之全局配置与页面配置实现

    本文主要介绍了微信小程序开发之全局配置与页面配置实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • JavaScript两个变量交换值的实现方法

    JavaScript两个变量交换值的实现方法

    本文主要介绍了JavaScript两个变量交换值(不使用临时变量)的实现方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • Javascript表格翻页效果实现思路及代码

    Javascript表格翻页效果实现思路及代码

    表格翻页的实现方式有很多,下面以js为例为大家详细介绍下表格翻页效果的具体实现,感兴趣的朋友可以参考下
    2013-08-08

最新评论