本文記錄用tdesign組件庫開發(fā)微信小程序 ，版本管理jihulab

一、創(chuàng)建項目

1.在jihulab上創(chuàng)建項目，tdesignhelloword

2.電腦中新建項目文件夾，tdesignhelloword，在cmd中進入這個路徑：cd /d 文件夾路徑

3.克隆jihulab上的項目：git clone https://jihulab.com/...../tdesignhelloworld.git

4.在項目文件夾內(nèi)，用以下代碼新建《.gitignore》文件

# Windows

[Dd]esktop.ini

Thumbs.db

$RECYCLE.BIN/

# macOS

.DS_Store

.fseventsd

.Spotlight-V100

.TemporaryItems

.Trashes

# Node.js

node_modules/

5.在開發(fā)者工具中新建javascript模版的項目，項目路徑隨便。這個項目文件結(jié)構(gòu)清晰，相對干凈，需要看tdesign示例的，另外建tdesign兩個模版的項目就好

6.把第5步新建項目里的文件復(fù)制到從jihulab上克隆下來的項目所在文件夾中

7.cmd轉(zhuǎn)入tdesignhelloword文件夾，git命令提交所有文件

二、調(diào)用tdesign組件

1.cmd轉(zhuǎn)入項目所在文件夾

2.安裝tdesign：npm i tdesign-miniprogram -S --production

3.微信開發(fā)者工具，打開項目，菜單：工具 / 構(gòu)建 npm

　剛構(gòu)建完時，會有3個錯，甚至報"pages/index/index"未注冊，此時執(zhí)行第4步即可

4.將 app.json 中的 "style": "v2" 移除，此時，項目可以重新正常運行

三、測試tdesign的button組件

1.在pages下新建button文件夾，在這個文件夾下新建Page，輸入index，會自動生成4個文件

2.修改pages\button\index.json，引入組件

{

? "usingComponents": {

? ? "t-button": "tdesign-miniprogram/button/button"

? }

}

3修改pages\button\index.wxml，調(diào)用組件

<view class="button-example">

? <t-button theme="primary" size="large" bindtap="onTabToIndex">轉(zhuǎn)去首頁</t-button>

? <t-button theme="light" size="large" bindtap="onTabToLog">查看日志</t-button>

? <t-button size="large">填充按鈕</t-button>

</view>

<view class="button-example">

? <t-button theme="primary" size="large" variant="outline">描邊按鈕</t-button>

? <t-button theme="primary" size="large" variant="text">文字按鈕</t-button>

</view>

4.修改pages\button\index.js，加入事件

Page({

? ? onTabToIndex() {

? ? ? ? wx.navigateTo({

? ? ? ? ? url: '../index/index'

? ? ? ? })

? ? ? },

? ? ? onTabToLog() {

? ? ? ? wx.navigateTo({

? ? ? ? ? url: '../logs/logs'

? ? ? ? })

? ? ? },

})

5.修改pages\button\index.wxss，加入樣式

.button-example {

? ? margin: 0 32rpx;

? ? display: grid;

? ? grid-template-columns: repeat(3, 1fr);

? ? gap: 32rpx;

? }

??

? .button-example:not(:last-child) {

? ? margin-bottom: 32rpx;

? }

預(yù)覽可見測試成功。