使用组件

在已有小程序项目中使用基于 Min 开发的组件，请按照微信小程序组件化文档所示，引入组件并使用即可。

使用步骤

  • 进入进入 已有小程序项目 的根目录的根目录
  1. $ cd ~/your_weapp_project/
  • 安装 toast 组件，这里以 MinUI 组件库的 toast 组件举例。了解安装组件，如已安装可跳过此步骤
  1. your_weapp_project
  2. ├──dist
  3. |   ├──packages
  4. |   |   ├── @minui
  5. |   |   |   ├── wxc-toast
  6. |   |   |   |   ├── dist
  7. |   |   |   |   |   ├── index.js
  8. |   |   |   |   |   ├── index.wxml
  9. |   |   |   |   |   ├── index.wxss
  10. |   |   |   |   |   ├── index.json
  • 准备在 pages 目录下的 home 页面使用自定义组件（下面都是以 home 页面举例）
  1. your_weapp_project
  2. ├──pages
  3. |   ├── home
  4. |   ├── index.js
  5. |   |   ├── index.wxml
  6. |   |   ├── index.wxss
  7. |   |   ├── index.json
  • 进入 pages/home/index.json 文件中进行引用声明，此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：
  1. {
  2.   "usingComponents": {
  3.     "wxc-toast": "../../dist/packages/@minui/wxc-toast/dist/index"
  4.   }
  5. }
  • 进入 pages/home/index.wxml 文件中就可以像使用内置组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。
  1. <view>
  2.   <!-- 以下是对一个自定义组件的引用 -->
  3.   <wxc-toast is-show="{{true}}" text="提示成功!"></wxc-toast>
  4. </view>

自定义组件的 wxml 节点结构在与数据结合之后，将被插入到引用位置内。