蝙蝠岛资源网 Design By www.hbtsch.com
微信支付功能相比较支付宝支付,有点点繁琐,整理记录下来,以便日后所需
项目用VUE+EL搭建而成,支付用EL的radio来做的
<el-radio v-model="radio" label="weixin" > <i class="iconfont icon-weixin"></i> <div class="list"> <h5>微信支付</h5> <span>推荐安装最新版微信使用</span> </div> </el-radio> <el-radio v-model="radio" label="zhifubao"> <i class="iconfont icon-zhifubao"></i> <div class="list"> <h5>支付宝</h5> <span>推荐有支付宝账户的用户使用</span> </div> </el-radio>
坑来了。。。。
之前一直是前端请求后台接口,后台调取微信支付接口,但点击微信支付后一直提示跨域、重定向问题
就是这个坑,问了好多人,都在说是不是没有配置安全域名或接口白名单什么的,但后端真真的已经配置了,后来我们换了一种方法,由前端来提供code 授权成功之后,返回给后端
在mounted()获取code:
this.code = '' var local = window.location.href // 获取页面url var appid = '' this.code = getUrlCode().code // 截取code if (this.code == null || this.code === ''){ window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize"") != -1){ var str = url.substr(1) var strs = str.split("&") for(var i = 0; i < strs.length; i ++){ theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]) } } return theRequest };
然后再点击按钮中写判断了
methods:{ Compay(){ let radio_data = this.radio if(radio_data == 'weixin'){ if (this.code) { // 如果没有code,则去请求 this.$axios({ method: "post", url: "后台接口", params: {code: this.code} //将code传给后台,如果有其他参数需要传递,请一并传递 }).then((res)=>{ //调取微信支付 var that = this; function onBridgeReady(){ WeixinJSBridge.invoke("getBrandWCPayRequest",{ appId: res.data.appId, //公众号名称,由商户传入 timeStamp: res.data.timeStamp, //时间戳,自1970年以来的秒数 nonceStr: res.data.nonceStr, //随机串 package: res.data.package, signType: res.data.signType, //微信签名方式: paySign: res.data.paySign //微信签名sign }, function(res){ if (res.err_msg == "get_brand_wcpay_request:ok"){ alert('恭喜您,支付成功!') }else if(res.err_msg == "get_brand_wcpay_request:cancel"){ alert('支付失败!'); }else if (res.err_msg == "get_brand_wcpay_request:fail"){ alert('调起微信支付失败'); } } ); } onBridgeReady(); //微信支付 }) } }else if(radio_data == 'zhifubao'){ this.$axios.post('后台接口',data).then((res)=> { this.html = res.data var form= res.data; const div = document.createElement('div') //创建div div.innerHTML = form//此处form就是后台返回接收到的数据 document.body.appendChild(div) var queryParam = ''; Array.prototype.slice.call(document.querySelectorAll("input[type=hidden]")).forEach(function (ele) { queryParam += '&' + ele.name + "=" + encodeURIComponent(ele.value); }); var gotoUrl = document.querySelector("#alipaysubmit").getAttribute('action') + queryParam; _AP.pay(gotoUrl); //在微信中用浏览器跳转到支付宝支付 }) } } }
总结
以上所述是小编给大家介绍的Vue实现微信支付功能遇到的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
标签:
vue,微信支付
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无Vue实现微信支付功能遇到的坑的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年12月28日
2024年12月28日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]