开发者在进行 LightJsn 模块或项目的开发时,在享受 jsnative 技术的由一份前端代码生成浏览器、安卓和 iOS 三端统一的代码的便利性的同时,由于设备的多样性,也不可避免地会遇到兼容性问题和性能问题,比如长列表的渲染、页面加载速度、图表绘制等,基于这些实际项目的问题,以下介绍一些可以提高开发效率和提升性能的 tips。
常见问题的兼容方案
<scroller>
高度适配
对于不同分辨率的设备,scroller 标签不需要设置高度,即可自动根据内容撑满。
box-shadow
jsnative 框架中,css 的 box-shadow
属性对 iOS 有很好的支持,但在安卓设备上会出现渲染错误,非常不建议使用。可以判断设备类型,在 iOS 设备上使用 css 属性,在安卓设备上用背景图片代替。
条件渲染
jsnative 中不支持使用 v-show
,只能使用 v-if
,当需要条件渲染的 dom 很复杂时,可能会有较明显的闪动,建议不要对长达一整个页面的内容进行简单的条件渲染,而是交由 lc-tab-page 组件 进行处理。
全面屏设备的适配
对于 iPhone X 及以上的 iOS 设备和层出不穷的安卓全面屏设备,适配聚焦在状态栏的高度上。对于iPhone X 以前的 iOS 设备,状态栏的高度为 80px,安卓非全面屏手机则一般为 44px。iPhone X 以上的 iOS 设备为 40*scale,是可以列举出来的。但在安卓设备上就复杂得多,由于安卓设备的“刘海”的高度不尽相同且无法穷举,建议尽量使用原生的状态栏和导航栏。比如当需要实现沉浸式导航栏时,可以使用 LightSDK.native.getStatusBarHeight 方法来获取当前设备的状态栏高度。
组件的选择
长列表的渲染
对于长列表的渲染,list 组件 拥有平滑的滚动和高效的内存管理,性能胜过 scroller 组件。
图表绘制
对于简单的非交互类的图表,使用 light-chart;对于较复杂的交互类的图表或需要在一个页面内绘制多个图表时,建议使用 web标签嵌入h5 的方式,以得到很好的性能和效果。
工程层面的优化
- 开启异步视图;打包时使用
light release -ucsp
进行代码混淆压缩。 - 若工程使用了离线包,开启离线包预置可以让远程包像在本地运行一样快。
- 开启预加载。
其他优化方法
- 充分利用 vue 的特性,如混入,全局注册等,以避免编写重复的代码。
- 模块化编码,提高代码的可复用性。
最后,除了以上提供的优化方法,请开发者谨遵 Light 工程规范,减少或消除冗余代码和无效代码,提高编码的整洁性和规范性。