花生_TL007

这个屌丝很懒，什么也没留下！

热门标签

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

作者：花生_TL007 | 2024-02-15 23:21:35

踩

微信小程序引入antdesignmini v2

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-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="{{ imageURL }}"
/>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/88139