最近研究一个关于汉字笔画的应用。在使用uni-app开发时，希望将一处div由初始的display:none修改为display:block，于是写了如下两行：
var showarea = document.getElementById(‘showarea’);
showarea.style.display = “block”;
可是测试时浏览器控制台总是输出错误，也就是showarea没法获取到，然后也就无法设置其style.display属性了。
反复查找资料，原来问题出现在没有正确理解应用生命周期。
我把上述两行代码写在方法showHanzi()里面，而showHanzi是在onLoad()的时候调用。
而onLoad()并不代表页面就加载完成了，所以未必能获取到showarea这个div。
下面是从uni-app官网文档对生命周期状态的解释：
页面生命周期
uni-app 支持如下页面生命周期函数：
| 函数名 | 说明 | 平台差异说明 | 最低版本 |
|---|---|---|---|
| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例 | ||
| onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 | ||
| onReady | 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 | ||
| onHide | 监听页面隐藏 | ||
| onUnload | 监听页面卸载 |
onLoad，顾名思义，指页面刚加载时候，未必加载完成。而onReady则是页面已经加载完成，已经准备好了。
于是，新建一个状态即onReady()，然后将showHanzi()从onLoad()移到onReady里面就可以了。
onLoad() {
this.yourname = uni.getStorageSync(‘yourname’) ? uni.getStorageSync(‘yourname’) : ‘中国人’;
},
onReady() {
this.showHanzi();
}
贴一个html版本的汉字应用：http://www.nddxs.com/
发表回复