微信小程序在安卓的白屏问题原因及改进讲解

 更新时间:2019年02月15日 17:07:00   作者:ZJW0215  
今天小编就为大家分享一篇关于微信小程序在安卓的白屏问题原因及改进讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

在做小程序的时候,做到了一个限时商品售卖,用到了倒计时,因为这个原因导致了安卓手机上使用小程序时,将小程序放入后台运行一段时间后,再次进入小程序后出现了页面白屏或者点击事件失效的情况,这里记录下

1.相关代码文件

我这里是使用了自定义组件的形式来渲染的

  • 外部的引用的自定义组件的wxml文件
/* 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.引起的原因

  • 因为在外部引入自定义的组件时,直接就是调用了定时器并且进行了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]['endtime_date'] = this.filterTime(limitCommodity[i]['endtime'])
   }
   this.setData({
    limitCommodity
   })
   this.timeOut = setTimeout(()=>{
    this.calculate();
   },1000);
  }
 }
})

改进就是计算时间后再返回时间,而setData的是整个商品列表数组,这样就减少了setData次数

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

相关文章

  • Flutter定时器、倒计时的快速上手及实战讲解

    Flutter定时器、倒计时的快速上手及实战讲解

    这篇文章主要给大家介绍了关于Flutter定时器、倒计时的快速上手及实战的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Flutter具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • Android kotlin RecyclerView遍历json实现列表数据的案例

    Android kotlin RecyclerView遍历json实现列表数据的案例

    这篇文章主要介绍了Android kotlin RecyclerView遍历json实现列表数据的案例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-08-08
  • Android Java实现余弦匹配算法示例代码

    Android Java实现余弦匹配算法示例代码

    这篇文章主要介绍了Android Java实现余弦匹配算法示例代码的相关资料,这里通过java 算法实现余弦匹配算法实现比较的实例,需要的朋友可以参考下
    2016-11-11
  • android使用handler ui线程和子线程通讯更新ui示例

    android使用handler ui线程和子线程通讯更新ui示例

    这篇文章主要介绍了android使用handler ui线程和子线程通讯更新ui的方法,大家参考使用吧
    2014-01-01
  • Android中vim编辑器进阶的使用介绍

    Android中vim编辑器进阶的使用介绍

    本篇文章介绍了,在Android中vim编辑器进阶的使用。需要的朋友参考下
    2013-04-04
  • Android实现一对一蓝牙聊天APP

    Android实现一对一蓝牙聊天APP

    这篇文章主要为大家详细介绍了Android实现一对一蓝牙聊天APP,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • Flutter质感设计之弹出菜单

    Flutter质感设计之弹出菜单

    这篇文章主要为大家详细介绍了Flutter质感设计之弹出菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • Android Studio升级到3.0后遇到的坑

    Android Studio升级到3.0后遇到的坑

    自从谷歌发布Android Studio 3.0版本后,一直心向往之,终于抽时间做了下升级处理,现在把升级过程中遇到的一些问题以及解决方案分享给大家,希望对大家能给有事帮助
    2017-11-11
  • Android Studio Gradle 更换阿里云镜像的方法

    Android Studio Gradle 更换阿里云镜像的方法

    这篇文章主要介绍了Android Studio Gradle 更换阿里云镜像的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • Android自定义View原理(实战)

    Android自定义View原理(实战)

    这篇文章主要介绍了Android自定义View原理,由于Android系统内置的View不满足我们的业务需求,变产生了需要自定义View的原因,关于自定义详情,需要的小伙伴可以参考下面文章具体详情
    2022-05-05

最新评论