Min组件库示例

  • 示例项目是放在 min-cli 工程下的，首先需要通过 git 将仓库 clone 下来
  1. $ git clone https://github.com/meili/min-cli
  • 进入组件库示例项目，在工程的 example/min-ui 目录下
  1. $ cd ~/min-cli/example/min-ui
  • 安装项目依赖
  1. $ npm install
  • 开启本地调试。未安装 min 命令行工具？点击这里查看 安装教程
  1. $ min dev
  • 打开微信开发者工具，选择 dist 文件夹，浏览项目。

示例里默认有个 toast 组件，通过微信开发者工具预览可以看到这个样子：组件库首页

用户可以点击首页的导航进入到 toast 组件的示例页面，可以看到组件的示例代码展示、API文档 和 Changelog 版本日志：toast组件示例页面

  • 接下来进一步了解 组件package、Demo示例、API文档 这三者是怎么通过示例页面呈现出来的。

首先我们看下目录结构

  2.   min-ui
  3.   ├── dist                              微信开发者工具指定的目录
  4.   ├── node_modules
  5.   ├── packages                          代码编写的目录（该目录为使用 Min 后的开发目录，用于管理各个 组件package 的主目录）
  6.   |   ├── wxc-toast                       组件的 package 目录
  7.   |   |   ├── src
  8.   |   |   |   └── index.wxc                   组件的源码编写文件（组件入口文件必须为index.wxc）
  9.   |   |   ├── package.json                  组件的 package 配置
  10.   |   |   └── README.md                     组件的 README 文档
  11.   └── src                               代码编写的目录（该目录为使用 Min 后的开发目录）
  12.       ├── pages
  13.       |   ├── home
  14.       |   |   ├── index.wxp                   home 页面
  15.       |   ├── toast                         toast组件示例
  16.       |   |   ├── demos                       示例目录列表
  17.       |   |   |   └── demo-default.wxc          示例代码
  18.       |   |   └── index.wxp                   示例入口页面
  19.       └──app.wxa                        小程序配置项

小程序的页面放在pages目录下，而每一个组件应该是一个完整独立的NPM包而不是一个完整页面。所以 Min 设计了这样的目录结构，将组件package 和展示组件的示例页面是放在不同目录下。即 组件package 放在 packages 目录下，示例页面放在 src/pages 目录下。有序组织页面和组件的引用关系，将 示例入口页面 引用多个 示例代码 和一个 组件文档 ，再由每个 示例代码 引用 组件源码 ，用户通过 min dev 指令执行转换成原生小程序的目录结构

注： dist目录 是微信开发者工具指定的目录，该目录由 Min 的 dev 指令自动编译生成，请不要直接修改该目录下的文件

  • 请尝试修改组件代码

打开组件 ~/min-ui/packages/wxc-toast/src/index.wxc 文件

  1. <template>
  2.   <view class="wxc-toast">
  3.     <view>WxcToast Component</view>
  4.     <!-- 修改此处 - start -->
  5.     <view class="text">这是一行新增的代码</view>
  6.     <!-- 修改此处 - end -->
  7.   </view>
  8. </template>
  10. <script>
  11. export default {
  12.   config: {
  13.     usingComponents: { }
  14.   },
  15.   behaviors: [ ],
  16.   properties: { },
  17.   data: { },
  18.   methods: { }
  19. }
  20. </script>
  22. <style>
  23. .wxc-toast {
  24. }
  25. /* 修改此处 - start */
  26. .text {
  27.   color: red;
  28. }
  29. /* 修改此处 - end */
  30. </style>

修改保存后，切换到 微信开发者工具 再进入到 taost组件的示例页面 toast组件示例页面

  • 请尝试为组件新增一个Demo示例

    • 进入 ~/min-ui/pages/toast/demos 示例目录
    • 创建一个示例文件 demo-custom.wxc （示例文件名以demo-开始） 或复制已有的文件（为了方便，这里直接采用复制的方式）
  1. <template>
  2.   <wxc-toast></wxc-toast>
  3. </template>
  5. <script>
  6. export default {
  7.   config: {
  8.     usingComponents: {
  9.       'wxc-toast': 'wxc-toast'
  10.     }
  11.   },
  12.   data: { },
  13.   methods: { }
  14. }
  15. </script>
  17. <style>
  18. </style>
  • 打开示例页面 ~/min-ui/pages/toast/index.wxp 文件，把刚新增的示例加进来
  1. <template>
  2.   <example title="wxc-toast" desc="提示">
  4.     <example-demo title="请填写示例名称" desc="请填写示例描述">
  5.       <demo-default></demo-default>
  6.     </example-demo>
  8.     <!-- 修改此处 - start -->
  9.     <example-demo title="请填写示例名称" desc="请填写示例名称">
  10.       <demo-custom></demo-custom>
  11.     </example-demo>
  12.     <!-- 修改此处 - end -->
  14.   </example>
  15. </template>
  17. <script>
  18. export default {
  19.   config: {
  20.     usingComponents: {
  21.       'example': '@minui/wxc-example',
  22.       'example-demo': '@minui/wxc-example-demo',
  23.       'example-md': '@minui/wxc-example-md',
  24.       'demo-default': './demos/demo-default',
  25.       // 修改此处 - start
  26.       'demo-custom': './demos/demo-custom' // 注册一个新的组件（每个示例代码都是一个组件来输出）
  27.       // 修改此处 - end
  28.     }
  29.   },
  30.   data: { }
  31. }
  32. </script>
  34. <style>
  35. </style>
  • 修改保存后，切换到 微信开发者工具，进入到 toast 组件示例页面，看到新增了一个示例 toast组件示例页面
    • 此时，您是否已经了解 Min设计的组件库开发方式呢? 有任何疑问或问题请提交 issues 或加入到微信群 Min 使用交流群 讨论，请描述您的问题并提供具体的异常截图，以便min-team快速判断解决。

接下来请进一步了解在 Min组件库项目 里常用的功能