TDesign 是騰訊設(shè)計(jì)團(tuán)隊(duì)推出的一套小程序 UI 組件庫，提供了一套豐富的組件，可以幫助開發(fā)者快速搭建小程序頁面。

TDesign 官網(wǎng) - 快速開始

初始化 NPM

在微信開發(fā)者工具中新建一個(gè)小程序項(xiàng)目 tdesign-demo，如果項(xiàng)目中沒有 package.json 文件，通過如下命令生成一個(gè)：

npm init -y

安裝 TDesign 組件庫

在項(xiàng)目根目錄下執(zhí)行以下命令，安裝 TDesign 組件庫：

npm i tdesign-miniprogram -S --production

執(zhí)行完成后，將會在項(xiàng)目根目錄下生成 node_modules 目錄：

修改 project.config.json

在項(xiàng)目根目錄下找到 project.config.json 文件，添加如下配置：

微信官方文檔 - 小程序 - npm 支持 中關(guān)于 packNpmManually 和 packNpmRelationList 的說明：

配置 project.config.json 的 setting.packNpmManually 為 true，開啟自定義 node_modules 和 miniprogram_npm 位置的構(gòu)建 npm 方式。

配置 project.config.json 的 setting.packNpmRelationList 項(xiàng)，指定 packageJsonPath 和 miniprogramNpmDistDir 的位置。

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

然后在微信開發(fā)者工具中點(diǎn)擊菜單欄的 工具 -> 構(gòu)建 npm，等待構(gòu)建完成后點(diǎn)擊 確定：

可以看到在 miniprogram 目錄下多了 miniprogram_npm 目錄：

接著點(diǎn)擊 詳情 -> 本地設(shè)置，勾選 將 JS 編譯成 ES5。然后重啟微信開發(fā)者工具：

修改 app.json

將 app.json 中的 "style": "v2" 移除。因?yàn)樵撆渲帽硎締⒂眯掳娼M件樣式，將會導(dǎo)致 TDesign 的組件樣式錯(cuò)亂。

修改 tsconfig.json

如果使用 TypeScript 開發(fā)，需要修改 tsconfig.json 指定 paths：

{
  "compilerOptions": {
    "paths": {
      "tdesign-miniprogram/*":["./miniprogram/miniprogram_npm/tdesign-miniprogram/*"]
    }
  }
}

使用組件

以按鈕組件為例，只需要在 json 文件中引入按鈕對應(yīng)的自定義組件即可：

{
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  }
}

接著就可以在 wxml 中直接使用組件：

<t-button theme="primary">按鈕</t-button>

到此這篇關(guān)于微信小程序中使用 TDesign 組件庫的文章就介紹到這了,更多相關(guān)微信小程序TDesign 組件庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論