banner

唠叨一下我的小程序开发历程

自去年(2017年),微信正式推出小程序以后,我就第一时间去申请了一个账号,当时还要求是企业账号。理所当然的,我注册了一个公司的账号。

因为是没有计划做小程序的,所以在UI设计方面,我准备直接将公司的手机网站设计直接搬到小程序中。当然,并不能全部照搬,很大部分还是要根据小程序的性质进行改变。

开发过SPA(Single Page Application)的童鞋,在接触小程序教程的时候,第一感觉就是,这就是一个SPA的开发流程啊。

如果你没玩过SPA,那你今晚先去大保健吧……

老司机的课堂总结来啦,啧啧,算不上很好的方案,但总归是一个经验。

一、非及时渲染的内容,不要直接注册在page的data中;

跟我接触的前端框架雷同,用于渲染数据的data组织结构太长太多,非常影响再次渲染的速度和体验。

一个简单的栗子,我在制作一个申请表单的时候,一个page上有二三十行必填内容(真的很烦)。这些内容是不能删减,销售强制要求客户必须填写这些内容,而且时不时的还想要增加一两个数据字段,真的是……打个岔子,假设你的应用需要收集用户的敏感信息,根据微信的运营规范,是需要明确告知用户的。

数据字段太多了,我是不可能一行一行的写了……自然是for循环走起,既然是for循环了,那么做为渲染依据,我将这些数据字段的做成数组注册到data中。类似这种表单,我并没有用SPA写过,最多的就是登录/注册表单,也就几行。按照以往的思路,用户输入的数据,直接绑定到data上了。二三十行嘛,每次用户数据就for一下,找到对应字段存进去,真是一个棒(zhi)极(zhang)了(ban)的方法。说实话,在电脑上Demo的时候,输入操作这些完全没有毛病,但真机上运行Demo的时候,完全傻逼了。。。

每输入一个字,就感觉到画面闪烁了一下,同时……键盘收回去了……收回去了……what fack?!

重新检查代码加N次测试后发现,是因为data中的渲染数组变更,进而整个页面重新渲染。随后,因为input输入框失去焦点,键盘自然就收回去了。

最后的解决方案,我去掉了input的数据绑定,将input的值单独存储在另外一个key中,跳开了data的渲染机制。


二、setData更新多数据数组的时候,适当setTimeout一下;

为了展现我的骚(wei)技术……我在产品列表页上,每个产品加入了swiper切换图片。列表的渲染和叠加渲染都是没有毛病的,但在上线后出现了一个莫名其妙的bug——点击A产品图片,进入到了B产品页面。这尼玛玩笑开大了……BUG制作出来,就得修复啊,检查了一下页面后,发现竟然是数组数据切换太快了……太快了……尼玛,太快了,swiper中绑定的产品ID没有来得及update……

所以,我在处理replace类型替换数据的时候,setTimeout延迟了100ms。(栗子实景,产品列表过滤功能,数据是API重新传入的)


PS: 文章写着写着断了一下,然后没了思路,先更新这两点吧,后续想起了继续。

阅读: 2000
在同意共创许可协议(CC BY-NC-SA-4.0)的前提下,您可以转载本文。
橙色阳光
https://oss.so/article/96

留言评论

暂无留言