早闻微信支付一直为移动开发者所诟病,这次公司项目新增微信支付需求,一试果然是一把辛酸泪,从配置到与后台调试真是一波三折,整整花了一天的时间才从坑里爬出来,效率也是低。所以有必要做下总结,日后再有微信支付,三两下便可完事。   因为公司项目是RN写的,我这边选用了目前在RN上使用较广泛的微信支付组件,基本上都封装好了,github直通车:react-native-wechat        我们只需要实现两步就可以调起微信支付:

  • 在应用启动的时候注册APPID
 WeChat.registerApp('appid');
复制代码
  • 在跳转到微信支付的点击事件中配置参数:
 wechat.isWXAppInstalled().then( ( isInstalled ) => {if ( isInstalled ) {       //判断手机是否有安装微信wechat.pay({partnerId: wxinfo.mch_id,  // 商家向财付通申请的商家idprepayId: wxinfo.prepay_id,   // 预支付订单nonceStr: wxinfo.nonce_str,   // 随机串,防重发timeStamp: result.data.time.toString()    ,  // 时间戳,防重发.package: 'Sign=WXPay',    // 商家根据财付通文档填写的数据和签名sign: result.data.sign        // 商家根据微信开放平台文档对数据做的签名}).then((requestJson)=>{//支付成功回调console.log("----微信支付成功----",requestJson);if (requestJson.errCode=="0"){//回调成功处理}}).catch((err)=>{toastShort('支付失败')})} else {toastShort( '没有安装微信软件,请您安装微信之后再试' );}} );
复制代码

以上就是react native调用微信支付的过程,使用的开源库已经帮我们封装好了其他的一些配置,用起来也是非常的方便。        接下来就是在手机上跑一遍,鲁迅说过:“新鲜事物第一次尝试就想要成功,几率还是很小的”。当我点击微信支付,期待着跳出熟悉的微信支付界面时,出现了令我失望的结果:屏幕闪了一下,然后,然后就没有然后了,what the f...,好,稳定下情绪,开始我的爬坑之旅。   首先,我先来到这个开源库的文档中寻找下是否有我遗漏的地方,在最后看到了一句话,仿佛看到了曙光:

在安卓机上测试的同学经常会遇到比如调用微信支付时闪一下就没了的问题,这个问题100%跟签名有关,请检查你的签名。 debug版本和release版本的签名是不同的,请注意

从这段话中,从100%这个字眼我读出了作者坚定的语气,自信的情感。于是我立马让运营小哥查看当时他申请微信支付用的签名,结果一对证,我c...,好,稳定下情绪,果然真是签名不对,当时给了一个dubug的签名,后面我让他换成release的签名,没换过来。好在微信开放平台是支持修改的,而且即时生效。这下应该没问题了吧。。。   不可能的,不存在的,前方路漫漫。。这时候我的心态还是很好的。   依然还是屏幕闪了一下,一只乌鸦带着省略号飞过。。所以说凡事不要说什么100%,接下来,继续我们的爬坑之旅。   排除了权限问题,包括appid,应用签名这些都确定无误,那么问题应该就出在调用微信支付的那些参数上,首先引起我的注意的是sign这个字段,于是来到了微信支付文档(使用第三方,最主要的还是要回归到文档中来),微信支付文档直通车:微信支付开发文档        简单描述下调用流程:

  • app端先调用自家后台的支付接口,把金额,支付类型等一些参数传过去
  • 后台收到这些参数,去调用微信服务端统一下单接口,将金额,商户订单号等等这些传给微信服务端,这时候微信服务端返回成功或失败,成功会附带sign,prepay_id等参数给我们后台。
  • 后台再将微信返回的这些参数返给app端,也就是上文配置中传的那些参数。app端再把这些参数传给微信。整个过程是不是一(fei)气(chang)呵(dan)成(teng)

那么我们推测问题就出现在这些参数里,让我们一个一个来分析:

  • partnerId 商家ID,这个是申请微信支付的时候,微信分配的ID,直接获取后台返回即可,可以与运营小哥那边再核对下。
  • prepayId 预支付订单,微信服务端返给我们后台的订单,app端直接获取后台返回即可。
  • nonceStr 随机数,没什么好说的,直接获取后台返回即可。
  • timeStamp 时间戳,这是个要小心的地方,之前我们后台没给我返回这个字段,我自以为app端自己获取即时时间戳即可,直接 结果错了,必须使用后台给的时间戳。你说这个锅谁背,55开吧
  • package 文档上说直接写死即可,package: 'Sign=WXPay'
  • sign 这是个大咖,当然计算工作交给后台来做就行,网上看了几篇文章说屏幕一闪,有可能就是sign计算错误,后台小哥跟我讲这个sign是微信返给他的,然后又直接返给我,emmmm,应该有点问题,再去文档看看:微信支付APP端开发步骤,里边第三部有四个字

商户服务器生成支付订单,先调用【统一下单API】生成预付单,获取到prepay_id后将参数再次签名传输给APP发起支付。以下是调起微信支付的

是的,就是这四个字“再次签名”,需要再次签名!!所以我又让后台小哥处理完sign在发给我。   到此,我们把这些参数都给分析了一遍过去,这次要再闪一下我就...我就再找找其他原因,但是事实上,我的app已经成功调起了微信支付,并且成功回调。   好了,这波总结进入尾声了,是不是觉得我写技术文章很啰嗦,就是啰嗦咋滴。不过说回来,还是总结下主题要义:

  • 检查你的APPID,应用签名是否正确
  • 检查你的参数传递是否正确(包括字段大小写),更多地与后台进行调试
  • 以上都确认OK了,重装你的微信再试一遍

React Native微信支付开发爬坑之旅相关推荐

  1. 微信小程序爬坑之旅(二)腾讯git代码仓库拉取问题和页面固定

    本来想写一下上一章提到的小程序 map 组件,但是我万万没想到啊,中间发现的问题我认为我需要在这里说一下 腾讯版本管理git仓库 腾讯的小程序编辑器是提供了一套代码管理的.在编辑器的右上角版本管理中, ...

  2. JSAPI微信支付开发流程和坑

    首先,我先简要说明一下微信支付开发的流程 众所周知,工欲善其事,必先利其器,微信官方推出了web微信开发工具,有windows.linux.版本的,根据自己的开发环境选择合适自己的,登陆公众平台--& ...

  3. PHP版本微信支付开发----电脑网站扫码支付(native)(心得、总结)

    早就听说微信支付比支付宝支付的坑多,但还得得该填的填,该绕的绕, 最终我们网站的微信支付功能成功上线啦♪(^ ∇ ^*) 首先自报家门,我的PHP版本是7,微信demo用的是php_sdk_v3.0. ...

  4. java开发NATIVE微信支付功能(下单)

    ** 谈NATIVE微信支付流程以及遇到坑 初次接触微信支付,内心万马奔腾,产品,客户一直催,微信支付文档也不知道怎么看,记录一下微信支付开发步骤,,,,,先解释微信支付流程!其他文档会给加密,解密, ...

  5. 公众号微信支付开发手记

    作者:wallimn 时间:2017-02-27 本人原创,欢迎转载,转载请保留本文链接.本文地址:http://wallimn.iteye.com/blog/2359379 花了两天时间,琢磨了一下 ...

  6. 微信支付开发准备工作和详细步骤

    微信支付前的准备工作 1 开发者资质认证 微信支付开发第一步就是使用公司管理者/高层帐号登录微信开放平台,进入"账号中心",进行开发者资质认证,需要填写公司资料,包括但不限于,公司 ...

  7. 工作笔记——微信支付开发相关知识整理

    在最近的工作中,引入了微信小程序支付,在开发过程中积累和整理了一些技术知识,现将其整理如下 目录 一.概念认识 (一)术语介绍 (二)名词解释 (四)对接微信支付接口规则整理 二.微信支付开发参考 ( ...

  8. 畅聊微信支付遇到的坑

    好久没更博了,甚是想念,工作的日子再也没有学校的那种悠闲,仕途一片迷茫,走一步看一步- 列出自己开发中微信遇到的坑 示例demo有坑爹的歧义 支付的回调操作 签名错误 示例demo有坑爹的歧义 刚接触 ...

  9. tp5.1微信支付开发系列(一)

    最近项目中需要使用到支付功能,自己研究了一下,顺便记录下 一.获取配置参数 1)微信文档中的接口参数我们需要先配置一下,首先在商户后台获取到key,加密验签需要. 2)获取 微信的商户号,APPID如 ...

最新文章

  1. 学界 | OpenAI 发布稀疏计算内核,更宽更深的网络,一样的计算开销
  2. 计算机专业英语06章在线测试,《计算机专业英语》第06章在线测试.doc
  3. java 18 -4 LinkedHashMap集合
  4. stateful set 学习笔记
  5. hdu 2072单词数
  6. Servlet的Cookie和Session机制
  7. 关于利用背景减除法的固定摄像头的移动侦测算法
  8. 名词解释isp_名词解释
  9. monthcalendar控件
  10. repo的安装和使用
  11. 无人机航测三维实景建模的价值
  12. 【第五章 | 存储器管理】《操作系统 慕课版》课后答案 + 复习
  13. 自我认知测试软件,自我认知-MBTI测试
  14. [转]银监会紧急澄清:二套房贷首付六成报道不实
  15. 51信用卡的日志分析变迁史和技术细节
  16. 友推SDK微信分享问题
  17. 模型的评估方法及错误率与精度
  18. 杜克大学计算机数据科学,杜克大学的数据科学专业解析
  19. Unity3D脚本手册
  20. zootracer使用说明——一款视频物体追踪软件,获取运动物体在屏幕坐标系的运动轨迹

热门文章

  1. boost::fusion::as_nview用法的测试程序
  2. ITK:图像区域重叠
  3. DCMTK:将轮廓数据添加到RT结构集中的测试程序
  4. VTK:几何对象之OrientedArrow
  5. Qt Creator寻找
  6. C语言用‘%20‘替换字符串中的所有空格的算法(附完整源码)
  7. C++N queensN皇后的优化算法(附完整源码)
  8. C语言递归算法将十进制转换为二进制(附完整源码)
  9. QT的QDtls类的使用
  10. mysql游标事例_MySQL游标语法实例