关于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引入微信支付相关代码截图：
注意：打包的代码仅做为参考，基本能解决你的疑问。如果有其他问题，请及时回复留言！
您的一次评论就是对本站点的小小支持.
文章评论（82）
博主，请问你使用uni-app 做wx开发，是怎么进行调试的？
我现在的方法是：每一次修改都要发布一遍，然后将发布后的代码，复制粘贴到已经做好内网穿透的nginx服务器上，再把访问地址发到wx上，进行访问。
我的天呐~你也是怎么进行开发调试的？
@乘风我自己将评论发出来之后，突然就想明白了。我上面的问题已解决！
ps: 博主你这篇文章，对我有帮助，感谢！
你好，我想问下，获取用户的openid是你提前获取的还是创建订单的时候才获取的？
@Chinese_Lyj用户第一次通过微信授权登录时就会获取的呢。
@阳阳上面贴出来的代码，微信浏览器和非微信浏览器都适用吗？
@Chinese_Lyj适用于微信中访问使用
@阳阳明白了，非常感觉解惑
我需要代码
@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点多才通电，休息的早！！！
好的，谢谢