使用方式

  • 使用前：扩展组件库基于智能小程序自定义组件构建，在使用扩展组件库之前，建议先阅读熟悉智能小程序自定义组件。

  • 如何使用：目前组件库灵活支持三种引入方式：npm 、开发者工具 和 动态库方式（推荐使用前两种）。

方式一：npm 引入

  1. 首先要在项目中 npm 安装依赖包@smt-ui/component；

  2. 引入 npm 包中的自定义组件

  1. {
  2.     "usingComponents": {
  3.         "smt-icon": "@smt-ui/component/src/icon"
  4.     }
  5. }
  1. 在对应页面的 swan 中直接使用该组件
  1. <smt-icon name="arrow-left"></smt-icon>

方式二：开发者工具 Smart UI 面板引入

  1. 打开开发者工具，显示编辑器界面
    使用方式 - 图1

  2. 点击编辑器右上角，打开组件面板
    使用方式 - 图2

  3. 选择 Smart UI 面板，即可查看 Smart UI 的组件列表
    使用方式 - 图3

  4. 在面板上选中组件，点击插入，即可将组件插入当前的 .swan 文件中，模拟器中也可查看效果
    使用方式 - 图4

方式三：动态库引入

  1. 首先要在项目的 app.json 引入动态库，动态库相关可参考文档。
  1. "dynamicLib": {
  2.     // 'smartUI' 是个可自己定的别名。本小程序中统一用这个别名引用此动态库。
  3.     "smartUI": {
  4.         // 这个 provider 就是发布的动态库唯一名字，须写 "smart-ui"。
  5.         "provider": "smart-ui"
  6.     }
  7. },
  1. 引入动态库的自定义组件。
  1. {
  2.     "usingComponents": {
  3.         "smt-icon": "dynamicLib://smartUI/smt-icon"
  4.     }
  5. }
  1. 在对应页面的 swan 中直接使用该组件。
  1. <smt-icon name="arrow-left"></smt-icon>
  1. 目前已支持动态库引入的组件包括：feed 信息流、feed-item 信息流子项、icon 图标、page-status 页面状态、refresh 刷新、spin 加载、mask 关注引导蒙层、textarea 自定义多行输入框、search-bar 自定义搜索框、image-uploader 图片上传器。