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 相关文章推荐
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
javascript数组详解
2014/10/22 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
Python中的TCP socket写法示例
2018/05/11 Python
详解python数据结构和算法
2019/04/18 Python
python远程邮件控制电脑升级版
2019/05/23 Python
使用python实现简单五子棋游戏
2019/06/18 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
python中time包实例详解
2021/02/02 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
网络优化专员求职信
2014/05/04 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
开业庆典致辞
2015/08/01 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python