跳到主要内容

快速上手

Titian 小程序组件库 @titian-design/weapp 组件与 H5 组件库 API 基本一致，希望给你打造一致的开发体验。如果您是内网用户，欢迎访问Titian内部文档。

信息

使用 @titian-design/weapp 前，推荐先学习微信官方的 小程序快速上手 和 自定义组件介绍，以及 npm 支持。

1. 安装​

# 通过 npm 安装
npm install @titian-design/weapp -S --production

# 通过 yarn 安装
yarn add @titian-design/weapp --production

2. 修改 project.config.json​

信息

JavaScript 基础模板忽略此步

项目基于微信小程序 JavaScript 基础模板忽略这一步，即 app.json 和 project.config.json 同一层级，在项目根目录，采用默认的构建 npm 方式即可，无需修改。

如果使用了 TypeScript 基础模板，此时小程序 miniprogramRoot 默认是 miniprogram/ ，需要采用 自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式 。

// project.config.json
{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

3. 构建npm​

打开微信开发者工具，点击 工具 -> 构建 npm，构建完成后，即可引入组件。

4. 使用​

{
  "usingComponents": {
    "ti-button": "@titian-design/weapp/button/index"
  }
}