【微信小程序】搭建项目步骤 + 引入Tdesign UI

目录

创建1个空文件夹,选择下图基础模板

开启/支持sass

创建公共style文件并引入

[引入Tdesign UI:](#引入Tdesign UI:)

[1. 初始化:](#1. 初始化:)

[2. 安装后,开发工具进行构建:](#2. 安装后,开发工具进行构建:)

[3. 修改 app.json](#3. 修改 app.json)

[4. 使用](#4. 使用)

[5. 自定义主题色](#5. 自定义主题色)


创建1个空文件夹,选择下图基础模板

开启/支持sass

在下图文件中添加配置,并更改文件后缀wxss改为scss

后面如果报错,重新打开一遍编辑器即可

创建公共style文件并引入

引入Tdesign UI:

1. 初始化:

复制代码
npm init -y

安装包:如果很慢,可以指定国内源

复制代码
npm i tdesign-miniprogram -S --production

npm i tdesign-miniprogram -S --production --registry=https://registry.npmmirror.com/

2. 安装后,开发工具进行构建:

微信小程序开发工具 - 构建 npm

构建后,会在项目根目录下生成一个新的文件夹:miniprogram_npm

3. 修改 app.json

app.json 中的 "style": "v2" 移除。

因为 该配置 表示启用新版组件样式,将会导致 TDesign 的组件样式错乱。

4. 使用

以按钮组件为例,只需要在JSON文件中引入按钮对应的自定义组件即可

app.json中全局导入一次,就可以在任意页面中使用。

复制代码
{
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  }
}

如果是在某个页面中使用,则在对应的页面的json中导入即可

在页面(wxml)中使用

复制代码
<t-button theme="primary">按钮</t-button>

使用其他组件,请看官方文档

注意:每使用一个,都需要导入一次。就像这样:

复制代码
{
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button",
    "t-row": "tdesign-miniprogram/row/row",
  	"t-col": "tdesign-miniprogram/col/col"
  }
}

5. 自定义主题色

app.scss中添加:

css 复制代码
page {
    /* 主题色 */
    --td-brand-color: #477afd;
    /* 成功 */
    --td-success-color: #43c902;
    /* 警告 */
    --td-warning-color: #f7b500;
    /* 失败 */
    --td-error-color: #ed1a2c;
}

效果:

相关推荐
破无差5 小时前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张6 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬7 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106327 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI8 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220699 小时前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld9 小时前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄11 小时前
mobx-miniprogram小程序的数据传输
小程序
说私域13 小时前
“开源AI智能名片链动2+1模式S2B2C商城小程序”在直播公屏引流中的应用与效果
人工智能·小程序·开源
!win !15 小时前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序