小程序、H5、APP中的微信支付概述和实战总结

最近开发的一个微信小程序的项目结束了，里面用到了支付相关的api，借着项目总结一下小程序各种场景支付的逻辑。

1. 微信支付概述

1.1 微信支付的重要性

微信支付作为中国领先的移动支付方式之一，其便捷性、安全性以及广泛的用户基础使其成为商家和开发者不可忽视的支付渠道。根据2024年的数据统计，微信支付的日交易量已超过十亿笔，覆盖线上线下多种支付场景。

微信支付的普及不仅极大地方便了用户的日常支付行为，也促进了移动支付技术的发展和应用。其安全性通过多重加密和风险控制机制得到了保障，增强了用户对移动支付的信心。

1.2 微信支付在不同平台的应用

微信支付的应用范围广泛，涵盖了微信小程序、公众号H5以及移动应用（App）等多个平台。以下是各个平台微信支付的简要说明：

• 微信小程序支付：用户在小程序中选择商品或服务后，可以直接通过微信支付完成交易，无需跳转至其他应用，提高了支付的流畅性和用户体验。
• 公众号H5支付：通过微信公众号访问的H5页面，用户同样可以利用微信支付进行交易，这为公众号运营者提供了便捷的收款渠道。
• App支付：在移动端App中集成微信支付功能，用户在App内完成支付操作，享受一站式服务体验，同时也为App开发者带来了更多的商业机会和收益。

微信支付的跨平台特性，使得开发者能够根据不同平台的特点和用户需求，灵活地实现支付功能，为用户提供更加丰富和便捷的支付选项。

2. uni-app微信支付实现

2.1 微信小程序支付

2.1.1 获取openid和code

在微信小程序中实现支付功能，首先需要获取用户的openid。通过调用wx.login()接口，可以获得一个唯一标识用户身份的code，进而通过后端接口使用这个code来交换获取openid。openid是用户在微信生态中的唯一标识，对于确保支付安全至关重要。

• 根据微信官方文档，小程序支付的openid获取流程如下：

  wx.login({
       
    success (res) {
       
      if (res.code) {
       
        // 发起网络请求获取openid
        uni.request({
       
          url: '你的后端接口地址',
          method: 'GET',
          data: {
       
            code: res.code // 将前端获取的code传给后端
          },
          success: function(res) {
       
            console.log(res.data.openid)
          }
        })
      } else {
       
        console.log('获取用户登录态失败！' + res.errMsg)
      }
    }
  })
  

2.1.2 创建订单和获取orderId

在获取到openid后，接下来需要创建订单并获取orderId。这通常涉及到调用后端服务，提交订单详情，如商品信息、金额等，然后由后端生成订单，并返回一个唯一的orderId。

• 创建订单的后端请求示例：

  uni.request({
       
    url: '你的后端订单创建接口',
    method: 'POST',
    data: {
       
      openId: '用户的openid',
      goodsDetail: '商品详情', // 包括商品金额、数量等信息
    },
    success: function(res) {
       
      console.log(res.data.orderId)
    }
  })
  

2.1.3 调用支付核心参数和发起支付

最后一步是调用后端接口获取支付核心参数，并使用wx.requestPayment()方法发起支付。核心参数包括时间戳、随机字符串、预支付交易会话标识、签名算法和签名等。

• 获取支付核心参数的后端请求示例：

  uni.request({
       
    url: '你的后端支付参数接口',
    method: 'POST',
    data: {
       
      orderId: '订单ID',
      openId: '用户的openid'
    },