Hacker and Geeker's Way

微信小程序最近火爆IT界，抱着尝鲜的心理我也下载了微信web开发者工具并撸了一个Demo小程序，撸完之后发现微信小程序就开发过程而言，就像背影很美正面像鬼的女子，远没有外界所说的那么好，在实际开发过程中有各种不爽，下面我就来一一说下。

不能npm install

微信小程序最大的一个痛点是不能使用第三方包，只能用原生的JavaScript的功能，虽然可以支持ES6了，但是像Lodash这种工具包要是能用的话，可以少写很多代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 用原生的JavaScript
for(let i = 0; i < todos.length; i++) {
  const todo = todos[i];
  if (Number(todoId) === todo.id) {
    todo.completed = !todo.completed;
    todos[i] = todo;
    this.setData({
      todos: todos,
    });
    break;
  }
}

// 使用了lodash
const index = todos.findIndex(x => todoId=== x.id);
_.set(todos, `${index}.completed`, !_.get(todos, `${index}.completed`));
this.setData({
  todos: todos,
});

不能使用第三方包的最大坏处是不能复用代码，想象一下我在一个项目有几个组件写的非常好，可以在提供给其他项目使用，但由于小程序不能使用第三方包，就只能把原来的代码拷贝到新项目里面去。这样导致的结果就是每个小程序项目充斥着重复的代码，一旦公共代码要改动会要牵扯到很多个地方的修改。

css调试器不能自动补全

我们在调试页面样式时，很多时候会借助Chrome浏览器的开发者工具，在里面对某个元素添加样式非常方便，而且在输入css属性和值时工具会有自动补全的提示，这一点非常有用，即使你忘记了一些css也可以完成调试样式的工作。

但是在微信开发者工具里面就不是这样了，工具不会自动补全css属性和值，作为开发者不可能记住每个css的属性，没有了自动补全让开发效率低了很多。

UI组件不好用

微信开发者工具提供了很多UI组件，基本上可以满足大部分的开发场景，但还是不得不吐槽里面一些组件的缺点。

checkbox不能单独使用

开放的checkbox组件需要包含在checkbox-group里面才能使用，如果直接使用checkbox组件，一个是不能监听change事件，二个是通过tap事件不能获取到check值。

所以只能结合checkbox-group一起使用，而多个checkbox的场景又比较少，所以感觉这个UI组件很鸡肋。

icon 太少

还有要吐槽的一个组件是icon，里面提供的icon非常非常的少，只有可怜的15个。可以预想到以后随着小程序逐渐复杂，开发者需要开发自己的icon组件，但开发出来的组件又不能复用（参见上面第一条），所以小程序项目会到处充斥着重复的代码。

刷新没用，每次都要重新编译

微信开发者工具的动作菜单有项目重建和刷新两个子菜单，把这两个菜单放在一起很容易给人这样一种错觉，项目重建是重新编译项目，而刷新是不重新编译项目只刷新页面。项目重建没有什么问题，但是刷新菜单就不知道有什么用了，按了之后页面有进度条加载，但是并没有发生变化，而且大部分时候会导致console报错，真心不知道这个菜单有什么鸟用。

不能写测试

测试是项目质量的保障，但在小程序里面没有示例代码和文档来指导你如何写测试代码，其实根本没法让你写单元测试。微信团队你们难道指望每个小程序都是靠手工测试来保证质量吗？我猜测微信开发者工具的开发团队（可能是腾讯的前端团队）平时也很少甚至不写单元测试，所以在开发者工具中就没有关于单元测试的考虑👎。

总结

微信小程序刚推出不久，有一些缺点毛病是正常的，但如果腾讯希望小程序以后能掀起一股开发热潮，就请在开发者工具上加强开发体验，让开发者开发爽了，才能做出让用户爽的小程序来。

最后附上我练手的小玩意儿，项目地址是：https://github.com/zhaozhiming/wechat-todolist