UI框架_TDesign

TDesign 企业级设计体系（前端UI组件库）

地址：https://tdesign.tencent.com

支持桌面端、移动端、小程序

温馨提示

目前组件库处于 Beta 阶段，快速迭代中，请留意版本变化

引入TDesign

使用 NPM

小程序已经支持使用 NPM 安装第三方包

npm i tdesign-miniprogram -S --production

// 安装完之后，需要在微信开发者工具中对 npm 进行构建：工具 - 构建 npm

修改 app.json

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

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

使用组件

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

{"usingComponents": {"t-button": "tdesign-miniprogram/button/button"}
}

接着就可以在 wxml 中直接使用组件

 <t-button type="primary">按钮</t-button>

1. 微信小程序引入UI框架 TDesign 是否可以与微信新版组件样式( v2 ) 共存：否

UI框架_TDesign组件

Rate 评分

全局引入，在 miniprogram 根目录下的 app.json 中配置，局部引入，在需要引入的页面或组件的 index.json 中配置

{"usingComponents": {"t-rate": "tdesign-miniprogram/rate/rate"}
}

wxml实现

<view class="demo-rate"><view class="demo-rate__title">请点击评分</view><!-- 实心评分，设置属性：variant--><t-rate value="{{ value }}" variant="filled" bind:change="onChange" />
</view>

逻辑实现

Page({data: {value: 3},onChange(e) {const { value } = e.detail;this.setData({value});},
});

Sticky 吸顶容器

全局引入，在 miniprogram 根目录下的 app.json 中配置，局部引入，在需要引入的页面或组件的 index.json 中配置

"usingComponents": {"t-button": "tdesignminiprogram/button/button","t-sticky": "tdesignminiprogram/sticky/sticky"
}

wxml实现

<view class="top"><t-sticky offset-top="{{0}}"><t-button class="box2" theme="danger" t-class="inner-box" size="small">吸顶距离</t-button></t-sticky><view class="box"></view>
</view>

wxss实现

.top {margin-top: 100px;
}
.box{height: 1000px;
}

Toast 轻提示

全局引入，在 miniprogram 根目录下的 app.json 中配置，局部引入，在需要引入的页面或组件的 index.json 中配置

"usingComponents": {"t-toast": "tdesign-miniprogram/toast/toast"
}

逻辑实现

import Toast from 'tdesignminiprogram/toast/index';
Page({onLoad() {Toast({context: this,selector: '#t-toast',message: '轻提示文字内容',});}
})

<t-toast id="t-toast" />

UI框架_Vant

Vant 是一个轻量、可靠的移动端组件库

地址：https://vant-contrib.gitee.io/vant/#/zh-CN

使用方式

步骤一通过 npm 安装

npm i @vant/weapp -S --production

步骤二修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三修改 project.config.json

开发者工具创建的项目， miniprogramRoot 默认为 miniprogram ， package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置

{..."setting": {..."packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}]}
}

温馨提示

由于目前新版开发者工具创建的小程序目录文件结构问题， npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

步骤四构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件

引入组件

按钮用于触发一个操作，如提交表单

引入

在 app.json 或 index.json 中引入组件
"usingComponents": {"van-button": "@vant/weapp/button/index"
}

代码演示

支持 default 、 primary 、 info 、 warning 、 danger 五种类型，默认为 default 。

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

UI框架_Vant组件

使用UI组件库，可以提升开发效率，有一些特效是小程序组件并没有提供的，可以在组件库中寻找

Overlay 遮罩层

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作

引入

在 app.json 或 index.json 中引入组件

"usingComponents": {"van-overlay": "@vant/weapp/overlay/index"
}

代码演示

<van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>
<van-overlay show="{{ show }}" bind:click="onClickHide" />

Page({data: {show: false},onClickShow() {this.setData({ show: true });},onClickHide() {this.setData({ show: false });},
});

Grid 宫格

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航

引入

在 app.json 或 index.json 中引入组件

"usingComponents": {"van-grid": "@vant/weapp/grid/index","van-grid-item": "@vant/weapp/grid-item/index"
}

代码演示

<van-grid><van-grid-item icon="photo-o" text="文字" /><van-grid-item icon="photo-o" text="文字" /><van-grid-item icon="photo-o" text="文字" /><van-grid-item icon="photo-o" text="文字" />
</van-grid>

Card 商品卡片

商品卡片，用于展示商品的图片、价格等信息

引入

在 app.json 或 index.json 中引入组件

"usingComponents": {"van-card": "@vant/weapp/card/index"
}

代码演示

<van-cardnum="2"price="2.00"desc="描述信息"title="商品标题"thumb="{{ imageURL }}"
/>

微信小程序框架(五)-全面详解（学习总结---从入门到深化）相关推荐

微信小程序框架(一)-全面详解（学习总结---从入门到深化）
目录小程序与普通网页开发的区别体验小程序微信小程序账号申请微信小程序开发者工具下载安装创建项目开发者工具说明小程序目录结构描述整体的 app 描述各自页面的 page 全局配置_Pa ...
微信小程序框架(二)-全面详解（学习总结---从入门到深化）
目录组件_基础视图容器 view 文本 text 图片 image 组件_滑块视图容器基本实现 Swiper常用属性说明组件_滚动视图区域水平滚动垂直滚动常用属性组件_icon 图标使 ...
微信小程序框架(四)-全面详解（学习总结---从入门到深化）
目录路由_navigateTo 页面跳转携带参数返回上一级页面路由_redirectTo 页面跳转路由_reLaunch 页面跳转路由_switchTab 实现 tabbar 页面跳转交 ...
php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...
微信小程序02【配置详解、生命周期-app对象使用、页面跳转详解】
学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...
微信小程序（三）详解篇
一.什么是小程序(了解) 小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念 ...
新手微信小程序制作教程步骤详解！
制作微信小程序方法: 1.在微信公众平台上申请一个小程序账号,申请完成之后需要进行微信认证,并且需要缴纳300元的认证费用.如果不缴纳300元的费用,微信小程序商城没有开通支付功能. 2.新建一个空白 ...
第5节：开发微信小程序之文档详解
前言前面4节,我们讲解了为什么要开这一个专栏,以及第一个小程序Hello World,与其说第一个小程序,不如说微信开发者工具为我们创建了一个基础工程项目!然后,又开发了一个真正实现突破0的小程序- ...
微信小程序开发工具安装详解
从事java后端工作的程序员,为了不让自己技术落伍,或多或少应该要了解一点前端技术,特别是时下比较火爆的微信小程序,它有取代手机原生app的趋势. 本人对微信小程序是零基础认识,下面记录一下微信小程序 ...

微信小程序框架(五)-全面详解（学习总结---从入门到深化）

目录

UI框架_TDesign

引入TDesign

UI框架_TDesign组件

Rate 评分

Toast 轻提示

UI框架_Vant

使用方式

引入组件

UI框架_Vant组件

Overlay 遮罩层

Grid 宫格

Card 商品卡片

微信小程序框架(五)-全面详解（学习总结---从入门到深化）相关推荐

最新文章

热门文章