快捷導(dǎo)航

前端的框架TDesign小程序組件庫體驗

更新時間：2022年11月25日 11:06:59 作者：低代碼布道師

TDesign是騰訊各業(yè)務(wù)團隊在服務(wù)業(yè)務(wù)過程中沉淀的一套企業(yè)級設(shè)計體系,下面這篇文章主要給大家介紹了關(guān)于前端的框架TDesign小程序組件庫體驗的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下

前言

原來小程序開發(fā)有組件庫選擇的問題，可以使用WeUI或者Vant。今年騰訊開源了前端的框架TDesign，我也分享了兩篇使用文章。

年初分享的主要是PC端的框架，除了有PC端的框架外，最近TDesign又新出了小程序的框架，組件比較豐富，今天就帶著大家體驗一下。

1 創(chuàng)建小程序

用微信掃碼登錄微信開發(fā)者工具，登錄之后點擊+號來創(chuàng)建項目

創(chuàng)建項目時，先需要填入項目名稱，選擇程序存放的目錄，填入appid，后端選擇不使用云服務(wù)，模板的話選擇Javascript-基礎(chǔ)模板

2 微信開發(fā)者工具介紹

創(chuàng)建好項目之后可以看到微信開發(fā)者工具的一個界面，界面是包含幾個區(qū)域

導(dǎo)航條有默認的各種各樣的功能，預(yù)覽區(qū)是我們小程序編譯之后的效果，文件區(qū)域我們可以創(chuàng)建各種各樣的文件，代碼編輯區(qū)可以寫代碼，調(diào)試區(qū)可以顯示各種調(diào)試信息。

有的開發(fā)者喜歡用vscode或者uniapp來開發(fā)小程序，我呢還是喜歡原生的工具，我們只是需要最終的結(jié)果，選哪種工具最終的結(jié)果都是一樣的。

3 項目的初始化

我們現(xiàn)在使用模板是一個空白的項目，如果需要使用TDesign的，我們先需要做初始化，生成package.json文件

在調(diào)試區(qū)，切換到終端

點擊新建終端

在光標的位置輸入如下命令

npm init

一路按回車，完成package.json的創(chuàng)建

4 安裝TDesign

在終端的命令行繼續(xù)輸入如下的命令

npm i tdesign-miniprogram -S --production

安裝成功后可以在文件區(qū)域看到多了一個node_modules

按照官方文檔的指引是要求做npm的構(gòu)建，在導(dǎo)航條上找到工具，在工具下找到構(gòu)建npm

構(gòu)建成功后在文件區(qū)域會多了一個miniprogram_npm的文件夾

5 全局引入或者局部引入組件

我們引入這個庫就是為了使用，如果全局引入，就修改app.json，用哪個組件就引入哪個組件，比如我們需要使用Button組件，按如下引入

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button",
    "t-button-group": "tdesign-miniprogram/button-group/button-group"
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

然后我們在index.wxml里增加按鈕組件的代碼，查看效果

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 獲取頭像昵稱 </button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
      <view wx:else> 請使用1.4.4及以上版本基礎(chǔ)庫 </view>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
  <t-button t-class="external-class" theme="primary" block disabled="{{disabled}}">強按鈕</t-button>
</view>