小程序读书笔记(1)常见问题

226 阅读3分钟

原生层级高的问题

原生组件会浮于其他组件之上,使得其他组件不能覆盖在其他组件之上

想要解决这个问题,可以用cover-image,或者cover-view组件在原生组件上,是可以这样玩的。

但是其实是一样的,这样的话就要把数据放到原生组件上去,而且原生组件之间的层级就可以按照一定的规则来控制。

页面退出,小程序不退出

页面退出之后page之外的对象并不会被销毁掉,举个例子


console.log('加载 page.js')

var count = 0

Page({

onLoad: function() {

count += 1

console.log('第 ' + count + ' 次启动这个页面')

}

})

这个count虽然不能在不同的页面之间共享,但是当页面站的顺序是a->b ->a的时候,这个时候count不会被销毁掉,两个A的实例就会直接共享两个变量

小程序页面通信

页面初始化的事件大致上由页面初始化数据通信事件和初始化渲染事件两部分构成,其中,数据通信的事件数据从逻辑层开始组织数据到是涂层完全接受完毕的事件,数据量小于64KB,事件可以控制在30ms之内,但是传输数据过大会使得这一事件显著增加,因而减少数据传输量是降低数据传输事件的有效方式。

数据传输的事件会由于两方面构成:

1 一方面是在不同的生命周期的时候

2 另一方面是在setData的时候

两种渲染方式渲染方式都是由于初始化路径之后,会把数据和路径发送给是视图层,然后视图层接受完成数据之后开始初始渲染,然后渲染完成之后会触发回调 回调的消息会发送给逻辑层所在的线程。

就是因为传输过程当中的,数据传输的事件和数据传输的事件是以近乎线性的方式同时增加的,所以不建议一次性set很多的数据,相对于渲染耗时,传输对与页面渲染的耗时要更高。

总之:

1 频繁的setData会触发频繁的数据渲染。

2 数据通信的性能和数据量正相关,所以数据字段不在洁面当中战术数据结构比较复杂的或包含长字符串都不应该使用setData去设置这些数据,应该向小程序官方建议的分批次的去set数据。

当然过多的set也会导致页面渲染速度减慢,所以到底什么时候该set,set多少,要看情况去确定。

3 和页面渲染无关的数据不要设置在data对象当中,当然也可以考虑在page对象的其他字段下

4 状态/数据共享

    小程序没有redux这种东西,所以状态共享变得焦灼起来,个人建议不妨可以用storage顶一顶,而且相当的小程序根本用不到redux程度的状态共享
     尝试把storage挂进入口的main.js当中,尝试去通过storage去共享一部分数据是一个相当不错的尝试(个人试了下还可以其实)

    当然不要所有的东西都往里面塞,要有点脑子。

重渲染

在触发再次渲染之后,会使得数据不同的代码节点,然后新的代码节点和一部分老的代码节点(data当中的,非用户行为节点),会构成新的节点树,然后去渲染整个新的节点数。

原生组件的东西是不会导致二次渲染的,因为是逻辑层直接传递到native层然后传递到组件里面所以根本不会触发整个页面的刷新