使用方式

前提条件

引入方式

目前模板灵活支持两种引入方式,npm 和开发者工具快速创建方式

方式一:npm 引入

  1. 在小程序根目录执行下方命令,下载页面模板的对应的 npm 包:
  1. npm i @smt-ui-template/page-status // 模板名称
  1. 将对应的模板文件拷贝到当前小程序合适的目录下(如 pages):

“模板文件”为 npm 包内 @smt-ui-template-xxx 文件

  1. .
  2. ├── project.swan.json
  3. ├── app.json
  4. ├── app.js
  5. ├── pages
  6. └── @smt-ui-template-status // 模板文件
  1. 在小程序根目录的 app.json 中配置模板页面的 path 路径,查看效果:
  1. {
  2. "pages": [
  3. ...
  4. "pages/@smt-ui-template-status/index"
  5. ...
  6. ]
  7. }
  1. 为了方便在开发者工具中查看模板页的效果,可以设置模板页为小程序预览的首页。该功能的说明请参考自定义编译文档

使用方式 - 图1

  1. 安装 npm 依赖
    部分模板在使用模板前,需要安装依赖。详情请参考对应模板“npm 依赖”版块。

方式二:开发者工具 - 页面模板

  1. 打开开发者工具,点击“页面模板”,选择相应模板,选中后点击右下角“立即使用”,填写相关信息点击右下角“完成”按钮。
    使用方式 - 图2

  2. 模板创建后,项目文件夹内包含完整的源代码并且可以直接运行预览。

二次开发

使用开发者工具的编辑器或者选择自己熟悉的编辑器对模板进行二次开发。
使用方式 - 图3