小程序、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获取流程如下：
  1. wx.login({
  2.   success (res) {
  3.     if (res.code) {
  4.       // 发起网络请求获取openid
  5.       uni.request({
  6.         url: '你的后端接口地址',
  7.         method: 'GET',
  8.         data: {
  9.           code: res.code // 将前端获取的code传给后端
  10.         },
  11.         success: function(res) {
  12.           console.log(res.data.openid)
  13.         }
  14.       })
  15.     } else {
  16.       console.log('获取用户登录态失败！' + res.errMsg)
  17.     }
  18.   }
  19. })

  复制代码

2.1.2 创建订单和获取orderId

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

• 创建订单的后端请求示例：
  1. uni.request({
  2.   url: '你的后端订单创建接口',
  3.   method: 'POST',
  4.   data: {
  5.     openId: '用户的openid',
  6.     goodsDetail: '商品详情', // 包括商品金额、数量等信息
  7.   },
  8.   success: function(res) {
  9.     console.log(res.data.orderId)
  10.   }
  11. })

  复制代码

2.1.3 调用支付焦点参数和发起支付

末了一步是调用后端接口获取支付焦点参数，并使用wx.requestPayment()方法发起支付。焦点参数包括时间戳、随机字符串、预支付生意业务会话标识、署名算法和署名等。

• 获取支付焦点参数的后端请求示例：
  1. uni.request({
  2.   url: '你的后端支付参数接口',
  3.   method: 'POST',
  4.   data: {
  5.     orderId: '订单ID',
  6.     openId: '用户的openid'
  7.   },
  8.   success: function(res) {
  9.     // 调用微信支付接口
  10.     wx.requestPayment({
  11.       timeStamp: res.data.timeStamp,
  12.       nonceStr: res.data.nonceStr,
  13.       package: res.data.package,
  14.       signType: res.data.signType,
  15.       paySign: res.data.paySign,
  16.       success: function(res) {
  17.         console.log('支付成功', res)
  18.       },
  19.       fail: function(res) {
  20.         console.log('支付失败', res)
  21.       }
  22.     })
  23.   }
  24. })

  复制代码

以上流程是uni-app在微信小程序中实现微信支付的一般步调。须要留意的是，全部的支付操作都须要在用户与商户有明确生意业务意愿的前提下举行，确保支付过程的安全性和合规性。
3. 公众号H5支付实现

3.1 JSAPI支付方式

3.1.1 获取JSAPI焦点参数

在公众号H5支付中，JSAPI支付是一种常用的方式。首先须要获取JSAPI所需的焦点参数，这些参数通常包括appId、timeStamp、nonceStr、package、signType和paySign。

• appId：公众号的ID，用于标识公众号。
  
• timeStamp：时间戳，从1970年1月1日00:00:00至今的秒数，用于确保请求的时效性。
  
• nonceStr：随机字符串，长度为32个字符以下，用于确保署名的随机性。
  
• package：统一下单接口返回的prepay_id参数值，用于标识本次支付的订单。
  
• signType：署名算法范例，通常使用RSA。
  
• paySign：署名字符串，用于验证请求的正当性。
  

获取这些参数通常须要调用后端接口，后端会根据订单信息和微信支付的要求生成这些参数。以下是一个示例代码，展示怎样通过uni.request调用后端接口获取JSAPI焦点参数：

1. uni.request({
2.   url: '后端接口地址,获取支付核心数据',
3.   method: 'POST',
4.   data: { 传入接口需要的参数,如订单ID,openId等 },
5.   success(res) {
6.     // 调用下方支付方法
7.     wxpay(res.data)
8.     console.log(res.data)
9.     // 接口会返回以下核心参数
10.     // appId     公众号ID
11.     // timeStamp 时间戳
12.     // nonceStr  随机字符串
13.     // package   统一下单接口返回的 prepay_id 参数值
14.     // signType  微信签名方式RSA
15.     // paySign   微信签名
16.   }
17. })

复制代码

3.1.2 通过JSAPI发起支付

