7月份开始接触小程序开发,项目也进行到初步阶段,现在就将项目中遇到的一些问题,注意点,以及一些还未解决的问题总结出来,供大家一起参考。
IDE
本人一直使用的是微信开发者工具,当然Sublime和Atom这些都是可以的,看个人习惯。微信开发者工具主要是API有自动提示方便些,不过后期熟悉了,都还Ok。不过9月1号更新的那个版本真的好卡!! 虽然增加了关联腾讯云及测试,然这些对绝大部分开发者并没什么卵用~~
调试
微信开发者工具的调试有点蛋疼,主要在几方面:
涉及到层级问题的,诸如
textarea
、map
等在模拟器下是没问题的,但是真机下就会出现各种奇葩问题。对这类的问题,建议如下:1.map
,没什么特别需要,建议通过腾讯地图API将地图信息转化为一张图片,点击图片查看地图信息。2. 对于textarea
、canvas
这些原生组件,建议设置编辑/查看状态,例如textarea
上面加层显示内容区域,通过点击该显示区域来设置textarea
的hidden
熟悉的ture/false来切换显隐,尽量避免悬浮层与这些原生组件的层级问题。调试不便,主要是很多错误没有暴露出来,例如之前遇到过在
app.json
不小心在tabBar
后面对加了个空格,导致底部工具栏不显示,但又没有任何提示等等。这些就没啥好办法,多踩坑,以及上微信小程序的开发者社区,多向官博小姐姐提问题,虽然并不一定会解决~~模拟器与真机表现不一致。主要是安卓系统下,会有各种奇葩的问题,类似
textarea
、input
的bindinput
、bindblur
会有各种差异表现,特殊是通过setData添加的textarea
、input
,键盘会收起展开会有奇葩的表现方式,莫名的收起/展开。这些问题官方也没有给出妥善的解决方案。建议少用textarea,特别是要动态设置focus属性。
限制
文件大小限制
这个大家都清楚,从原来的1M已经增加到2M~~
页面可访问嵌套层级(即页面栈)
也就是记录的已访问页面数,可以通过返回键返回的页面栈,目前最多是5级。不过有小道消息,接下来会增加到10级。其实微信主要是也是以轻为主,不建议页面层级过深,但是在信息管理,诸如网站,商城类的,难免信息设置内容过多导致业务层级过深的问题。
页面栈限制导致,超过5级页面,点击跳转链接无法应。还有一种会出现点击跳转无效的是,跳转是的tabBar页面,需要是open-type
为switchTab
。
由于页面栈的限制,需要合理的将原有嵌套的业务逻辑平摊出来,减少页面栈层级。之前也试过用open-type
为redirect
但是用户体验不好,会返回到上上级,不符合业务场景。
建议
单位
小程序建议是使用rpx
,但是在某些场景中使用px
会更为合理:
段落字体大小。这种情景下,一般不会限制文字显示区域大小,也就不需要考虑换行、截取等问题,而且能保持在小屏幕下字体的识别度。
border。理论上来说border是固定的,不需要随着屏幕分辨率来调整大小。
尽可能的模板化
对应项目中出现两次及以上的模块区域,尽可能的用template
复用,项目目录中新建个template
专门管理复用内容,有必要的话,也可以将模板内涉及到的js
部分也抽离出来,组件化。
布局
移动端对CSS3支持较好,尽量多用flex
布局,可以尽情的使用calc
,vw
,vh
等快速的搭建视图。
踩坑
这里不一一列举出来了,推荐大家几个站点