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

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

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

• 시간을 계산한 후 시간을 반환하도록 개선되었으며, setData는 전체 상품 목록 배열이므로 setData 개수가 줄어듭니다

I 열심히 배우고 있으니 공부에 도움이 되셨다면 좋아요(좋아요^_^)를 남겨주세요

추천 튜토리얼: "WeChat 미니 프로그램"

위 내용은 Android 휴대폰에서 WeChat 애플릿의 흰색 화면 문제를 기억하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!