项目开源地址:
MinUI:https://github.com/meili/minui
Min Cli:https://github.com/meili/min-cli
是的,我们撸了一个新轮子。
在这个前端高速发展的时代,撸轮子并不是目的,而是解决问题的手段。我们希望通过这个轮子,帮助像我们这样的小程序开发者,优雅高效的搞定小程序中自定义组件的 开发 和 使用 这 2 个环节,为开发者 赋能。
一切的初衷,都始于我们希望像下面这样,优雅的定义和使用组件:
但这并不容易。
首先,需要微信官方支持以自定义标签的方式来封装组件。我们知道,在以往的小程序开发中,这样的方式是不支持的。所喜,微信团队和我们的想法一致。依托于同微信团队良好的沟通渠道,我们团队在第一时间获得了自定义标签组件的内测邀请,并开始着手将我们的想法落地。(PS:微信自定义组件功能,已于 2017.11.02 日开始公测,请升级微信版本到 6.5.16 或更高)。
其次,需要降低组件的开发成本。
再次,需要便捷的在既有项目中安装、应用和更新组件。
对于组件的开发,Min 提供了一整套的开发方案,包括范式、工具化环境、Demo 预览小程序、内置化文档、自动编译打包、一键式发布等能力。
我们知道,小程序目前的工程化文件结构,是多文件形式(.wxml、.wxss、.js)。为了提供额外的能力封装,Min 采用了单文件的方式(.wxc 文件)来开发一个组件,一个基于 Min 开发的组件就是一个 npm 包。
采用单文件的策略,既有对开发者诸如 vue 单文件开发习惯的考虑,同时也基于在单文件的编译环节,我们可以做一些额外的赋能 —— 如对 less、postCSS 的支持;再如对全局变量、模板、引用路径 Resolve 等支持;抑或通过插件的引入,提供其他的额外能力。
Min 提供了一套 Cli 工具 (https://github.com/meili/min-cli)来帮助开发者快速创建、编译、发布您的组件。通过
,您就能获得 Min 提供的一键式能力。
- $ npm -i -g @mindev/min-cli
通过
,您可以快速的创建本地的组件开发环境。这个组件开发环境,就是一个组件的预览小程序,可以通过微信开发者工具便捷的查看组件的运行情况。
- $ min init
通过
(*name 是你的组件名)来新建一个组件。
- $ min new *name
通过
来开启开发模式 —— 组件的最新改动,都会在微信开发者工具中实时的刷新显示。
- $ min dev *name
通过
来最终发布你的组件,发布后的组件即为一个随时可用的 npm 包。
- $ min publish *name
同时,我们还提供了一套小程序 UI 组件库,这也是我们团队在业务中使用的组件库。您可以通过搜索小程序 “MinUI” 、或通过扫描下方的“小程序二维码”来访问它。
当然,它也是开源的
来源: http://www.css88.com/archives/8325