一旦获取了JSAPI的焦点参数，就可以使用这些参数通过JSAPI发起支付。这个过程须要在微信浏览器中举行，因为微信浏览器提供了WeixinJSBridge对象，用于调用微信支付。

• 检测WeixinJSBridge：首先须要检测WeixinJSBridge对象是否存在，如果存在则直接调用支付，如果不存在则监听WeixinJSBridgeReady事件，当事件触发时再调用支付。
  
• 调用支付：使用WeixinJSBridge.invoke方法调用getBrandWCPayRequest，传入获取到的焦点参数，完成支付流程。
  

以下是一个示例代码，展示怎样通过JSAPI发起支付：

1. function wxpay(data) {
2.   if (typeof WeixinJSBridge == "undefined") {
3.     if (document.addEventListener) {
4.       document.addEventListener('WeixinJSBridgeReady', onBridgeReady(data), false);
5.     } else if (document.attachEvent) {
6.       document.attachEvent('WeixinJSBridgeReady', onBridgeReady(data));
7.       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(data));
8.     }
9.   } else {
10.     onBridgeReady(data);
11.   }
12. }
14. function onBridgeReady(data) {
15.   WeixinJSBridge.invoke(
16.     'getBrandWCPayRequest', {
17.       "appId": data.appId, //公众号
18.       "timeStamp": data.timeStamp, //时间戳
19.       "nonceStr": data.nonceStr, //随机串
20.       "package": data.package, //prepay_id
21.       "signType": data.signType, //微信签名方式RSA
22.       "paySign": data.paySign //微信签名
23.     },
24.     function(res) {
25.       // 支付成功
26.       if (res.err_msg == "get_brand_wcpay_request:ok") {
27.         // 使用以上方式判断前端返回,微信团队郑重提示：
28.         //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
29.       }
30.       // 支付过程中用户取消
31.       if (res.err_msg == "get_brand_wcpay_request:cancel") {
33.       }
34.       // 支付失败
35.       if (res.err_msg == "get_brand_wcpay_request:fail") {
37.       }
38.       /**
39.        * 其它
40.        * 1、请检查预支付会话标识prepay_id是否已失效
41.        * 2、请求的appid与下单接口的appid是否一致
42.        * */
43.       if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {
45.       }
46.     });
47. }

复制代码

通过这种方式，可以在公众号H5页面中实现微信支付功能，为用户提供便捷的支付体验。
4. App内微信支付实现

4.1 App微信支付流程

App微信支付流程是移动端应用中常见的支付方式，它允许用户在App内直接完成支付操作，提高了用户体验和支付服从。以下是App微信支付的实现流程：

• 登录获取OpenID：首先，须要调用微信登录接口uni.login获取用户授权的code，然后通过后端接口使用code调换用户的OpenID。
  
  1. uni.login({
  2.   provider: "weixin",
  3.   success: function(event){
  4.     const {openid, access_token} = event.authResult;
  5.     // 获取用户信息
  6.     uni.getUserInfo({
  7.       provider: 'weixin',
  8.       success: function(info) {
  9.         // 获取用户信息成功, 调用后端接口进行完成登录
  10.       }
  11.     })
  12.   },
  13.   fail: function (err) {
  14.     // 登录授权失败
  15.     // err.code是错误码
  16.   }
  17. })

  复制代码

