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 基础知识 被自己遗忘的
Oct 15 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
Angular2自定义分页组件
Apr 19 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
JS简易计算器实例讲解
Jun 30 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
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
详解KMP算法以及python如何实现
2020/09/18 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
自主招生自荐书
2013/11/29 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
2014年会策划方案
2014/05/11 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
教师听课学习心得体会
2016/01/15 职场文书
初中政治教学反思
2016/02/23 职场文书