vue微信H5(微信公众号)实现微信支付功能

最近做了一个答题应用，甲方要求，用户进入应用先答题，最后点微信支付的时候，再授权，支付。

我的实现思路是点击微信支付按钮时，跳转到某个地址获取授权

redirect_uri 需要先在微信公众号后台支付授权目录里设置，需要跳转的路由，前台也应该存在
xxx/pay。由于支付目录不允许hash地址，vue路由模式需要设置为history模式

 handlePayMoney() {if (isWXBrowser) {window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXXXX&redirect_uri=http:www.beibei0.com/pay&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"}}参数    必填  说明
appid   是   公众号唯一标识
redirect_uri    是   授权后的回调链接地址
response_type   是   返回类型，code
scope   是   授权方式
state   否   重定向参数
connect_redirect    否   动态参数，=1 发一次请求
#wechat_redirect    是   重定向必带参数

// 判断是否微信环境
export const isWXBrowser = (() => {const ua = window.navigator.userAgent.toLowerCase()return /(micromessenger|webbrowser)/g.test(ua)
})()

点击按钮跳转后，路径上就拿到code值了。使用$route.query.code获取路径上的code值
然后拿到code值和订单信息，请求后台支付接口，后台会把支付信息返回来

 const params = {test_id: answer.test_id,Code: this.code}if (this.code) {handlePay(params).then(res => {const data = res.data.datawx.config({debug: false,                 //开启调试模式appId: data.appid,          //公众号的唯一标识timestamp: data.timestamp,    //生成签名的时间戳nonceStr: data.nonceStr,      //生成签名的随机串signature: data.signature,    //签名jsApiList: ['chooseWXPay']        //需要使用的JS接口列表//openTagList : ['wx-open-launch-weapp']});wx.ready(function () {wx.chooseWXPay({timestamp: data.timeStamp,  // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符nonceStr: data.nonceStr,  // 支付签名随机串，不长于 32 位package: data.prepay_id,  // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）signType: data.signType,  // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'paySign: data.paySign,        // 支付签名success: function (response) {// res.errMsg === 'chooseWXPay:ok'方式判断前端返回,微信团队郑重提示：// res.errMsg将在用户支付成功后返回ok，但并不保证它绝对可靠， 切记。if (response.errMsg == 'chooseWXPay:ok') {window.localStorage.setItem("order_no",res.data.data.order_no)window.location.href = `http:www.beibei0.com/resultPage`}},// 支付取消回调函数cancel: function () {Toast('用户取消支付')window.location.href = `http:www.beibei0.com/pay`},// 支付失败回调函数fail: function () {Toast('支付失败')window.location.href = `http:www.beibei0.com/pay`}});})})

遗憾的地方：
1、前台点按钮跳转redirect_uri，配置的是线上地址，需要打包上传服务器后测试（在支付目录增加配置本地地址应该可以）
2、wx.chooseWXPay 调起微信支付，需要在真机上测试
3、不知道什么原因，wx.chooseWXPay支付成功和失败，使用路由跳转页面，始终不成功，最后无奈选择window.location.href进行跳转
后续继续完善

vue微信H5(微信公众号)实现微信支付功能相关推荐

微信H5、公众号开发，域名重定向
一. 在公众号中绑定域名二.本地host映射域名文件地址:C:\Windows\System32\drivers\etc(vscode打开,地址.域名不可加端口号) 127.0.0.1 <域 ...
渗透测试-微信小程序-公众号测试经验总结
微信小程序-公众号测试微信公众号H5端微信公众号H5端限制手段及绕过方法: 1.未做限制使用其他浏览器可直接打开页面进行浏览 2.通过 UserAgent 来限制现象:使用其他浏览器打开后会 ...
微信公众号：微信H5页面JSAPI充值
微信公众号:微信H5页面JSAPI充值,遇到的一些坑,以及解决方式. 首先说一下微信充值分为很多种:目前我所涉及到的只是APP支付.H5支付.JSAPI支付. 区别: 1.根据不同场景 APP支付:是 ...
开源全平台版知识付费系统源码支持微信小程序+公众号+H5+PC端
分享一个开源全平台版知识付费系统源码,系统支持微信小程序+公众号+H5+PC端,一套系统实现全端数据及用户体系全面打通,轻松实现店铺全网一站式运营.含完整代码包和详细搭建教程. 系统支持视频课程.音频 ...
Shopro商城高级版 Fastadmin和Uniapp进行开发的多平台商城（微信公众号、微信小程序、H5网页、Android-App、IOS-App）
Shopro商城无加密的开源源码(可用于自营+外包项目(多主体).可用于外包定制开发项目) shopro 商城,一款基于 uni-app 的前端模板商城.目前适配了(小程序+app+h5+公众号). ...
Shopro商城,基于Fastadmin和Uniapp进行开发的多平台（微信公众号、微信小程序、H5网页、Android-App、IOS-App）购物商城
Shopro商城基于Fastadmin和Uniapp进行开发的多平台(微信公众号.微信小程序.H5网页.Android-App.IOS-App)购物商城,拥有强大的店铺装修.小程序直播.自定义模板. ...
springboot+h5页面+微信公众号获取微信用户信息
springboot项目,h5页面通过微信公众号获取微信用户信息最近本人有一个项目需求,微信公众号里点击一个菜单进入一个商城购物系统. 对于在微信公众号还是小白的我来说难度有点大,但是做完后发现也就 ...
怎么从H5广告页内复制微信号直接调起微信客户端关注公众号
外部H5页面内实现关注公众号的微信JSSDK没有相关接口开放,因此就得动点脑筋来实现该功能了.下面的方法就是通过一种非常蹊跷的方式实现的. 首先,需要在公众号内发表一篇原创文章,注意是原创文章,然后由 ...
php公众号获取code,微信开发系列——公众号内嵌H5页面获取code，拿到openID
如果在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 我们要进行授权,先要经过用户授权(静默授权和授权页弹出授权两种,具体看文档中scope解析)拿 ...
HTML5微信支付和微信公众号内微信支付(VUE)
实现html5微信支付以及微信公众号内微信支付微信公众号内微信支付首先进行微信授权获取code /*获取授权拿到code*/getCodeApi(state){//获取codelet urlNow ...

vue微信H5(微信公众号)实现微信支付功能

vue微信H5(微信公众号)实现微信支付功能相关推荐

最新文章

热门文章