记一次微信小程序在安卓的白屏问题
在做小程序的时候,做到了一个限时商品售卖,用到了倒计时,因为这个原因导致了安卓手机上使用小程序时,将小程序放入后台运行一段时间后,再次进入小程序后出现了页面白屏或者点击事件失效的情况,这里记录下
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次数
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)
往期好文推荐:
来源:https://segmentfault.com/a/1190000017478925
记一次微信小程序在安卓的白屏问题的更多相关文章
- 微信小程序iOS下拉白屏晃动,坑坑坑
感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText ...
- 微信小程序、安卓APP、苹果APP对比分析
今天的话题主要是关于微信小程序.安卓APP.苹果APP对比分析.既然是对比分析肯定是将它们一个一个说明. 本篇不涉及技术话题,只讲解微信小程序.安卓APP.苹果APP它们各自的优缺点及其应用场景. 一 ...
- 体验报告:微信小程序在安卓机和苹果机上的区别
很多人可能会问:微信小程序和在微信里面浏览一个网页有什么区别? 首先,小程序的运行是全屏的,界面跟进入了一个APP很像,更为沉浸跟在微信里面访问h5不一样:其次,它的浏览体验更为稳定. 不过,这还不够 ...
- 记一次微信小程序开发
之前在网上看到博客园新闻服务开放接口,因为自己本身有看博客园IT新闻的习惯,为了能随时随地简洁方便的浏览新闻,于是萌生了一个利用开放API开发一个微信小程序的想法. 1. mpvue初探 平时技术栈有 ...
- [开源硬件DIY] 自制一款精致炫酷的蓝牙土壤温湿度传感器,用于做盆栽呵护类产品(API开放,开发者可自行DIY微信小程序\安卓IOS应用)
目录 前言: 1. 成品展示 2. 原理图解析 3. pcb设计 4. 嵌入式对外提供接口 4.1 蓝牙广播 4.2 蓝牙服务和属性 4.3 数据包格式 4.4 数据通信模型 重要 . 前言: 本期给 ...
- 微信小程序点击图片全屏
作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...
- 记一次微信小程序的开发
使用工具: 1.微信Web开发者工具 2.Visual Studio 2019 前端采用color UI,后端采用c# .net 过程中的几个重点点记录 1.color UI使用 下载colorUI以 ...
- 微信小程序学习记录(一)
如何定义一个全局变量: 1,在根目录下app.js中添加 App({ globalData: { g_isPlayingMusic : false, g_currentMusicPostId :nul ...
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
随机推荐
- Spring Boot实战(1) Spring基础
1. Spring基础配置 Spring框架本身有四大原则: 1) 使用POJO进行轻量级和最小侵入式开发 2) 通过依赖注入和基于接口编程实现松耦合 3) 通过AOP和默认习惯进行声明式编程 4) ...
- Object in Java same as pointer
到目前为止,读者应对对象的“传递”有了一个较为深刻的认识,记住实际传递的只是一个句柄. 然而准确地说,Java是有指针的!事实上,Java中每个对象(除基本数据类型以外)的标识符都属于指针的一种.但它 ...
- Angular JS + Express JS入门搭建网站
3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...
- 关于如何等待一个元素的出现而不用一些笨拙粗暴的time.sleep()方法
我相信这是一个非常大众化的需求,我们需要等待某一个元素的出现以此来让我们的脚本进入到下一个Step,这个等待方法最好能够设置超时时间,然后找到后迅速callback.我们也很幸运!如果你仔细看Sele ...
- check_mk检测插件编写
参考 Writing Checks (Introduction) Writing agent based checks The New Check API http://www2.steinkogle ...
- sudoer解释
/etc/sudoer ## Sudoers allows particular users to run various commands as ## the root user, without ...
- 如何在markdown中实现缩进,空格,制表符
参考 https://stackoverflow.com/questions/6046263/how-to-indent-a-few-lines-in-markdown-markup Markdown ...
- MySQL入门很简单: 15 java访问MySQL数据库
1. 连接数据库 1.1 下载安装驱动 java通过JDBC(Java Database Connectivity,Java数据库连接)来访问MySQL数据库.JDBC的编程接口提供的接口和类与MyS ...
- python 网址
https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001431752945034e ...
- mybatis怎样自动生成java类,配置文件?
其实没有什么东西是可以自动生成的,只不过是别人已经写好了,你调用罢了. 所以想要mybatis自动生成java类,配置文件等,就必须要一些配置和一些jar包.当然这些配置也很简单. 为了有个初步的认识 ...