关于uni-app开发H5项目用到的微信支付业务的代码

2019年03月22日 12,087 次阅读 97 条评论 13 人点赞

这是最近手上刚做的一个项目,基于uni-app开发的h5项目,在使用微信支付时遇到了不少问题,并且在uni-app论坛查阅了不少资料,基本没有任何有用且有价值的信息能够参考!H5既然用到支付肯定还是走的微信JSAPI,但使用上肯定会有一些问题。这里我把整个代码发出来,希望对你有用,如果你遇到此类问题,请留言!

最近整个3月份也比较忙,一遍忙手里的项目,还要两地跑,所以博文更新不及时,还请谅解!

关于演示地址,考虑到这个项目暂时还没有完全上线,暂时不公布演示地址,但对于支付这块已经测试无任何问题。

PHP支付SDK选用:

github开源项目:https://github.com/zoujingli/wechat-php-sdk

微信支付js选用:

https://github.com/zhetengbiji/jweixin-module

遇到的问题:

ios手机端在微信浏览器上只会记录首次进入的页面的url,所以调微信支付时导致域名不对,提示“当前URL未注册”的错误,支付失败
解决办法: 

原因: vue-router无论是hash模式还是历史模式在ios微信浏览器中进入哪个页面复制链接或选择safari打开都是第一次进入的那个页面;

去created()方法中执行replace()重定向操作:如图

其他代码整理中...整理后会更新发布.

uni-app引入微信支付相关代码截图:

注意:打包的代码仅做为参考,基本能解决你的疑问。如果有其他问题,请及时回复留言!


讲梦想、讲奋斗可以,前提是钱要给够。

