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 &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
Javascript地址引用代码实例解析
Feb 25 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
农民和部队如何穿矿
2020/03/04 星际争霸
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
js实现上传并压缩图片效果
2018/01/10 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
python基于ID3思想的决策树
2018/01/03 Python
Python中将dataframe转换为字典的实例
2018/04/13 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
英语教师岗位职责
2014/03/16 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
Python借助with语句实现代码段只执行有限次
2022/03/23 Python