微信中調起支付寶支付

微信中調用支付寶支付，首先咱們知道微信是不能直接調用支付寶的，因此咱們須要使用一箇中間頁提示用戶在瀏覽器中打開，而後進行網頁支付或打開app支付。如下爲詳細喚起支付寶的步驟、業務代碼以及相關頁面圖。

若有問題歡迎評論留言，看到定回覆哦^_^\(^o^)/~javascript

1、微信中喚起支付寶，有幾個步驟：html

一、中間頁引導用戶在瀏覽器中打開去喚起支付寶。java

二、瀏覽器中打開支付寶或app中打開支付寶。android

三、喚起成功後，進行支付寶支付：支付成功、支付失敗、支付取消、支付超時。ios

四、在支付後，返回微信時跳轉到成功和失敗的提示頁面。api

五、在支付後，返回瀏覽器時渲染出支付成功和支付失敗的用戶提示頁面。瀏覽器

app中打開支付寶測試，須要注意：微信

一、在測試環境中，開發者須要在支付寶開放平臺註冊沙箱環境帳號：https://openhome.alipay.com/platform/appDaily.htm。app

二、註冊後，在Android中下載沙箱錢包，登陸的帳號爲沙箱環境中的買家帳號和密碼。測試

2、整個需求的業務代碼以下：

一、中間頁引導頁：

<div class="Pending">
      <div class="in-weixin" v-if="isWeixin">
         <div class="not-pay" v-if="!payStatus">
            <div class="weixin-tip">
               <div class="weixin-tip-content">
                 | 請在菜單中選擇在瀏覽器中打開,
                 <br/>
                 | 以完成支付
               </div>

            </div>
            <div class="weixin-img" :class="{'ios': isIos, 'android': isAndroid}">
            </div>
            <!--<div class="weixin-button">-->
              <!--| 返回選擇其餘支付方式-->
            <!--</div>-->
         </div>
         <div class="have-pay" v-else>
           <p>檢查支付結果</p>
         </div>
      </div>
      <div class="in-browser" v-if="!isWeixin">
       <!--<p>支付跳轉中...{{retry}}</p>-->
       <p>支付跳轉中...</p>
      </div>
      <div class="payment-form" v-html="paymentForm">

      </div>
   </div>

在ios上面的效果： 

二、js邏輯處理：

export default {
    data() {
      return {
        isWeixin: navigators.isWeixin(),//navigator.userAgent判斷是在微信或在瀏覽器
        isIos: navigators.isIos(),
        isAndroid: navigators.isAndroid(),
        payStatus: false,
        timer: undefined,
        // retry: 5,
        retry: 210,//輪詢10分30秒  用於在微信中進行訂單查詢的時間
        paymentForm: ''
      }
    },
    computed: {
      option: function () {
        return this.$route.query
      }
    },
    mounted() {
      // 瀏覽器中執行支付寶支付
      if (!this.isWeixin) {
        this.SubmitPay()
      }
      // 切出微信到瀏覽器或者切出瀏覽器到支付寶,切換回來檢查支付結果
      let oldTime = new Date()
      let count = this.retry
      // 刷新當前頁面時,檢查支付結果
      this.CheckOrder(count)

      this.timer = setInterval(() => {
        let newTime = new Date()
        console.log('時間: ', newTime.getTime() - oldTime.getTime())
        if (newTime.getTime() - oldTime.getTime() > 3000) {
          this.CheckOrder(count)
          this.payStatus = true
          clearInterval(this.timer)
        }
        oldTime = newTime
      }, 1000)
    },
    destroyed() {
      // 頁面銷燬取消計時事件
      clearInterval(this.timer)
    },

methods: {
       SubmitPay () {
         this.paymentForm = this.$route.query.alipayForm //把後臺返回的form表單字符串賦值給中間頁的標籤進行表單驗證
         setTimeout(() => {
           let fm = document.getElementsByTagName('form')[0]
           fm && fm.submit()
         }, 50)
      },
      CheckOrder(count){//訂單查詢
        // let that = this
        let id=this.$route.query.orderId
        apiEstore
          .CheckOrderPayment(id)
          .then(res => {
            if(res.status && res.resultCode==1){
               if(res.data.payStatus==1){//支付成功
                 // 返回到微信的處理操做
                 if (this.isWeixin) {
                   this.$router.replace({path:"/mainPage",query:{"success":1,"reference":this.$route.query.reference,orderId:id}})
                 }
               }else{//後臺判斷支付成功的狀態未更新時，須要進行輪詢
                   if (count > 0) {//支付成功時輪詢查詢接口更新status
                     this.retry = count
                     setTimeout(() => {
                       this.CheckOrder(--count)
                     }, 3000)
                   } else if (count <= 0) {//輪詢結束，銷燬取消計時事件，支付失敗
                     clearInterval(this.timer)
                       this.$router.replace({path:"/checkout",query:{id:this.$route.query.id,"alipayFail":1}})
                   }

               }
            }
          })
          .catch(err => {
            console.log("err====支付寶=======", err);
          });
      }

    }

三、喚起成功成功時的頁面效果：

四、支付後返回到微信中的頁面：

支付後，支付寶是給瀏覽器返回結果的，那微信頁面中的這個支付結果是怎麼刷新出來的呢？

支付後，在回到微信時會調取查詢訂單狀態的輪詢接口（走輪詢機制），根據你支付的狀態後臺去抓取是成功仍是失敗，而後前臺根據輪詢接口中的支付狀態參數去判斷輪詢的訂單結果。最後判斷是支付成功仍是失敗。代碼段可詳見：methods中的CheckOrder方法體。

五、支付後返回到瀏覽器，支付成功和支付失敗新建兩個頁面，把頁面的URL指定發給後臺，後臺進行URL配置。當支付後返回到瀏覽器，渲染出成功或失敗的提示頁面。