小程序开发工具调查

Photo by Adeolu Eletu on Unsplash

调查时间为 2019 年 05 月上旬进行

目前开发小程序可选方案有以下几种方式：

• 基于小程序开发工具进行原生开发（简称：原生开发）
• 基于构建环境进行开发，并转换为小程序原生代码（简称：构建式开发）

原生开发由于设计问题需要管理大量文件导致开发过程不流畅（如创建一个组件需要新建三份文件编写代码）；更多的问题是 JS 新特性不支持、css 样式不支持 Less/Sass，也不能灵活运用 npm 包管理（尽管新版本提供了支持）; 细说就是上面那些问题，对于日常开发的前端工程师来说却是需要重视的，这类问题得不到解决，开发及维护成本是高昂的！现代的前端工程师日常开发场景已经常常使用 ES6/ 7 的新特性（甚至有些习惯使用 TypeScript），然后要让这些人回头使用老旧的方法写代码，只能说工作成本太高了。结论：不推荐用原生开发，除非你的程序足够简单。

原生开发的缺点构建式开发都能解决，而且还提供常用的语境，更能使前端工程师更快更高效地进行开发工作（基于 MVVM 框架开发的语境）。下面是一些收集来的开发环境：

• wepy一个最受欢迎的小程序框架。基于 vue 开发风格。
• mpvue是一个使用 Vue.js 开发小程序的前端框架。基于 vue 开发风格。
• taro是一套遵循 React 语法规范的多端统一开发框架。基于 react 开发风格

mpvue可能文档不是那种容易阅读的类型，没看下去先弃置；微信团队开发的 wepy 写的文档就挺好的较为易于阅读，框架把原生开发的多文件结构改为了单文件并提供使用一些 JS 的新特性（基于 Babel），不得不提的缺点是它无法循环渲染自定义组件（虽然在 1.7.2-alpha4 已经支持），还有一点，在 wepy 官方的仓库中找关于循环渲染自定义组件的 issues 时发现另一个问题：数据多的时候性能较差的情况（具体看 wepy 是否可以作为一个正式项目的工具使用？项目规模起来后如何优化？(issues#1673)）；而刚好 @kdong007 在 issues 中提到 taro 解决了 wepy 的问题让我对 taro 提起了兴趣。虽然不懂 reart 也考虑尝试一波；taro是一套遵循 React 语法规范的多端统一开发框架，能一键生成可以在微信小程序 /H5/ReactNative 等端运行的代码，还支持 TypeScript 自家也有 taro-uiUI 库，文档易读容易定位问题，多个库的版本管理也不像wepy 那样不统一。在 v1.3.0-beta-0 之后还支持 React Hook 方式编码，让我这个 React 新人也想尝尝鲜！

除了开发环境，UI 库的支持选择也是很重要的，目前使用较为广泛的有以下这些：

• weui-wxss WeUI WXSS 是腾讯官方 UI 组件库 WeUI 的小程序版，提供了跟微信界面风格一致的用户体验
• iview-weappiView 是 TalkingData 发布的一款高质量的基于 Vue.js 组件库，而 iView weapp 则是它们的小程序版本
• vant-weapp Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
• minui 基于规范的小程序 UI 组件库，自定义标签组件，简洁、易用、工具化
• taro-ui 一套基于 Taro 框架开发的多端 UI 组件库

weui-wxss,iview-weapp,vant-weapp和 minui 都是基于原生开发的 UI 组件库，想用于 wepy 环境下可以参考一波 minui 推荐的处理办法（min-cli 文档 – 结合 WePY）。主要是两点：UI 组件库文件放在小程序项目目录下；在页面设置 config.usingComponents={'van-button':'../components/vant/button/index'} 来注册组件。如果你还抱有疑问，可以围观这个 issues。至于 taro-ui 必须和 taro 组合使用，环境相对封闭但是功能无可挑剔，毕竟能生成至 weapp/H5/RN。

结语：睇餸吃饭，兄弟！按自己需要来选择用什么方式开发小程序吧！祝各位好运！我就继续研究一下这个 taro 怎样搞，哈哈 XD