当前位置：首页 > news >正文

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

news 来源：原创 2024/9/20 10:54:55

最近开发的一个微信小程序的项目结束了，里面用到了支付相关的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) {// 发起网络请求获取openiduni.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'},success: function(res) {// 调用微信支付接口wx.requestPayment({timeStamp: res.data.timeStamp,nonceStr: res.data.nonceStr,package: res.data.package,signType: res.data.signType,paySign: res.data.paySign,success: function(res) {console.log('支付成功', res)},fail: function(res) {console.log('支付失败', res)}})}
})

以上流程是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核心参数：

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

3.1.2 通过JSAPI发起支付

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

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

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

function wxpay(data) {if (typeof WeixinJSBridge == "undefined") {if (document.addEventListener) {document.addEventListener('WeixinJSBridgeReady', onBridgeReady(data), false);} else if (document.attachEvent) {document.attachEvent('WeixinJSBridgeReady', onBridgeReady(data));document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(data));}} else {onBridgeReady(data);}
}function onBridgeReady(data) {WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId": data.appId, //公众号"timeStamp": data.timeStamp, //时间戳"nonceStr": data.nonceStr, //随机串"package": data.package, //prepay_id"signType": data.signType, //微信签名方式RSA"paySign": data.paySign //微信签名},function(res) {// 支付成功if (res.err_msg == "get_brand_wcpay_request:ok") {// 使用以上方式判断前端返回,微信团队郑重提示：//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。}// 支付过程中用户取消if (res.err_msg == "get_brand_wcpay_request:cancel") {}// 支付失败if (res.err_msg == "get_brand_wcpay_request:fail") {}/** * 其它* 1、请检查预支付会话标识prepay_id是否已失效* 2、请求的appid与下单接口的appid是否一致* */if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {}});
}

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

4. App内微信支付实现

4.1 App微信支付流程

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

登录获取OpenID：首先，需要调用微信登录接口uni.login获取用户授权的code，然后通过后端接口使用code换取用户的OpenID。

uni.login({provider: "weixin",success: function(event){const {openid, access_token} = event.authResult;// 获取用户信息uni.getUserInfo({provider: 'weixin',success: function(info) {// 获取用户信息成功, 调用后端接口进行完成登录}})},fail: function (err) {// 登录授权失败// err.code是错误码}
})

  
- **创建订单获取订单ID**：登录成功后，需要调用后端接口创建订单，并获取订单ID。```javascriptuni.request({url: '后端接口地址,获取订单id',method: 'POST',data: { 传入接口需要的参数,如商品金额,商品个数等 },success(res) {console.log(res.data.orderId)}})

获取支付核心参数：调用后端接口获取支付核心参数，包括时间戳、随机字符串、预支付交易会话标识（prepay_id）、签名算法和签名。

uni.request({url: '后端接口地址,获取支付核心数据',method: 'POST',data: { 传入接口需要的参数,如订单ID等 },success(res) {console.log(res.data)// 接口会返回以下核心参数// timeStamp 时间戳// nonceStr 随机字符串// package 统一下单接口返回的 prepay_id 参数值// signType 签名算法// paySign 签名}
})

发起支付：使用uni.requestPayment方法发起支付，传递支付核心参数。

uni.requestPayment({provider: 'wxpay',orderInfo: data.orderInfo, // 微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】nonceStr: data.noncestr,package: data.package,timeStamp: data.timestamp,signType: data.signType,paySign: data.paySign,success: function (res) {if (e.errMsg == "requestPayment:ok") {console.log('支付成功')}else{console.log('支付失败')}},fail: function (err) {console.log('支付失败:' + JSON.stringify(err));}
});

4.2 使用uni.requestPayment进行支付

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

参数准备：在调用uni.requestPayment之前，需要准备好支付所需的参数，包括服务提供商（provider）、订单信息（orderInfo）、时间戳（timeStamp）、随机字符串（nonceStr）、预支付交易会话标识（package）、签名算法（signType）和签名（paySign）。

调用支付接口：使用uni.requestPayment方法发起支付请求，并传入准备好的参数。

uni.requestPayment({provider: 'wxpay',orderInfo: data.orderInfo,nonceStr: data.noncestr,package: data.package,timeStamp: data.timestamp,signType: data.signType,paySign: data.paySign,success: function (res) {if (res.errMsg == "requestPayment:ok") {console.log('支付成功');} else {console.log('支付失败');}},fail: function (err) {console.log('支付失败:' + JSON.stringify(err));}
});

处理支付结果：在支付成功后，可以通过回调函数中的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语句在代码中设置断点，进行逐步调试。
- 检查网络请求和响应，使用浏览器的开发者工具查看详细的请求和响应数据。
- 对于跨平台问题，使用条件编译和运行时检查来确保代码的正确执行。