VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • Vue实现微信支付功能遇到的坑

    建站教程 2019年11月09日 关键词:,,,

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

    项目用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?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实现微信支付功能遇到的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • springboot整合微信支付sdk过程解析
    • Android自定义View实现微信支付密码输入框
    • 微信小程序与webview交互实现支付功能
    • 微信小程序调用微信支付接口的实现方法
    • java实现微信支付结果通知
    • php对微信支付回调处理的方法
    • 快速对接payjq的个人微信支付接口过程解析

    广而告之:
    热门推荐:
    JS实现点击按钮可实现编辑功能

    具体代码如下所示: <script type="text/javascript"> //修改密码 //抓取到的数据 function edit() { document.getElementById("ps").style.display = "none"; document.getElementById("pw").style.display = ""; document.getElementById("of").style.display = ""; ···

    织梦DEDE利用键盘实现上一篇下一篇翻页效果,DEDE键盘翻页

    <script type="text/javascript" language="javascript"> <!-- document.onkeydown=nextpage; var prevpage='{dede:prenext get='pre'/}'; var nextpage='{dede:prenext get='next'/}'; var i···

    判断div滑动到底部的scroll实例代码

    实例如下所示: <!DOCTYPE html> <html> <head> <title>判断div滑到底部的代码</title> <script type="text/javascript" src="jquery-3.1.0.min.js"></script> <style type="text/css"> #scrollTest{ width:···

    vue-cli webpack模板项目搭建及打包时路径问题的解决方法

    这里建议刚学vue的同学第一个小案例不要使用vue-cli进行操作,待对基本的api使用的比较顺手了之后再进行vue-cli的体验比较好。本人是一名后端开发人员,接触前端时间不长,这里有说的不好的地方,还请大家评论建议下。 1. 安装必要的环境准备 首先我们要能够暗转node.js,这个环···

    HTML5画渐变背景图片并自动下载实现步骤

    drawBgLine.html 复制代码 代码如下: <!DOCTYPE html> <head> <meta charset="UTF-8"/> <title>html5画渐变背景图片,并自动下载</title> </head> <body> <center> <canvas id="c" width="1" height="···

    jqueryUI tab标签页代码分享

    本文实例为大家分享了jqueryUI tab标签页的具体代码,供大家参考,具体内容如下 var temp=1; var arr=["我的首页"]; //×号点击关闭li $("#tabs").delegate( ".ui-icon-close", "click", function() { var panelId = $( this ).closest( "li" ).remove().attr( "aria-co···

    Vue匿名插槽与作用域插槽的合并和覆盖行为

    Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。 仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽···

    利用PHP实现智能文件类型检测的实现代码

    使用文件后缀和MIME类型检测 通常我们想严格限制文件类型的时候,可以简单地用$_FILES['myFile']['type']  取得文件的 MIME类型然后来检测它是否是合法的类型。 或者我们可以取文件名的最后几个字符来获取文件后缀,不幸的是,这些方法并不足够,可以很容易地改变文件的···

    jquery鼠标悬停导航下划线滑出效果

    本文实例为大家分享了jquery鼠标悬停导航下划线滑出效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery鼠标悬停导航下划线滑出效果</title> <style> *{ margin:0; pad···

    CodeIgniter框架提示Disallowed Key Characters的解决办法

    打开ci框架的源码不难发现,在ci的核心input类中有这样一个函数: 复制代码 代码如下:function _clean_input_keys($str)    {        if ( ! preg_match("/^[a-z0-9:_\/-]+$/i", $str))     ···