uni-app实现微信支付流程 uni-app调用小程序支付接口代码

夜婷姑娘_3876

夜婷姑娘_3876

2026-05-27

505人浏览

原创

uni-app调用wx.requestpayment前必须由后端调用/unifiedorder接口获取prepay_id并签名返回,前端需严格按签名字段(appid、timestamp字符串、noncestr、package="prepay_id=xxx"、signtype、paysign)原样传入,且真机需校验appid绑定与支付目录配置,success回调不等于支付成功,须以微信服务端异步通知为准。

uni-app实现微信支付流程 uni-app调用小程序支付接口代码

uni-app调用wx.requestPayment前必须先获取prepay_id

微信小程序支付不是直接传金额就能唤起支付,uni.requestPayment 只负责拉起支付界面,真正的支付凭据(prepay_id)必须由后端签名后返回。前端若跳过这步、自己拼接 timeStamp 或 paySign,必然失败——微信校验的是服务端用商户私钥对统一下单返回数据的二次签名。

常见错误现象:requestPayment:fail invalid sign 或 支付验证失败,请稍后重试,基本都是前端试图自己算签名,或后端没按微信文档要求对 appId、timeStamp、nonceStr、package、signType 五字段做字典序拼接再签名。

  • 后端必须调用微信 /pay/unifiedorder 接口,传入 trade_type=JSAPI(小程序场景),并确保 openid 正确(需用用户在当前公众号/小程序的 openid,不能混用)
  • 后端返回给前端的数据结构里,必须包含 appId、timeStamp(字符串格式的秒级时间戳)、nonceStr、package(固定为 prepay_id=xxx)、signType(推荐 MD5 或 HMAC-SHA256)、paySign
  • timeStamp 必须是字符串,不是数字;package 的值必须严格为 prepay_id=xxx,多空格、少等号、带引号都会导致签名失败

uni.requestPayment参数必须与后端签名字段完全一致

哪怕后端签名时用了 nonceStr,前端传入 nonceStr 就必须是同一个值;timeStamp 同理。不一致会导致微信端验签失败,错误提示常为 invalid signature 或静默失败。

实操建议:后端把签名所需全部字段(包括 appId、timeStamp、nonceStr、package、signType、paySign)一次性返回给前端,前端原样透传,不要重新生成或格式化任何字段。

  • 调用示例(注意所有字段名大小写、类型、值格式):
uni.requestPayment({
  provider: 'wxpay',
  orderInfo: {
    appId: res.appId,
    timeStamp: res.timeStamp, // 字符串,如 "1715823496"
    nonceStr: res.nonceStr,
    package: res.package, // 如 "prepay_id=wx1234567890"
    signType: res.signType, // 如 "MD5"
    paySign: res.paySign
  },
  success: (res) => {
    console.log('支付成功', res)
  },
  fail: (err) => {
    console.error('支付失败', err)
  }
})

注意:orderInfo 是 uni-app 特有字段名,不是微信原生字段;内部字段名(如 timeStamp)必须与微信要求完全一致(驼峰、大小写敏感)。

微信公众号文章生成技能(专业版)
微信公众号文章生成技能(专业版)

name wechat-article-writer-pro description 微信公众号文章完整生成技能(专业版)。输入主题即自动完成:信息调研、文章撰写(含章节配图)、5个备选爆款标题、封面图生成、带格式排版的DOCX文档输出。触发词:写公众号文章、生成公众号内容、做微信推文、公众号文章完整版。 agent_created true 微信公众号文章完整生成技能(专业版) 概述 本技能提供微信公众号文章从主题到成品的完整生成流程,在基础版之上增加:章节配图、DOCX 格式输出(含彩色重点文字和表格

下载

真机调试时务必检查 AppID 和支付目录配置

开发工具能调起支付不代表真机能行。最常被忽略的两点:appid 是否与微信开放平台绑定的小程序一致;支付目录是否在微信支付商户平台「产品中心 → 开发配置」中正确填写。

  • 支付目录必须精确到页面路径(如 https://yourdomain.com/pages/pay/index),且协议、域名、路径全部匹配(末尾斜杠也要一致)
  • 如果用的是 uni-app 的 H5 模式,微信支付不可用——uni.requestPayment 在 H5 下 provider 为 alipay 或其它,wxpay 仅在微信小程序、App(iOS/Android 微信内置浏览器)环境有效
  • 云函数或代理接口若跨域,需确保后端已配置 Access-Control-Allow-Origin,否则 prepay_id 获取请求会因 CORS 失败

支付回调逻辑不能只依赖 success 回调

uni.requestPayment 的 success 仅表示用户点击了“确认支付”并输入密码(或指纹),不代表扣款成功。网络中断、用户取消、银行侧失败等情况都可能让前端收不到结果,但后端已收到微信异步通知。

真正可靠的支付完成状态,必须以你服务器收到微信 https://yourdomain.com/pay/callback 的 POST 通知为准,并校验 sign 和 return_code/result_code。前端可轮询订单状态,或等 WebSocket 推送,但绝不能把 requestPayment success 当作最终支付成功。

容易被忽略的点:fail 回调里包含 errCode: 3003(用户取消)、errCode: 3002(支付失败),但这些只是客户端视角;微信后台仍可能在几秒后发出支付成功的通知,所以前后端状态必须以服务端通知为准。

相关文章

微信app下载
微信app下载

微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!

下载

相关标签:

uni-app 微信 微信支付

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2643

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5743

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6730

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6438

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

923

5

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

2026.10.22

20

11

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

2026.10.22

20

10

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

2026.10.22

20

15

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

2026.10.22

0

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习