数码吧

在企业微信内置浏览器跳转返回后白屏的问题解决

需求,在企业微信上推送报价,在推送点击url的同时要调接口来告诉后台这条报价已点击(已查看)

当我先写判断是否可以点击,然后再掉接口,这样的话返回时候会白屏,估计是动作同时导致的,因为js来调接口并没有执行完成
应该这样写~~这里后来也要更新新消息条数,所以也要等新消息接口调完再跳转

ps 图上的文字没用的哈~

点击url返回之后会白屏,这样写不会 ---先调接口再跳转 btw,只有在企业微信自带浏览器上会这样,其他的不会
第一步:点击的html--searchCaroffer事件

<mt-loadmore ref="loadmore"
                   :top-method="refreshData"
                   :bottom-method="loadBottom"
                   :bottom-all-loaded="allLoaded"
                   :auto-fill="false"
                   bottom-pull-text=""
                   :bottom-distance="0">
        <list-empty v-if="isEmpty" text="暂无审核/通知"></list-empty>
        <div  v-else>
          <div  v-for="(item, index) in noticeList" :key="index">
            <div @click="searchCaroffer(item)">
              <span  v-if="item.type ==='HANDLE' && item.handleIsProcess === false"></span>
              <div >
                <div >
                  <div >{{item.title}}</div>
                  <div >
                    {{ item.content }}
                  </div>
                </div>
                <span  v-if="item.type === 'HANDLE' && messageTypeList[item.messageHandleType].handleWay === 'OPEN_URL'"></span>
              </div>
              <div >
                <span >{{ item.createTime }}</span>
                <span v-if="!item.handleIsProcess && item.type === 'HANDLE' && messageTypeList[item.messageHandleType].handleWay === 'AUDIT'">
                  <span   @click="passNotice(item.id)">通过</span>
                  <span   @click="rejectNotice(item.id)">驳回</span>
                </span>
                <span  v-if="item.handleIsProcess && item.messageHandleResult === 'PASS'">{{ item.handleProcessUserName }}已通过</span>
                <span  v-if="item.handleIsProcess && item.messageHandleResult === 'REJECT'">{{ item.handleProcessUserName }}已驳回</span>
              </div>    
            </div>
          </div>
        </div>
      </mt-loadmore>

第二步----判断是不是第一次点击,是第一次,就先确认已经点并且num有更新再跳转

searchCaroffer (item) {
      this.eachMessageDetail = item
      if (item.messageHandleType) {
        var urlStatus = item.type === 'HANDLE' && this.messageTypeList[item.messageHandleType].handleWay === 'OPEN_URL' && !item.handleIsProcess
        if (urlStatus) {
          openUrl(item.id).then(res => {
            if (res.status === 200) {
              this.getNoticeNum('1')
            } else if (res.status < 500) {
              this.$toast({
                message: res.data.message,
                iconClass: 'icon icon-warning',
                duration: 1500
              })
            } else {
              this.$toast({
                message: res.data.message,
                iconClass: 'icon icon-warning',
                duration: 1500
              })
            }
          })
        }
        this.linkUrl = item.type === 'HANDLE' && this.messageTypeList[item.messageHandleType].handleWay === 'OPEN_URL' && item.handleIsProcess
        if (this.linkUrl) {
          this.linkDetail(item)
        }
      }
    },

第三步:确保上面的num数有更新

getNoticeNum (item) {
      noticeNum().then(res => {
        if (res.status === 200) {
          this.handleNum = res.data.data.HANDLE
          this.notify = res.data.data.NOTIFY
          if (Number(item) === 1) {
            this.linkDetail(this.eachMessageDetail)
          }
        } else if (res.status < 500) {
          this.$toast({
            message: res.data.message,
            iconClass: 'icon icon-warning',
            duration: 1500
          })
        }
      })
    },

第四步 跳转 ---因为返回需要记住之前的tab所以要记住存储

linkDetail (item) {
      if (item.handleUrl.indexOf('?') > -1) {
        window.location.href = item.handleUrl + '&wcode=' + this.fromWX
      } else {
        window.location.href = item.handleUrl + '?wcode=' + this.fromWX
      }
      store.set('tabStatus', this.activeStatus)
    },

第五步---拿到存储状态记住删除

created () {
    if (store.get('tabStatus')) {
      this.activeStatus = store.get('tabStatus')
      this.isStatus(this.activeStatus)
      store.remove('tabStatus')
    }
    this.getMessageType()
    this.getNoticeList()
    this.getNoticeNum()
  },