小編給大家分享一下Vue實(shí)現(xiàn)微信支付功能遇到的坑有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、路橋ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的路橋網(wǎng)站制作公司

項(xiàng)目用VUE+EL搭建而成，支付用EL的radio來做的

<el-radio v-model="radio" label="weixin" >
   <i class="iconfont icon-weixin"></i>
   <div class="list">
   <h6>微信支付</h6>
   <span>推薦安裝最新版微信使用</span>
   </div>
  </el-radio>
  <el-radio v-model="radio" label="zhifubao">
   <i class="iconfont icon-zhifubao"></i>
   <div class="list">
   <h6>支付寶</h6>
   <span>推薦有支付寶賬戶的用戶使用</span>
   </div>
  </el-radio>

坑來了。。。。

之前一直是前端請(qǐng)求后臺(tái)接口，后臺(tái)調(diào)取微信支付接口，但點(diǎn)擊微信支付后一直提示跨域、重定向問題

就是這個(gè)坑，問了好多人，都在說是不是沒有配置安全域名或接口白名單什么的，但后端真真的已經(jīng)配置了，后來我們換了一種方法，由前端來提供code 授權(quán)成功之后，返回給后端

在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/oauth3/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 
         };

然后再點(diǎn)擊按鈕中寫判斷了

methods:{
  Compay(){
  
  let radio_data = this.radio
  if(radio_data == 'weixin'){
   if (this.code) { // 如果沒有code，則去請(qǐng)求
           
         this.$axios({
          method: "post",
       url: "后臺(tái)接口",
       params: {code: this.code} //將code傳給后臺(tái)，如果有其他參數(shù)需要傳遞，請(qǐng)一并傳遞
         }).then((res)=>{
    //調(diào)取微信支付
    var that = this;
        function onBridgeReady(){
           WeixinJSBridge.invoke("getBrandWCPayRequest",{
           appId: res.data.appId, //公眾號(hào)名稱，由商戶傳入
            timeStamp: res.data.timeStamp, //時(shí)間戳，自1970年以來的秒數(shù)
            nonceStr: res.data.nonceStr, //隨機(jī)串
            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('調(diào)起微信支付失敗');
           }
           }
           );
        }
        onBridgeReady();
        //微信支付
         })
         }
  }else if(radio_data == 'zhifubao'){
  this.$axios.post('后臺(tái)接口',data).then((res)=> {
           this.html = res.data
           var form= res.data;
          const div = document.createElement('div') //創(chuàng)建div
          div.innerHTML = form//此處form就是后臺(tái)返回接收到的數(shù)據(jù)
          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); //在微信中用瀏覽器跳轉(zhuǎn)到支付寶支付
  })
  }
  
  }
 }

以上是“Vue實(shí)現(xiàn)微信支付功能遇到的坑有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：Vue實(shí)現(xiàn)微信支付功能遇到的坑有哪些
分享網(wǎng)址：http://m.rwnh.cn/article10/iggsgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站導(dǎo)航、App設(shè)計(jì)、關(guān)鍵詞優(yōu)化、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)