微信中调起支付宝支付

微信中调用支付宝支付，首先我们知道微信是不能直接调用支付宝的，所以我们需要使用一个中间页提示用户在浏览器中打开，然后进行网页支付或打开app支付。以下为详细唤起支付宝的步骤、业务代码以及相关页面图。

如有问题欢迎评论留言，看到定回复哦^_^\(^o^)/~

一、微信中唤起支付宝，有几个步骤：

1、中间页引导用户在浏览器中打开去唤起支付宝。

2、浏览器中打开支付宝或app中打开支付宝。

3、唤起成功后，进行支付宝支付：支付成功、支付失败、支付取消、支付超时。

4、在支付后，返回微信时跳转到成功和失败的提示页面。

5、在支付后，返回浏览器时渲染出支付成功和支付失败的用户提示页面。

app中打开支付宝测试，需要注意：

1、在测试环境中，开发者需要在支付宝开放平台注册沙箱环境账号：https://openhome.alipay.com/platform/appDaily.htm。

2、注册后，在Android中下载沙箱钱包，登录的账号为沙箱环境中的买家账号和密码。

二、整个需求的业务代码如下：

1、中间页引导页：

   <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上面的效果：

2、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);
          });
      }

    }

3、唤起成功成功时的页面效果：