微信小程序开发--总结

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会更为合理：

1. 段落字体大小。这种情景下，一般不会限制文字显示区域大小，也就不需要考虑换行、截取等问题，而且能保持在小屏幕下字体的识别度。

2. border。理论上来说border是固定的，不需要随着屏幕分辨率来调整大小。

尽可能的模板化

对应项目中出现两次及以上的模块区域，尽可能的用template复用，项目目录中新建个template专门管理复用内容，有必要的话，也可以将模板内涉及到的js部分也抽离出来，组件化。

布局

移动端对CSS3支持较好，尽量多用flex布局，可以尽情的使用calc，vw,vh等快速的搭建视图。

踩坑

这里不一一列举出来了，推荐大家几个站点

1. 社区小程序开发问答最新整理

2. 69 个微信小程序常见问题

3. 微信小程序图表插件（wx-charts）