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

2019年03月22日 6,156 次阅读 75 条评论 9 人点赞

这是最近手上刚做的一个项目,基于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引入微信支付相关代码截图:

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


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

文章评论(75

  • 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
  • chen6802Lv 1

    有了吗?希望看看怎么弄得

    #32019-05-06 12:21
    • 阳阳博主

      @chen6802你需要那一块的代码,今天晚上我给你发截图参考!

      2019-05-06 13:34
    • chen6802Lv 1

      @阳阳好的谢谢你

      2019-05-06 13:35
    • 阳阳博主

      @chen6802晚上8点左右记得来博客找我一下。可能会忘记!!

      2019-05-06 13:36
    • chen6802Lv 1

      @阳阳我希望看看jssdk是怎么引入的

      2019-05-06 13:36
    • 阳阳博主

      @chen6802不好意思呃~~昨天家里停电,晚上10点多才通电,休息的早!!!

      2019-05-07 09:02
  • chen6802Lv 1

    好的,谢谢

    #22019-04-29 16:25
  • chen6802Lv 1

    你好可以发个视频教程吗?不知道怎么接入第三方jssdk

    #12019-04-29 10:09
    • 阳阳博主

      @chen6802待网站域名新备案通过后,我会在节后整理一下,然后发布出来!

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