小程序开发工具调查

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-ui UI库，文档易读容易定位问题，多个库的版本管理也不像 wepy 那样不统一。在 v1.3.0-beta-0 之后还支持 React Hook 方式编码，让我这个React新人也想尝尝鲜！

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

• weui-wxss WeUI WXSS是腾讯官方UI组件库WeUI的小程序版，提供了跟微信界面风格一致的用户体验
• iview-weapp iView是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