1.   
2. - **创建订单获取订单ID**：登录成功后，需要调用后端接口创建订单，并获取订单ID。
3.   
4.   ```javascript
5.   uni.request({
6.     url: '后端接口地址,获取订单id',
7.     method: 'POST',
8.     data: { 传入接口需要的参数,如商品金额,商品个数等 },
9.     success(res) {
10.       console.log(res.data.orderId)
11.     }
12.   })

复制代码

• 获取支付焦点参数：调用后端接口获取支付焦点参数，包括时间戳、随机字符串、预支付生意业务会话标识（prepay_id）、署名算法和署名。
  
  1. uni.request({
  2.   url: '后端接口地址,获取支付核心数据',
  3.   method: 'POST',
  4.   data: { 传入接口需要的参数,如订单ID等 },
  5.   success(res) {
  6.     console.log(res.data)
  7.     // 接口会返回以下核心参数
  8.     // timeStamp 时间戳
  9.     // nonceStr 随机字符串
  10.     // package 统一下单接口返回的 prepay_id 参数值
  11.     // signType 签名算法
  12.     // paySign 签名
  13.   }
  14. })

  复制代码
• 发起支付：使用uni.requestPayment方法发起支付，通报支付焦点参数。
  
  1. uni.requestPayment({
  2.   provider: 'wxpay',
  3.   orderInfo: data.orderInfo, // 微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
  4.   nonceStr: data.noncestr,
  5.   package: data.package,
  6.   timeStamp: data.timestamp,
  7.   signType: data.signType,
  8.   paySign: data.paySign,
  9.   success: function (res) {
  10.     if (e.errMsg == "requestPayment:ok") {
  11.       console.log('支付成功')
  12.     }else{
  13.       console.log('支付失败')
  14.     }
  15.   },
  16.   fail: function (err) {
  17.     console.log('支付失败:' + JSON.stringify(err));
  18.   }
  19. });

  复制代码

4.2 使用uni.requestPayment举行支付

uni.requestPayment是uni-app提供的一个统一支付API，它可以或许根据运行的平台自动调用相应的支付接口。以下是使用uni.requestPayment举行支付的关键步调：

• 参数准备：在调用uni.requestPayment之前，须要准备好支付所需的参数，包括服务提供商（provider）、订单信息（orderInfo）、时间戳（timeStamp）、随机字符串（nonceStr）、预支付生意业务会话标识（package）、署名算法（signType）和署名（paySign）。
  
• 调用支付接口：使用uni.requestPayment方法发起支付请求，并传入准备好的参数。
  
  1. uni.requestPayment({
  2.   provider: 'wxpay',
  3.   orderInfo: data.orderInfo,
  4.   nonceStr: data.noncestr,
  5.   package: data.package,
  6.   timeStamp: data.timestamp,
  7.   signType: data.signType,
  8.   paySign: data.paySign,
  9.   success: function (res) {
  10.     if (res.errMsg == "requestPayment:ok") {
  11.       console.log('支付成功');
  12.     } else {
  13.       console.log('支付失败');
  14.     }
  15.   },
  16.   fail: function (err) {
  17.     console.log('支付失败:' + JSON.stringify(err));
  18.   }
  19. });

  复制代码
• 处理支付结果：在支付成功后，可以通过回调函数中的success参数获取支付结果，并举行相应的业务处理。如果支付失败，则可以通过fail参数获取错误信息，并提示用户。
  

通过上述步调，开辟者可以在uni-app中实现App内微信支付功能，为用户提供便捷的支付体验。
5. 错误处理和调试技巧

5.1 常见错误及解决方法

在uniapp实现微信支付的过程中，开辟者大概会碰到各种问题。以下是一些常见的错误及其解决方法：

• 问题一：支付场景非法
  
  
  
  • 原因：后端在创建预支付接口时未将trade_type修改为JSAPI模式。
    
  • 解决方法：确保后端创建预支付订单时，trade_type参数设置正确，符合微信支付的要求。
    
  
  
• 问题二：支付验证署名失败
  
  
  
  • 原因：后端生成署名时填写的appid不正确，大概小程序appid与应用的appid不一致。
    
  • 解决方法：检查并确保使用的appid与小程序或应用的appid一致，且署名过程中使用正确的密钥。
    
  
  
• 问题三：调用支付JSAPI缺少参数：total_fee
  
  
  
  • 原因：调用支付接口时，须要的参数total_fee（总金额，单位为分）未正确通报。
    
  • 解决方法：检查并确保全部须要的支付参数都已经包含在调用中，特殊是total_fee。
    
  
  
• 问题四：支付请求超时
  
  
  
  • 原因：网络问题大概服务器处理时间过长导致支付请求超时。
    
  • 解决方法：优化服务器端的处理逻辑，淘汰相应时间；同时检查客户端的网络连接，并提供超时重试机制。
    
  
  
• 问题五：支付结果未知或不一致
  
  
  
  • 原因：支付完成后，回调或前端结果处理逻辑存在问题，导致无法正确判断支付状态。
    
  • 解决方法：确保支付完成后，服务器端可以或许吸收到微信的支付结果通知，并正确处理；前端须要根据回调结果更新支付状态。
    
  
  
• 问题六：支付过程中用户取消
  
  
  
  • 原因：用户在支付过程中主动取消支付操作。
    
  • 解决方法：前端须要正确处理用户取消支付的环境，给用户相应的提示，并记录取消支付的事件以供后续分析。
    
  
  
• 问题七：支付接口调用失败
  
  
  
  • 原因：调用支付接口时，大概由于参数错误、网络问题或微佩服务器问题导致调用失败。
    
  • 解决方法：检查调用参数是否正确，确保网络连接正常，如果问题连续存在，可以接洽微信商户平台获取支持。
    
  
  
• 问题八：H5支付在某些浏览器或环境下无法调起
  
  
  
  • 原因：H5支付依赖于微信浏览器或特定的JSSDK，某些环境下大概存在兼容性问题。
    
  • 解决方法：确保使用的浏览器支持微信支付，如果问题依旧，尝试更新或更换浏览器，同时检查JSSDK的版本和设置是否正确。
    
  
  
• 调试技巧
  
  
  
  • 使用console.log输出关键变量和状态，以便快速定位问题。
    
  • 使用debugger语句在代码中设置断点，举行逐步调试。
    
  • 检查网络请求和相应，使用浏览器的开辟者工具查看详细的请求和相应数据。
    
  • 对于跨平台问题，使用条件编译和运行时检查来确保代码的正确实行。
    
  
  

通过上述的常见错误及解决方法，开辟者可以更加高效地处理uniapp实现微信支付过程中碰到的问题，并提升支付功能的稳定性和用户体验。
6. 安全性和最佳实践

6.1 数据加密和署名机制

在实现uniapp微信支付的过程中，确保生意业务的安全性是至关重要的。以下是一些关键的安全步伐和最佳实践：

• 数据传输安全：使用HTTPS协议来加密客户端和服务器之间的全部通讯，确保传输的数据不被截获或篡改。
  
• 敏感信息掩护：对于敏感信息如支付金额、用户身份信息等，必须在服务器端举行处理，制止在客户端暴露。
  
• 署名机制：微信支付要求对支付请求举行署名，以确保请求的完整性和真实性。使用安全的署名算法（如RSA）对支付参数举行署名，并在服务器端举行验证。
  
• 密钥管理：支付密钥应该严格保密，而且定期更换。建议使用专门的密钥管理系统来存储和访问密钥。
  
• 订单状态验证：在支付完成后，通过微信提供的查询接口来验证订单状态，确保支付操作的准确性。
  
• 异常处理：实现美满的异常处理机制，对于支付过程中出现的任何异常环境都可以或许及时相应并妥善处理。
  
• 日志记录：记录详细的支付日志，包括请求和相应数据，以便在出现问题时举行追踪和分析。
  
• 合规性：确保支付流程符合相关法律法规和行业标准，例如PCI DSS（支付卡行业数据安全标准）。
  
• 前端安全：制止在前端JavaScript中硬编码任何支付相关的敏感信息，以防止XSS攻击等安全风险。
  
• 服务器安全：确保服务器安全，及时更新系统和应用程序的安全补丁，使用防火墙和入侵检测系统来防御埋伏的攻击。
  

通过实行上述步伐，可以在使用uniapp实现微信支付时，最大水平地掩护用户数据和生意业务安全。
   如果这篇文章对你有所帮助，欢迎点赞、分享和留言，让更多的人受益。感谢你的细心阅读，如果你发现了任何错误或须要增补的地方，请随时告诉我，我会尽快处理。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。