文章评论(97

  • 华华华华华Lv 1

    按照楼主的方法,一直显示支付验证签名失败,但是后台返回都是有值得,2次签名加密都是用的MD5

    #132020-05-19 16:04
    • 阳阳博主

      @华华华华华验签失败跟这里没有太大关系吧

      2020-05-19 16:05
    • 华华华华华Lv 1

      @阳阳大佬,意思我的环境是通的了,是签名的问题?
      还有一个问题:
      我按照纯js写法,给每个参数传值,怎么也调用不起来支付页面: 方法如下
      jweixin.ready(function() {
      jweixin.checkJsApi({
      jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
      success: function(res) {
      console.log('checkjsapi Success')
      console.log(res);
      },
      fail:function(res) {
      console.log('res')
      console.log(res);
      }
      })

      2020-05-20 08:12
    • 华华华华华Lv 1

      @阳阳jweixin.chooseWXPay({
      timestamp: self.rtData.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
      nonceStr: self.rtData.nonceStr, // 支付签名随机串,不长于 32 位
      package: self.rtData.packageValue, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=***)
      signType: 'MD5', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
      paySign:self.rtData.paySign, // 支付签名
      success:function(res) {
      // 支付成功后的回调函数

      console.log('paysuccess')
      console.log(res)
      var route = 'payResult' + '?type=1'
      uni.navigateTo({
      url:route
      });

      2020-05-20 08:14
    • 阳阳博主

      @华华华华华第一你要看你的后端API调起h5支付是通过js来发起还是通过自带的WeixinJSBridge进行支付。

      2020-05-20 08:52
    • 华华华华华Lv 1

      @阳阳
      这个我的低吗,后台获取的JSON(对应参数都是可以获取的),然后用您的方法(直接传入JSON),就报错(但是二次签名对比是对的),后面的方法直接传值,页面不调用!

      2020-05-20 12:49
    • 华华华华华Lv 1

      @阳阳
      这个我的低吗,后台获取的JSON(对应参数都是可以获取的),然后用您的方法(直接传入JSON),就报错(但是二次签名对比是对的),后面的方法直接传值,页面不调用!

      2020-05-20 12:49
    • 华华华华华Lv 1

      @华华华华华解决了。换成这个方法就OK。不是签名的问题!这是服了!

      2020-05-20 15:54
    • 阳阳博主

      @华华华华华昨天不是已经给你说过了么?你要看你用的sdk支持那种支付方式。H5和JSAPI有2种支付方式的。

      2020-05-21 11:21
  • 13182337320Lv 1

    博主 我想问下 为什么ios可以正常支付 安卓的 一直报 当前的url未注册

    #122020-03-25 13:34
    • 阳阳博主

      @13182337320我遇到的问题跟你的正好相反,安卓正常,ios会提示 当前的url未注册,文章里已经提出如何解决这个问题了。

      2020-03-25 14:17
    • 13182337320Lv 1

      @阳阳好无奈啊 这个到底是个什么情况啊 而且我的不带# 截取的 都是 大于 -1的

      2020-03-25 14:59
    • 阳阳博主

      @13182337320打印日志看下url是什么

      2020-03-25 15:00
    • 13182337320Lv 1

      @阳阳 好了 加这个就行了

      2020-03-25 15:46
    • 阳阳博主

      @13182337320嗯嗯,解决问题就好啦~~~

      2020-03-25 15:47
  • 乘风Lv 1

    博主,请问你使用uni-app 做wx开发,是怎么进行调试的?
    我现在的方法是:每一次修改都要发布一遍,然后将发布后的代码,复制粘贴到已经做好内网穿透的nginx服务器上,再把访问地址发到wx上,进行访问。
    我的天呐~你也是怎么进行开发调试的?

    #112020-01-02 10:53
    • 乘风Lv 1

      @乘风我自己将评论发出来之后,突然就想明白了。我上面的问题已解决!
      ps: 博主你这篇文章,对我有帮助,感谢!

      2020-01-02 11:05
  • Chinese_LyjLv 1

    你好,我想问下,获取用户的openid是你提前获取的还是创建订单的时候才获取的?

    #102019-12-31 14:34
    • 阳阳博主

      @Chinese_Lyj用户第一次通过微信授权登录时就会获取的呢。

      2019-12-31 14:35
    • Chinese_LyjLv 1

      @阳阳上面贴出来的代码,微信浏览器和非微信浏览器都适用吗?

      2019-12-31 14:45
    • 阳阳博主

      @Chinese_Lyj适用于微信中访问使用

      2019-12-31 14:46
    • Chinese_LyjLv 1

      @阳阳明白了,非常感觉解惑

      2019-12-31 14:48
  • pirespiresLv 1

    我需要代码

    #92019-08-01 22:10
    • 阳阳博主

      @pirespires什么代码?文章区和评论区的代码可以随意翻阅!

      2019-08-02 09:02
  • 18362161496Lv 1

    @博主可以给个代码么,刚学uni-app,公司老大让做h5微信支付,一脸懵逼,崩溃中

    #82019-08-01 15:28
    • 阳阳博主

      @18362161496代码已经在这里了呀,你还要什么代码哦!

      2019-08-01 15:30
    • 派大星Lv 1

      @阳阳博主大大,这边不需要对接后台的接口,全部由h5去实现么

      2019-08-01 16:00
    • 阳阳博主

      @派大星肯定需要后台的接口呀,获取签名,支付都是调用的后端接口的呀。

      2019-08-01 16:02
    • 派大星Lv 1

      @阳阳哦哦,这样啊,好吧,之前我用js写过设置分享头像和标题的,应该原理一样吧,博主这边有uni-app的教学视频么,我买,我买,我感觉我快要被公司开了

      2019-08-01 16:05
    • 阳阳博主

      @派大星没有教学视频,仅仅是用uni-app做过几个项目。

      2019-08-01 16:06
    • 派大星Lv 1

      @阳阳好吧,geisign这个方法中应该和支付无关吧,只是获取了签名等信息吧,第三张图的那个order是什么

      2019-08-01 16:09
    • 阳阳博主

      @派大星代码中均加了注释!

      2019-08-01 16:11
    • 派大星Lv 1

      @阳阳博主,为什么我引入那个wx模块的时候总是 提示找不到text那个文件

      2019-08-01 16:50
    • 阳阳博主

      @派大星检查你引入的代码和引入方式。

      2019-08-01 16:52
    • 派大星Lv 1

      @阳阳 后面跟项目的路径对么,博主

      2019-08-01 16:57
    • 派大星Lv 1

      @阳阳找到问题了,引入文件夹错了,谢谢博主

      2019-08-01 17:01
    • 派大星Lv 1

      @阳阳再问博主最后一个问题哈,这个在微信客户端外的浏览器能唤起微信支付么

      2019-08-01 17:12
    • 阳阳博主

      @派大星原则上微信支付是支持H5发起支付的。

      2019-08-01 17:13
    • 派大星Lv 1

      @阳阳博主,created这个方法跳转的页面是什么页面,pay页面是自己写的支付页面么

      2019-08-01 17:29
  • 小学僧Lv 3

    为什么调用chooseWXPay这个方法不生效

    #72019-06-18 16:49
    • 阳阳博主

      @小学僧wx模块引入正确吗?

      2019-06-18 16:49
    • 小学僧Lv 3

      @阳阳import wx from '../../common/index.js';这种方式引入的

      2019-06-18 16:50
    • 阳阳博主

      @小学僧没尝试过这种引入方式,但我的截图第一张就是没有问题的引入方式。你可以尝试下。

      2019-06-18 16:51
    • 小学僧Lv 3

      @阳阳引入是可以的我config方法和ready方法都进去了
      就只有chooseWXPay这个方法没进入

      2019-06-18 16:55
    • 阳阳博主

      @小学僧config.jsApiList 里设置chooseWXPay了吗?

      2019-06-18 16:57
    • 小学僧Lv 3

      @阳阳
      这种

      2019-06-18 17:00
    • 阳阳博主

      @小学僧我的代码基本都截图放出来了,无隐藏!能否参考我的代码仔细排查一下,或许你应该就知道问题了。

      2019-06-18 17:02
    • 小学僧Lv 3

      @阳阳是这个config方法要在调支付之前就配置好吗

      2019-06-18 17:05
    • 阳阳博主

      @小学僧config 是必须在调支付之前配置的,我看你截图的代码有点像纯js的写法,在uni-app的h5里我感觉这种写法似乎是有点小问题的。

      2019-06-18 17:08
    • 小学僧Lv 3

      @阳阳
      我的调试打印可以打印出来就是调不起来

      2019-06-18 17:19
    • 阳阳博主

      @小学僧手机上无法调起支付?那应该是jsapi签名参数包的问题。这种问题无法直观去分析问题呃~

      2019-06-18 17:25
    • 小学僧Lv 3

      @阳阳你的config里面的签名和下单的时候的签名是同一个吗

      2019-06-18 17:46
    • 阳阳博主

      @小学僧不是一个呀,config里的是获取JsApi使用签名,下单的是发起支付返回的签名参数

      2019-06-18 17:51
    • 小学僧Lv 3

      @阳阳 我把自己坑了

      2019-06-18 17:53
    • 阳阳博主

      @小学僧知道问题就好咯,坑自己也是一个学习过程~~

      2019-06-18 17:53
    • 小学僧Lv 3

      @阳阳谢啦博主

      2019-06-18 17:54
    • 小学僧Lv 3

      @小学僧博主我想问下你生成签名的那个参数url当前页面是这种吗
      你的支付授权目录怎么配置的

      2019-06-19 16:48
    • 小学僧Lv 3

      @阳阳回错地方了你看一下上面的问题

      2019-06-19 17:01
    • 小学僧Lv 3

      @小学僧 上面图片不清楚

      2019-06-19 17:03
    • 阳阳博主

      @小学僧支付授权目录是你程序支付页面的url,不是微信自身的。我记得在uni-app官方论坛发帖的时候截图了的。

      2019-06-19 17:03
    • 小学僧Lv 3

      @阳阳uni-app用服务器跑起来会拼接’/#/pages/目录/‘这种路径,那支付授权目录是不是也要在域名后加上这个路径

      2019-06-19 17:06
    • 阳阳博主

      @小学僧是的,不过要注意ios下“ios手机端在微信浏览器上只会记录首次进入的页面的url,所以调微信支付时导致域名不对,提示“当前URL未注册”的错误,支付失败”这个问题,我也在文章里说明了。

      2019-06-19 17:07
    • 小学僧Lv 3

      @阳阳但是这种你拼接了/#/pages/这种目录,支付授权目录添加不了啊,你uni-app部署后的连接跟我这种一样有/#/pages/这种目录吗?

      2019-06-19 17:11
    • 阳阳博主

      @小学僧我的h5项目路由好像就是这种/#/pages/路径的,所以在支付授权目录配置的时候也是这样配置的。

      2019-06-19 17:12
    • 小学僧Lv 3

      @阳阳我的这个页面拼接了参数,我配置支付授权目录的时候报红说未备案,你有遇到这种情况吗

      2019-06-19 17:17
    • 阳阳博主

      @小学僧未备案????你的域名备案了吗?

      2019-06-19 17:18
    • 小学僧Lv 3

      @阳阳备案了的,我用域名配置是可以的,加了/#/pages/支付路径,这种就说未备案

      2019-06-19 17:19
    • 阳阳博主

      @小学僧没有呀,我的授权目录配置就是这样的

      2019-06-19 17:22
    • 小学僧Lv 3

      @阳阳你这个链接拼接了参数吗

      2019-06-19 17:25
    • 阳阳博主

      @小学僧授权目录哦~~不是带参数的url~~你是不是还不明白哦!!

      2019-06-19 17:27
    • 小学僧Lv 3

      @阳阳我知道,我的意思是你这个pay/pay这个接口带参和不带参影响配置授权目录吗,因为我支付的那个接口拼接了产品的一些信息

      2019-06-19 17:29
    • 阳阳博主

      @小学僧这里是配置授权目录的呀,跟你参数没任何关系的呀。不配置这个授权目录,就无法发起支付请求的。这点你的搞清楚。。。

      2019-06-19 17:31
    • 小学僧Lv 3

      @阳阳就是授权的支付的目录是这个意思吧

      2019-06-19 17:33
    • 阳阳博主

      @小学僧你这理解没毛病。

      2019-06-19 17:51
    • 小学僧Lv 3

      @阳阳
      我说的就是这种情况,你怎么添加进去的

      2019-06-19 17:53
    • 阳阳博主

      @小学僧老铁,你能别加http吗????????

      2019-06-19 17:54
    • 小学僧Lv 3

      @阳阳卧槽,给自己一耳光

      2019-06-19 17:55
  • 小小小Lv 1

    同样请问是怎样引入第三方jssdk的啊

    #62019-05-13 16:09
    • 阳阳博主

      @小小小截图代码第一张就是引入第三方的jssdk。

      2019-05-13 16:10
    • 小小小Lv 1

      @阳阳在里面只有一个index.js文件吗,我也是做的支付功能,一直调不起微信的支付界面

      2019-05-13 16:12
    • 阳阳博主

      @小小小是的,我是把jweixin-module 放在我自己定义的common文件夹下的,你是怎么放置的?引入后,hbuilderx工具有报错吗?

      2019-05-13 16:14
    • 小小小Lv 1

      @阳阳我也是放在common下的,引入后hbuilder没有报错,运行时打印出来的wx是{‘minProgram’:{}},1255182583这是我的qq,方便加一下,请教一下吗

      2019-05-13 16:17
    • 阳阳博主

      @小小小这会工作上还在忙点事情,无法远程协助!建议你仔细排查你的程序,或许你能发现问题!

      2019-05-13 16:20
    • 小小小Lv 1

      @阳阳嗯嗯,好的 谢谢

      2019-05-13 16:20
  • 毒药Lv 1

    学习了,楼主用心了!!!

    #52019-05-08 09:47
  • chen6802Lv 1

    现在有空了吗?

    #42019-05-07 11:05
    • 阳阳博主

      @chen6802公司电脑没有这个程序的源码,兄弟!!!

      2019-05-07 11:19
    • 阳阳博主

      @chen6802相关代码已截图更新,仅作为参考!

      2019-05-07 19:51
  • 接收回复邮件通知
    非注册会员初次评论需要审核,审核时间(09:00-18:00),请耐心等待...