摘要：首先，需要微信官方支持以自定义标签的方式来封装组件。依托于同微信团队良好的沟通渠道，我们团队在第一时间获得了自定义标签组件的内测邀请，并开始着手将我们的想法落地。微信自定义组件功能，已于日开始公测，请升级微信版本到或更高。
项目开源地址：
MinUI：https://github.com/meili/minui
Min Cli：https://github.com/meili/min-cli
是的，我们撸了一个新轮子。
在这个前端高速发展的时代，撸轮子并不是目的，而是解决问题的手段。我们希望通过这个轮子，帮助像我们这样的小程序开发者，优雅高效的搞定小程序中自定义组件的 开发 和 使用 这 2 个环节，为开发者 赋能。
授人以渔，基于 Min 提供的开发赋能，和 MinUI 组件库实践的参考，不同小程序的开发者，可以快速建立起符合其自身需求的组件化体系。
缘起一切的初衷，都始于我们希望像下面这样，优雅的定义和使用组件：
但这并不容易。
首先，需要微信官方支持以自定义标签的方式来封装组件。我们知道，在以往的小程序开发中，这样的方式是不支持的。所喜，微信团队和我们的想法一致。依托于同微信团队良好的沟通渠道，我们团队在第一时间获得了自定义标签组件的内测邀请，并开始着手将我们的想法落地。（PS：微信自定义组件功能，已于 2017.11.02 日开始公测，请升级微信版本到 6.5.16 或更高）。
其次，需要降低组件的开发成本。
再次，需要便捷的在既有项目中安装、应用和更新组件。
组件开发对于组件的开发，Min 提供了一整套的开发方案，包括范式、工具化环境、Demo 预览小程序、内置化文档、自动编译打包、一键式发布等能力。
○ 单文件策略
我们知道，小程序目前的工程化文件结构，是多文件形式（.wxml、.wxss、.js）。为了提供额外的能力封装，Min 采用了单文件的方式（.wxc 文件）来开发一个组件，一个基于 Min 开发的组件就是一个 npm 包。
采用单文件的策略，既有对开发者诸如 Vue 单文件开发习惯的考虑，同时也基于在单文件的编译环节，我们可以做一些额外的赋能 —— 如对 less、postcss 的支持；再如对全局变量、模板、引用路径 Resolve 等支持；抑或通过插件的引入，提供其他的额外能力。
○ Min Cli
Min 提供了一套 Cli 工具 （https://github.com/meili/min-cli） 来帮助开发者快速创建、编译、发布您的组件。通过$ npm -i -g @mindev/min-cli，您就能获得 Min 提供的一键式能力。
通过 $ min init ，您可以快速的创建本地的组件开发环境。这个组件开发环境，就是一个组件的预览小程序，可以通过微信开发者工具便捷的查看组件的运行情况。
通过 $ min new name （name 是你的组件名）来新建一个组件。
通过 $ min dev *name 来开启开发模式 —— 组件的最新改动，都会在微信开发者工具中实时的刷新显示。
通过 $ min publish *name 来最终发布你的组件，发布后的组件即为一个随时可用的 npm 包。
○ MinUI
同时，我们还提供了一套小程序 UI 组件库，这也是我们团队在业务中使用的组件库。您可以通过搜索小程序 “MinUI” 、或通过扫描下方的“小程序二维码”来访问它。
当然，它也是开源的 :) （https://github.com/meili/minui）。
组件应用对于组件的应用，Min 提供了在原有的应用项目中，一键式安装、一键式更新组件的能力。并提供了渐进增强的诸如应用全局变量、全局模板等能力支持。后续我们还将以插件化的方式，提供诸如代码检测、单测环境等能力支持。
○ 组件安装
在既有应用下，开发者可以通过 $min install *name 来安装一个组件，组件默认会安装到项目工程的 packages/ 文件夹下。
安装后的组件，即可以用小程序通用的方式在页面中引入和使用了。
○ 组件更新
对于组件的更新，你可以使用 $ min update *name 来一键搞定。
○ 渐进增强
Min 同时提供了一些应用全局性的渐进增强能力，以供开发者选择性使用。但这需要付出一点额外的成本。
前面提到，我们采用单文件 .wxc 的方式来开发一个组件，因为在编译环节可以做一些额外的事情，这里的 “c” 即为 component 的首字母。
同理，Min 还提供了 .wxp 和 .wxa，来为 page 和 app 提供一些额外的赋能。如果您已经在本地尝试基于 Min 的开发，就会发现本地的组件开发环境这个小程序，就是基于 .wxp 和 .wxa 来实现的。 ：）
短暂的结尾
我们希望 Min 能帮助你快速的解决组件开发中的痛点，我们也希望这个小 Baby 能够在社区的帮助中快速成长，所以我们将 Min 进行了开源。
希望有更多的同学通过实际的使用获得收益，更希望有改进的建议（吐槽 :p ）、或是共建，来帮助稚嫩的 Min 逐渐打磨的趋于成熟。
最后，再次附带 Github 上项目的开源地址：
MinUI：https://github.com/meili/minui
Min Cli：https://github.com/meili/min-cli
输出，才是最好的输入 : )
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/89514.html
摘要：微信小程序自定义组件由于作业部落貌似出了点问题，耽误了点时间，找了一个准备写。微信小程序的官方支持官方提供有一个模板属于小程序的自定义脚手架的相关内容。至此，暂时结束微信小程序的自定义组件化，明天写插件。 微信小程序自定义组件 ps 由于作业部落貌似出了点问题，耽误了点时间，找了一个stackedit.io准备写。无奈，这是要自己建编辑器的节奏啊。没有一个能靠的注 为何存在组件 组件间...
摘要：引入组件假如我要在里引入组件想在页面中使用组件必须在文件里注册组件。组件的属性列表组件的方法列表组件内数据传到外部在这个组件内我定义了这个方法，每次点击一级菜单或二级菜单的时候我就用过方法把的值传到组件外部以供使用。 一、前言 如果小程序中有可复用的UI且具有一定的功能性，就可以使用自定义组件将其封装起来。（如果仅仅只需要复用UI可使用template） 下面介绍父子组件的数据传递方法...
摘要：组件介绍组件的内部运动是动画，使用的是开源动画库的出现是为了解决小程序开发时的复杂运动会话框。但是我们在结构中用语句来控制组件的显示与隐藏的。因为该组件的使命是提供多种运动方式，所以不会定义用于装载内容盒子的样式。 vi-motion 组件介绍 vi-motion组件的内部运动是css3动画，使用的是animate开源动画库 vi-motion的出现是为了解决小程序开发时的复杂运动会...
摘要：小程序的视图层目前使用作为渲染载体，而逻辑层是由独立的作为运行环境。比如小程序的，通信一次就像是写情书所以，严格来说，小程序是微信定制的混合开发模式。出栈入栈解决小程序接口不支持的问题小程序的所有接口，都是通过传统的回调函数形式来调用的。 作者：张利涛，视频课程《微信小程序教学》、《基于Koa2搭建Node.js实战项目教学》主编，沪江前端架构师本文原创，转载请注明作者及出处 小程...
阅读 3205·2021-09-30 09:47
阅读 2269·2021-09-10 10:51
阅读 1827·2021-09-08 09:36
阅读 2911·2019-08-30 12:56
阅读 3002·2019-08-30 11:16
阅读 2603·2019-08-29 16:40
阅读 2979·2019-08-29 15:25
阅读 1618·2019-08-29 11:02
