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

(0)

相关推荐

  • 在vue中获取微信支付code及code被占用问题的解决方法

    这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取本网址,截取code: 在vue中哪里获取code? 在路由钩子函数beforeEach获取.(如果想了解beforeEach的用法,请关注我下一篇博客). 我们去请求微信网址"https://open.weixin.qq.com/connect/oauth2/authorize?appid=&qu

  • vue.js 微信支付前端代码分享

    实例如下所示: onBridgeReady: function () { const openId = localStorage.getItem('openId') payService.payment(this.$route.params.orderId, 1, openId).then(rt => { //1:支付类型,可不填 this.message = rt.t WeixinJSBridge.invoke( 'getBrandWCPayRequest', { 'appId': this.

  • 详解用vue.js和laravel实现微信支付

    注:此项是微信公众号开发,请在往下看之前,先实现网页微信授权登陆功能,具体参看我简书的另一篇文章:http://www.jb51.net/article/117004.htm 1.打开app/config/wechat.php,配置微信支付参数: /* * 微信支付 */ 'payment' => [ 'merchant_id' => env('WECHAT_PAYMENT_MERCHANT_ID', 'your-mch-id'),//商家号ID,请将其放在.env文件中 'key' =>

  • Vue实现微信支付功能遇到的坑

    微信支付功能相比较支付宝支付,有点点繁琐,整理记录下来,以便日后所需 项目用VUE+EL搭建而成,支付用EL的radio来做的 <el-radio v-model="radio" label="weixin" > <i class="iconfont icon-weixin"></i> <div class="list"> <h5>微信支付</h5> &l

  • ThinkPHP框架下微信支付功能总结踩坑笔记

    本文实例讲述了ThinkPHP框架下微信支付功能总结.分享给大家供大家参考,具体如下: 摘要 此文主要为个人解决 ThinkPHP3.2.3 下微信支付所遇到的一些坑的解决方案,仅供参考 详情请参考 原文 : 微信公众平台开发教程之ThinkPHP框架下微信支付功能 踩坑记录 为便于参考,此处附录部分 weixinpay.class代码截图 ①. 验证不严谨,损失教训 补充时间:[2017-01-02] 情况描述 [我尊重你,但不认同你] 恰逢元旦期间,遭到微信支付被大牛攻破的情况,损失近 80

  • Android编程实现的微信支付功能详解【附Demo源码下载】

    本文实例讲述了Android编程实现的微信支付功能.分享给大家供大家参考,具体如下: 最近公司弄Ionic框架,项目中需要微信支付,无奈,把我调过去弄,期间也是几近崩溃,好在皇天不负有心人,在看别人的文档,终于是在项目中集成了微信支付,下面作为一个小白的我,想要把我的经验分享给大家,希望对大家有所帮助. 先给一个可用的demo吧(运行前先看txt文件) demo代码点击此处本站下载. 这个demo是基于eclipse开发的,博主也在Android Studio开发过微信支付,原理都是一样的,大家

  • 微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解

    本文实例讲述了ThinkPHP框架下微信支付功能.分享给大家供大家参考,具体如下: 声明:原文主要摘自白俊遥博客 ,部分内容针对个人事例已作修改,主要用于自己的参考,欢迎指正. 注意:微信公众号支付,强烈建议使用外网可访问的链接测试,否则即便代码正确也无法调出支付界面,可使用草料二维码生成可扫描图片,也可直接在微信中输入网址. 使用框架:ThinkPHP 3.2.3 一.微信公众平台信息配置 1).进入微信公众平台 由左侧的"微信支付"进入配置界面,添加或修改正确的支付授权目录,注意该

  • PHP实现 APP端微信支付功能

    前面已经写了手机APP支付宝支付,今天再把手机APP微信支付补上,前期的准备工作在这里就不多说了,可以参考微信支付开发文档,一定要仔细阅读开发文档,可以让你少踩点坑:准备工作完成后就是配置参数,调用统一下单接口,支付后异步回调三部曲啦: 1.我封装好的一个支付类文件,多余的东西都去除掉了,并且把配置参数放到了这个支付类中,只需要修改Weixinpayandroid方法内的几个参数就可以直接复制使用: class Wxpayandroid { //参数配置 public $config = arr

  • 小程序通过小程序云实现微信支付功能实例

    目录 一.开通微信支付 1.1 关联商户号 1.2 添加商户号 1.3 管理员授权 二.云函数开发 2.1 新建云函数 2.2 云函数代码 2.3 云函数上传并部署 三.小程序调用 3.1 统一下单 3.2 支付成功回调 一.开通微信支付 1.1 关联商户号 \微信公众号平台\功能\微信支付\商户号管理\关联商户号 1.2 添加商户号 \云开发平台\设置\其他设置\微信支付配置\添加商户号 1.3 管理员授权 1.2那张图上,点击授权.管理员的微信就会跳出提示,点击确定授权即可. 否则使用的时候

  • IOS 集成微信支付功能的实现方法

    IOS 集成微信支付功能的实现方法 第一步:集成微信的SDK https://pay.weixin.qq.com/wiki/doc/api/index.html 点击进入 下载对应SDK或示例,最后可以看看示例程序 第二步:在Xcode中填写微信开放平台申请的Appid Xcode>info>URL Types  中新建加入Appid 第三步:在Appdelegate.m 中注册微信支付 和回调 #import "WXApi.h" 添加 代理 WXApiDelegate -

  • Python使用微信SDK实现的微信支付功能示例

    本文实例讲述了Python使用微信SDK实现的微信支付功能.分享给大家供大家参考,具体如下: 最近一段时间一直在搞微信平台开发,v3.37版本微信支付接口变化贼大,所以就看着php的demo移植为Python版,为了保持一致,所以接口方法基本都没有变,这样的好处就是不用写demo了,看着微信官方的demo照葫芦画瓢就可以了. 代码放到github下载地址:https://github.com/Skycrab/wzhifuSDK 还可以点击此处本站下载. 我主要测试了JsApi调用方式,其它的调用

  • JS通过调用微信API实现微信支付功能的方法示例

    本文实例讲述了JS通过调用微信API实现微信支付功能的方法.分享给大家供大家参考,具体如下: 最近在做微信公众号开发,在微信支付上遇到一些问题,困惑了3天,今天终于搞定.期间要感谢一些大神的帮助,趁热下面分享一下我的经验. 在实现微信支付之前,需要到微信开发平台认证,这些认证和配置信息我就不多说了,这里主要从代码层面实现支付. function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId&quo

  • Thinkphp整合微信支付功能

    先上效果图:我要告诉你我这一篇文章写的是微信支付之中的(普通商户而非服务商商户的统一下单JSPI)微信支付: 其实自己整合SDK失败了,用了一个博客博主整合的代码,在这里写一下笔记: 前面准备: 1.微信公众号: 独特的appid.appscrect.接口权限之中设置可以获取用户ID信息权限的域名(每个用户对于不同公众都会有一个特有ID,通过这个ID获取用户微信账号基本信息.详情看微信开发者文档).在微信支付按钮出设置微信支付授权目录(写到发起请求的控制器那一层).设置开发者微信账号为测试白名单

随机推荐