【微信小程序】搭建项目步骤 + 引入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;
}

效果:

相关推荐
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差2 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI2 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220692 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