Android 휴대폰에서 WeChat 애플릿의 흰색 화면 문제를 기억하세요

hzc

풀어 주다： 2020-06-23 10:21:53

앞으로

3076명이 탐색했습니다.

미니 프로그램을 만들 때 기간 한정 상품을 판매하고 카운트다운을 사용했기 때문에 안드로이드 폰에서 미니 프로그램을 일정 시간 동안 백그라운드에서 실행한 후, 미니 프로그램을 다시 입력했는데 문제가 발생했습니다. 페이지가 비어 있거나 클릭 이벤트가 실패하면 여기에 기록하세요

1. 관련 코드 파일

외부적으로

wxml을 렌더링하는 데 커스텀 컴포넌트 형식을 사용합니다. 참조된 Custom Components 파일

/* limitCommodity是一个数组，返回的是商品对象，包含商品价格、商品结束时间、商品图片等 */
<block wx:for="{{limitCommodity}}" wx:key="{{item.id}}">
    <commodityItem class="specialContent" goods="{{item}}" />
</block>

로그인 후 복사

js 파일

Component({
  properties: {
    goods: Object
  },
  data: {
  },
  timer: null,
  /* 在组件实例进入页面节点树时执行，开始定时器 */
  attached: function() {
    if(this.timer) {
      clearInterval(this.timer);
    }
    this.filterTime();
    let that = this;    
    this.timer = setInterval(function () {
      that.filterTime();
    }, 1000)
  },
  /* 在组件实例被从页面节点树移除时执行，将定时器清除 */
  detached: function() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    /* 用于将时间戳转换成自定义的时间格式 */
    filterTime() {
      let totalTime = new Date(parseInt(this.data.goods.endtime) * 1000) - new Date();
      let days = parseInt(totalTime / 1000 / 60 / 60 / 24, 10);
      let hours = parseInt(totalTime / 1000 / 60 / 60 % 24, 10);
      let minutes = parseInt(totalTime / 1000 / 60 % 60, 10);
      let seconds = parseInt(totalTime / 1000 % 60, 10);
      let day = days >= 10 ? days : '0' + days;
      day = day == 0 ? '' : day + '天';
      let hour = hours >= 10 ? hours : '0' + hours;
      let minute = minutes >= 10 ? minutes : '0' + minutes;
      let second = seconds >= 10 ? seconds : '0' + seconds;
      this.setData({
        limitTime: day + hour + ":" + minute + ":" + second
      })
    },
  }
})

로그인 후 복사

2. 이유

이유는 Custom Component가 외부에 도입되면 타이머가 직접 호출되고 setData가 실행되기 때문입니다. 결과적으로 이 구성 요소를 외부에서 참조할 때 들어오는 제품 배열의 길이가 길면 타이머가 증가하고 setData 작업도 계속 증가합니다
setData가 너무 많으면 양이 많아집니다.

3. 개선 방법

개선 방법은 setData 작업을 줄이는 것입니다.

구성 요소를 사용자 정의하여 전체 배열을
에 전달한 다음 시간을 계산할 수 있습니다. 제품 배열 우선
js 파일 개선

Component({
  properties: {
    limitCommodity:Array
  },
  data: {
  },
  timeOut:null,
  /* 在组件实例进入页面节点树时执行 */
  attached(){
    this.calculate();
  },
  /* 在组件实例被从页面节点树移除时执行，将定时器清除 */
  detached(){
    clearTimeout(this.timeOut);
    this.timeOut = null;
  },
  methods: {
    filterTime(endtime) {
      let totalTime = new Date(parseInt(endtime) * 1000) - new Date();
      let days = parseInt(totalTime / 1000 / 60 / 60 / 24, 10);
      let hours = parseInt(totalTime / 1000 / 60 / 60 % 24, 10);
      let minutes = parseInt(totalTime / 1000 / 60 % 60, 10);
      let seconds = parseInt(totalTime / 1000 % 60, 10);
      let day = days >= 10 ? days : '0' + days;
      day = day == 0 ? '' : day + '天';
      let hour = hours >= 10 ? hours : '0' + hours;
      let minute = minutes >= 10 ? minutes : '0' + minutes;
      let second = seconds >= 10 ? seconds : '0' + seconds;
      return day + hour + ":" + minute + ":" + second
    },
    calculate(){
      let limitCommodity = this.data.limitCommodity;
      for (let i = 0; i < limitCommodity.length;i++){
        limitCommodity[i][&#39;endtime_date&#39;] = this.filterTime(limitCommodity[i][&#39;endtime&#39;])
      }
      this.setData({
        limitCommodity
      })
      this.timeOut = setTimeout(()=>{
        this.calculate();
      },1000);
    }
  }
})

로그인 후 복사