互联网保险论文,企业网站搜索引擎优化方案,建设工程价款结算暂行办法,重庆网站开发目录 创建1个空文件夹#xff0c;选择下图基础模板
开启/支持sass
创建公共style文件并引入
引入Tdesign UI:
1. 初始化#xff1a;
2. 安装后#xff0c;开发工具进行构建#xff1a;
3. 修改 app.json
4. 使用
5. 自定义主题色 创建1个空文件夹#xff0c;选择下…目录 创建1个空文件夹选择下图基础模板
开启/支持sass
创建公共style文件并引入
引入Tdesign UI:
1. 初始化
2. 安装后开发工具进行构建
3. 修改 app.json
4. 使用
5. 自定义主题色 创建1个空文件夹选择下图基础模板 开启/支持sass
在下图文件中添加配置并更改文件后缀wxss改为scss
后面如果报错重新打开一遍编辑器即可 创建公共style文件并引入 引入Tdesign UI:
1. 初始化
npm init -y
安装包如果很慢可以指定国内源
npm i tdesign-miniprogram -S --production
npm i tdesign-miniprogram -S --production --registryhttps://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 themeprimary按钮/t-button
使用其他组件请看官方文档
注意每使用一个都需要导入一次。就像这样
{usingComponents: {t-button: tdesign-miniprogram/button/button,t-row: tdesign-miniprogram/row/row,t-col: tdesign-miniprogram/col/col}
}
5. 自定义主题色
app.scss中添加
page {/* 主题色 */--td-brand-color: #477afd;/* 成功 */--td-success-color: #43c902;/* 警告 */--td-warning-color: #f7b500;/* 失败 */--td-error-color: #ed1a2c;
}
效果
