React Native学习

React Native微信支付开发爬坑之旅(ErrCode:-

2017-11-04  本文已影响157人  cwzqf

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

 WeChat.registerApp('appid');
 wechat.isWXAppInstalled().then( ( isInstalled ) => {
       if ( isInstalled ) {       //判断手机是否有安装微信
           wechat.pay({
                 partnerId: wxinfo.mch_id,  // 商家向财付通申请的商家id
                 prepayId: 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这个字段,于是来到了微信支付文档(使用第三方,最主要的还是要回归到文档中来),微信支付文档直通车:微信支付开发文档
       简单描述下调用流程:

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

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

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

上一篇 下一篇

猜你喜欢

热点阅读