小程序开发工具调查

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

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