关于uni-app开发H5项目用到的微信支付业务的代码
这是最近手上刚做的一个项目,基于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)
我需要代码
@pirespires什么代码?文章区和评论区的代码可以随意翻阅!
@博主可以给个代码么,刚学uni-app,公司老大让做h5微信支付,一脸懵逼,崩溃中
@18362161496代码已经在这里了呀,你还要什么代码哦!
@阳阳博主大大,这边不需要对接后台的接口,全部由h5去实现么
@派大星肯定需要后台的接口呀,获取签名,支付都是调用的后端接口的呀。
@阳阳哦哦,这样啊,好吧,之前我用js写过设置分享头像和标题的,应该原理一样吧,博主这边有uni-app的教学视频么,我买,我买,我感觉我快要被公司开了
@派大星没有教学视频,仅仅是用uni-app做过几个项目。
@阳阳好吧,geisign这个方法中应该和支付无关吧,只是获取了签名等信息吧,第三张图的那个order是什么
@派大星代码中均加了注释!
@阳阳博主,为什么我引入那个wx模块的时候总是 提示找不到text那个文件
@派大星检查你引入的代码和引入方式。
@阳阳
后面跟项目的路径对么,博主
@阳阳找到问题了,引入文件夹错了,谢谢博主
@阳阳再问博主最后一个问题哈,这个在微信客户端外的浏览器能唤起微信支付么
@派大星原则上微信支付是支持H5发起支付的。
@阳阳博主,created这个方法跳转的页面是什么页面,pay页面是自己写的支付页面么
为什么调用chooseWXPay这个方法不生效
@小学僧wx模块引入正确吗?
@阳阳import wx from '../../common/index.js';这种方式引入的
@小学僧没尝试过这种引入方式,但我的截图第一张就是没有问题的引入方式。你可以尝试下。
@阳阳引入是可以的我config方法和ready方法都进去了
就只有chooseWXPay这个方法没进入
@小学僧config.jsApiList 里设置chooseWXPay了吗?
@阳阳
这种
@小学僧我的代码基本都截图放出来了,无隐藏!能否参考我的代码仔细排查一下,或许你应该就知道问题了。
@阳阳是这个config方法要在调支付之前就配置好吗
@小学僧config 是必须在调支付之前配置的,我看你截图的代码有点像纯js的写法,在uni-app的h5里我感觉这种写法似乎是有点小问题的。
@阳阳
我的调试打印可以打印出来就是调不起来
@小学僧手机上无法调起支付?那应该是jsapi签名参数包的问题。这种问题无法直观去分析问题呃~
@阳阳你的config里面的签名和下单的时候的签名是同一个吗
@小学僧不是一个呀,config里的是获取JsApi使用签名,下单的是发起支付返回的签名参数
@阳阳
我把自己坑了
@小学僧知道问题就好咯,坑自己也是一个学习过程~~
@阳阳谢啦博主
@小学僧博主我想问下你生成签名的那个参数url当前页面是这种吗
你的支付授权目录怎么配置的
@阳阳回错地方了你看一下上面的问题
@小学僧
上面图片不清楚
@小学僧支付授权目录是你程序支付页面的url,不是微信自身的。我记得在uni-app官方论坛发帖的时候截图了的。
@阳阳uni-app用服务器跑起来会拼接’/#/pages/目录/‘这种路径,那支付授权目录是不是也要在域名后加上这个路径
@小学僧是的,不过要注意ios下“ios手机端在微信浏览器上只会记录首次进入的页面的url,所以调微信支付时导致域名不对,提示“当前URL未注册”的错误,支付失败”这个问题,我也在文章里说明了。
@阳阳但是这种你拼接了/#/pages/这种目录,支付授权目录添加不了啊,你uni-app部署后的连接跟我这种一样有/#/pages/这种目录吗?
@小学僧我的h5项目路由好像就是这种/#/pages/路径的,所以在支付授权目录配置的时候也是这样配置的。
@阳阳我的这个页面拼接了参数,我配置支付授权目录的时候报红说未备案,你有遇到这种情况吗
@小学僧未备案????你的域名备案了吗?
@阳阳备案了的,我用域名配置是可以的,加了/#/pages/支付路径,这种就说未备案
@小学僧没有呀,我的授权目录配置就是这样的
@阳阳你这个链接拼接了参数吗
@小学僧授权目录哦~~不是带参数的url~~你是不是还不明白哦!!
@阳阳我知道,我的意思是你这个pay/pay这个接口带参和不带参影响配置授权目录吗,因为我支付的那个接口拼接了产品的一些信息
@小学僧这里是配置授权目录的呀,跟你参数没任何关系的呀。不配置这个授权目录,就无法发起支付请求的。这点你的搞清楚。。。
@阳阳就是授权的支付的目录是这个意思吧
@小学僧你这理解没毛病。
@阳阳
我说的就是这种情况,你怎么添加进去的
@小学僧老铁,你能别加http吗????????
@阳阳卧槽,给自己一耳光
同样请问是怎样引入第三方jssdk的啊
@小小小截图代码第一张就是引入第三方的jssdk。
@阳阳在里面只有一个index.js文件吗,我也是做的支付功能,一直调不起微信的支付界面
@小小小是的,我是把jweixin-module 放在我自己定义的common文件夹下的,你是怎么放置的?引入后,hbuilderx工具有报错吗?
@阳阳我也是放在common下的,引入后hbuilder没有报错,运行时打印出来的wx是{‘minProgram’:{}},1255182583这是我的qq,方便加一下,请教一下吗
@小小小这会工作上还在忙点事情,无法远程协助!建议你仔细排查你的程序,或许你能发现问题!
@阳阳嗯嗯,好的 谢谢
学习了,楼主用心了!!!
现在有空了吗?
@chen6802公司电脑没有这个程序的源码,兄弟!!!
@chen6802相关代码已截图更新,仅作为参考!
有了吗?希望看看怎么弄得
@chen6802你需要那一块的代码,今天晚上我给你发截图参考!
@阳阳好的谢谢你
@chen6802晚上8点左右记得来博客找我一下。可能会忘记!!
@阳阳我希望看看jssdk是怎么引入的
@chen6802不好意思呃~~昨天家里停电,晚上10点多才通电,休息的早!!!
好的,谢谢
你好可以发个视频教程吗?不知道怎么接入第三方jssdk
@chen6802待网站域名新备案通过后,我会在节后整理一下,然后发布出来!