这是我参与8月更文挑战的第20天,活动详情查看:8月更文挑战
小程序开发中的几点思考
一、项目开发前
1、项目架构阶段,应根据项目体量尽早决定是否分包。
对于体量较大、页面较多的小程序项目来说,分包的优点在于:
- 优化小程序整体加载速度;
- 优化代码包大小,避免超出代码包限制;
- 利于项目管理,快速定位页面位置;
2、项目内的图片素材、公用的大型js等资源,尽早上传云端,本地icon根据页面做好文件夹分类方便管理。
- 不管是线上图片还是本地图片,都要严格控制图片大小,尽量避免出现100KB以上的图片,可能严重影响页面性能;
- 本地icon分文件夹管理,需要替换或删除时快速定位,避免冗余icon堆积和时间浪费;
3、所有接口或主要列表详情接口,尽早做好接口返回异常的处理逻辑,与后端约定好异常抛出方式。
- 场景1:小程序端session_key过期
将session_key过期重新获取的逻辑封装到公用js里,每个接口根据与后端约定的异常值重新获取
- 场景2:后端登录态过期
根据业务场景判断,返回登录页或抛出异常
- 场景3:其他错误
根据业务场景判断,返回登录页或抛出异常
以上场景个人认为都应该在开发前就和后端约定好不同场景的返回值及处理方式,在主要逻辑开发完成后再去添加会浪费不必要的工作时间。 ###二、项目开发中
4、所有固定框架的标题、内容都要做文字长度超出的处理。
- 最常见的前端样式bug之一,文字长度超出正常范围的显示方式应在静态页开发过程中就时刻注意添加处理逻辑,避免提测阶段浪费工作量;
5、所有列表用scroll-view,下拉加载事件要考虑到每页资源渲染速度,优化用户体验。
- 所有要用到上拉加载、下拉刷新、锚点定位的页面,静态页开发中就要用scroll-view来写;
- 对于上拉加载分页的列表页,考虑到快速滑动时scroll-view经常会卡住再拉一下才会显示下一页内容,要从交互上优化用户体验,如页面底部加载中图标,接口loading的显隐时间等等;
6、所有image要根据实际使用场景添加mode。
- 最常见的前端样式bug之二,静态页开发过程中就应想到此处image的显示方式,是否需要剪裁、变形怎么处理等情况,采用widthFix、aspectFit等不同mode;
7、做页面跳转时,要考虑好用哪个路由方法。
- 列表和详情的相互跳转、普通页面和tab页的跳转等场景,不能一昧的用 navigateTo,要考虑到实际应用场景,思考当前页面是否要销毁,注意当前操作后页面栈堆叠,活用redirectTo、reLaunch等路由方法;
- 列表页消息已读未读状态重置、详情页关注后列表页按钮状态等场景,开发过程中就应该考虑到,而不是等测试人员提出,子页面对上级页面数据管理的常用方法:
changeIndexInE: function(){
let pages = getCurrentPages(); //获取页面栈
let prevPage = pages[pages.length - 2]; //获取上级页面
prevPage.setData({
//此处为需要改变的上级页面data
})
}
8、活用onHide和onUnload。
- onHide:当从当前A页跳转到其他页面,则A页面处于隐藏状态;
- onUnload:当前处于A页面,点击返回按钮时,则A页面卸载;
本页面内用到的storage逻辑内再无用处的,卸载页面或隐藏时要及时清空避免内存占用;
二、遇到的小问题
9、view标签中如果有text标签,text的标签的开始与闭合标签不在一行,会撑高view标签。
- view中用到的text标签,开始与闭合要写在同一行,不然可能会出现无论如何都去不掉的空白行
正确:
<view>
<text>我是内容</text>
</view>
错误:
<view>
<text>
我是内容
</text>
</view>
10、小程序gettime方法,真机ios端会有兼容问题,必须把2019-04-30替换为2019/04/30才能使用。
总结的比较片面,主要希望提醒自己编码的过程中不能仅着眼于当前的小功能,还应该随时拓展思维想到与该功能点前后相关的部分,做好当前功能点与其对应的衔接,会帮助自己节省大量的开发时间和bug修改工作量,与大家共勉 :)