交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • Vue实现微信支付功能遇到的坑

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

    项目用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的个人微信支付接口过程解析

    广而告之:
    热门推荐:
    vscode调试django项目的方法

    这几天研究HUE,这个东西是基于Django开发的,于是又看了一眼Django,学着写个demo。微软开源的vscode在业界反应不错,以前也没用过,借着这次机会用用vscode,和pycharm比起来各有千秋,不过总体来说还是不错的。新工具各种不熟悉,连怎么调试都得研究研究,现在记录一下vscod···

    vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法

    目前大多数PC浏览器支持在线预览pdf文件,但大多数手机浏览器还未支持,尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料,在实现的过程中,还是走了比较多的弯路,最后采用了备受推荐的pdf.js插件来实现。 pdf.js可以从github上clone下来,然后本地g···

    JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例

    本文实例讲述了JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例。分享给大家供大家参考。具体如下: /** * JavaScript macro to run a chess game, showing board, pieces and moves played. * * Author: Todd Whiteman * Revision: 1.0 * Date: October 2012 */ va···

    jquery ajax 简单范例(界面+后台)

    界面: 复制代码 代码如下: <script> $(document).ready(function () { $("#b01").click(function () { htmlobj = $.ajax({ url: "/Content/upFile/测试.txt", async: false }); $("#div01").html(htmlobj.responseText); }); }); $(document).ready(function () {···

    js实现功能比较全面的全选和多选

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <input t···

    jquery图片放大功能简单实现

    复制代码 代码如下: <div class="jqzoom"> <img src="http://bfbnews.tw/images/test.jpg" id="bigImg" style="width:500px;height:300px;" jqimg="http://bfbnews.tw/images/test.jpg"> </div> <script src="//ajax.lug.ustc.edu.cn/ajax/libs/jque···

    w3c声明下可运行 兼容性比较好的js对联广告集合

    最后我们给出合适的代码:核心代码:复制代码 代码如下:lastScrollY=0; function heartBeat(){ var diffY; if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = d···

    PHP小白必须要知道的php基础知识(超实用)

    很多人看到PHP就以为是程序员,就以为钱很多(虽然是事实),但是也要考虑下自己是不是适合这一行,知道PHP是什么吗?PHP都有什么样的功能,都能用来干嘛? PHP是什么? •PHP(PHP: Hypertext Preprocessor,超文本预处理器的缩写),是一 种被广泛应用的开放源代码的···

    织梦DEDECMS5.7在列表页动态调用点击次数

    织梦DedeCMS中首页和列表页的文章点击次数默认情况下不是动态调用的,只有在更新的时候才会更新点击次数。           织梦DedeCMS中首页和列表页的文章点击次数动态调用解决办法如下:   在/plus 目录下找到count.php  复制一份 然后···

    asp.net使用npoi读取excel模板并导出下载详解

    为什么要使用NPOI导出Excel? 一、解决传统操作Excel遇到的问题: 如果是.NET,需要在服务器端装Office,且及时更新它,以防漏洞,还需要设定权限允许.NET访问COM+,如果在导出过程中出问题可能导致服务器宕机。Excel会把只包含数字的列进行类型转换,本来是文本型的,Ex···