我只是个编代码的程序猿。除了懂写几个代码,写文章真不会。

这里简单分享一下我的小程序开发踩坑经历,希望其他小程序开发者就不要再踩这些坑了。


一、我踩过的那些坑

1、很像页面

一个完整的小程序页面,是由wxml、wxss、js、json四个文件组成的。其中js和json文件都是我们所熟知的文件后缀,wxml和wxss则对应了网页前端的html和css文件,包括他们各自的功能也基本一样。熟悉html5开发的人可以更快的上手小程序的开发。

2、不是页面

虽然看起来,写起来很像页面,但小程序和网页还是有不一样的地方的:

  • 很多控件是基于微信的,无法像页面中那样控制样式(比如z-index),开放的接口也比较有限(期待后续能有更多的功能开放)。
  • 前端熟悉的window、document都不存在。
  • 由于上传的编译包有大小限制,所以大部分图片都需要使用外链的方式。
  • 每个页面都有一个对应的js文件,这些文件中,都必须要调用一个Page函数,这个的参数可以为空,但必须要有。

3、配置文件

程序的配置靠的是app.json,每一个出现的页面都需要在page项中进行声明,并且,默认情况下,第一行的页面就是首页。

各个页面同样也有对应的json文件,可以且只能配置window属性,这是对app.json中window项的补充。

4、文档

官方的文档总体来说比较全面,但有一些地方确实不够不明显,比如tab的配置,一开始我以为就是要自己写,直到看了demo的源码才发现是用配置就能够实现的功能。

再比如访问某页面时带了地址栏参数,那么页面的onLoad事件的参数就会携带有地址栏中数据(这个是纯试出来的),而这一部分我并没有在官方的文档中找到,希望以后文档能够越来越全面吧。

5、其他

在论坛上看到了一个给关键字加高亮的问题,由于关键字可能出现在字符串的各个位置,而且可能不只一个,所以简单的替换处理并不能算是真正的解决,感觉目前小程序好像确实无法解决这个问题。如果是网页的前端框架,可以通过添加过滤器来针对输出的数据进行二次处理。期望以后能添加类似的功能吧。

二、害有一些“坑”

1、小坑怡情

  • 程序包限制为1M,好不容易开发出来的小程序,超过一点就无法上传,只能在模拟器上玩玩;
  • (在早期版本中)使用wx.request进行通信的时候,例子中给的是加一个header: {'Content-Type':‘application/json’}的参数,但py后端读取到的是两个content-type,后来去掉了header这个参数,就正常了,可能这个方法本身就有一个默认的header;
  • 小程序注册和审核限制太大,特别是审核,因为类目和资质问题太容易被打回;
  • 页面中的数据,要使用setData进行修改,直接修改data中的数据是无效的;

2)早期程序bug及不足

  • 每次更新开发者工具都会卡死,只能重启;
  • 地图api有bug,偶尔会出现定位错乱;
  • picker组件功能有限,希望picker滚动选择器能支持多列树形结构,比如行政区划选择

3)诡异的编辑器,要疯了,要疯了!

高度的解析方式,主容器一开始定义了100%,在编辑器里看没问题,但手机查看时所有元素都均匀的分布于纵坐标轴,可能是编辑器和手机的解析还没有完全同步吧,没办法凝神屏气继续调试吧!

话说回来,如果兄弟有啥独门绝技,记得分享给我啊……

(在早期版本中)页面中的图片,似乎没有像网页中的那种高度自适应,宽度充满的显示方式,而是需要给图片规定一个区域,然后选择图片在这个区域中的显示方式;

三、小程序狗们以下药丸需多饮:

药丸一:尽早提交审核,尽早发现问题;

药丸二:仔细阅读文档,仔细阅读文档,仔细阅读文档,重要的事情说三遍。

药丸三:可以通过邮件和微信团队沟通

因为是人工审核,如果产品业务比较独特,可能会出现审核员不理解产品业务的情况。遇到这种情况,建议是多找微信团队沟通,然后在产品中多加一些引导。

总而言之,言而总之:

多读书,多看报,多看文档少睡觉!