Vue实现微信支付功能遇到的坑


Posted in Javascript onJune 05, 2019

微信支付功能相比较支付宝支付,有点点繁琐,整理记录下来,以便日后所需

项目用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>

坑来了。。。。

之前一直是前端请求后台接口,后台调取微信支付接口,但点击微信支付后一直提示跨域、重定向问题

Vue实现微信支付功能遇到的坑

就是这个坑,问了好多人,都在说是不是没有配置安全域名或接口白名单什么的,但后端真真的已经配置了,后来我们换了一种方法,由前端来提供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?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
     };
     
function getUrlCode(){
         var url = location.search
         // this.winUrl = url
         // alert(this.winUrl)
         var theRequest = new Object()
         if (url.indexOf("?") != -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实现微信支付功能遇到的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
JS实现数组删除指定元素功能示例
Jun 05 #Javascript
vue实现PC端录音功能的实例代码
Jun 05 #Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 #Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 #Javascript
js实现随机8位验证码
Jul 24 #Javascript
Vue中全局变量的定义和使用
Jun 05 #Javascript
详解express使用vue-router的history踩坑
Jun 05 #Javascript
You might like
PHP下MAIL的另一解决方案
2006/10/09 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
python计算圆周率pi的方法
2015/07/11 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
python路径的写法及目录的获取方式
2019/12/26 Python
python定义类self用法实例解析
2020/01/22 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
Ref与out有什么不同
2012/11/24 面试题
初三家长会邀请函
2014/01/18 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
幼师辞职信范文
2015/02/27 职场文书
大学生十八大感想
2015/08/11 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
交通事故协议书范本
2016/03/19 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python