微信小程序常用的ui组件有哪些功能

专业小程序设计开发——助力新电商新零售

电话+V：159999-78052，欢迎咨询微信小程序常用的ui组件有哪些功能，[小程序设计与开发]，[小程序投流与推广]，[小程序后台搭建]，[小程序整套源码打包]，[为个体及小微企业助力]，[电商新零售模式]，[小程序运营推广及维护]

一、微信小程序常用视图容器组件使用详解

组件是视图层基本的组成单元，具备UI风格样式以及特定的功能效果。通过组件的选择和样式属性设计出不同的界面效果。一个组件包括开始标签和结束标签，属性用来装饰这个组件的样式。其语法格式如下：

标签名称属性=值内容/标签名称

视图容器(ViewContainer)组件用于排版页面为其他组件提供载体。常用视图容器有View、scroll-view和swiper等等。

2.1view

view容器是页面中最基本的容器组件，通过高度和宽度来定义容器大小。view相当于HTML中的div标签，是一个页面中最外层的容器，能够接受其他组件的嵌入。view容器可以通过flex布局定义内部项目的排列方式。属性如下表所示。

2.1.1案例本例设计了两组父子view容器的点击态，第一组父子view容器种子view容器不阻止点击态向父容器传递，第二组父子view容器中子view容器阻止点击态向父容器传递。pages/view/view.wxml代码如下：

viewclass="demo-box"viewclass="title"1.view小案例/viewviewclass="title"

(1)不阻止父容器的view-hover/viewviewclass="view-parent"hover-class="view-hover"我是父类容器viewclass="view-son"hover-class="view-hover"我是子类容器/view/viewviewclass="title"

(2)阻止父容器的view-hover/viewviewclass="view-parent"hover-class="view-hover"我是父类容器viewclass="view-son"hover-class="view-hover"hover-stop-propagationhover-start-time="3000"hover-stay-time="4000"我是子类容器/view/view/view

pages/view/view.wxss代码如下：

.view-parent{width:100%;height:350rpx;background-color:pink;text-align:center;}.view-son{width:50%;height:200rpx;background-color:skyblue;margin:20rpxauto;text-align:center;}.view-hover{background-color:red;}

app.wxss

.demo-box{padding:20rpx;margin:20rpx60rpx;border:1rpxsolidgray;}.title{display:flex;flex-direction:row;margin:20rpx;justify-content:center;}

页面初始效果点击第1组子容器点击第2组子容器在view.wxml种放置两组view容器，在app.wxss文件中设置父容器背景色为浅红色，子容器背景色为浅蓝色，通过hover-class=view-hover为标签增加属性，点击态均设置为点击后背景色更新为红色。第一组不阻止点击态传递给父容器，在第二组子类容器中通过hover-stop-propagation来组织点击态传递给父容器，并设置属性hover-start-time=3000，hover-stay-time=4000，当点击子容器时，3s后出现点击状态，当手指松开4s后，子容器背景色恢复为初始颜色。

2.2scroll-view

scroll-view容器为可滚动的视图容器，允许用户通过手指在容器上滑动来改变显示区域，常见的滑动方向有水平滑动和垂直滑动。其属性表如下所示。注意：在使用纵向滚动时，需要为设置一个固定宽度。

2.2.1案例pages/scroll-view/scroll-view.wxml

viewclass="demo-box"viewclass="title"2.scroll-view小案例/viewviewclass="title"实现纵向滚动/viewscroll-viewscroll-yviewclass="scroll-item-y"元素一/viewviewclass="scroll-item-y"元素二/viewviewclass="scroll-item-y"元素三/viewviewclass="scroll-item-y"元素四/viewviewclass="scroll-item-y"元素五/viewviewclass="scroll-item-y"元素六/view/scroll-view/view

pages/scroll-view/scroll-view.wxss

scroll-view{height:600rpx;width:250rpx;margin:0auto;}.scroll-item-y{height:200rpx;line-height:200rpx;text-align:center;background-color:skyblue;border:1pxsolidgray;}

本例在scroll-view.wxml文件中设置组件，通过设置属性scroll-y，允许组件上下滑动。在scroll-view.wxss文件中设置其高度为600rpx，使得scroll-view组件能够纵向滑动。在中嵌套6组用于显示滚动效果，内部元素宽度均为250rpx。滑动前：滑动后：

2.3swiper

swiper组件为滑块视图容器，通常用于图片之间的切换播放，被形象地称为轮播图。其属性表如图所示。

2.3.1案例效果图：pages/swiper/swiper.wxml

viewclass="demo-box"viewclass="title"3.swiper小案例/viewviewclass="title"图片进行翻页切换/viewswiperindicator-dotsautoplayinterval="3000"swiper-itemimagesrc="/images/cat1.jpg"/image/swiper-itemswiper-itemimagesrc="/images/cat2.jpg"/image/swiper-itemswiper-itemimagesrc="/images/cat3.jpg"/image/swiper-item/swiper/view

pages/swiper/swiper.wxss

swiper{height:350rpx;}

二、UI框架Vant、ElementUI、WeUI、AUI、LayUI

前端开发中，UI框架如WeUI、LayUI、Vant、ElementUI、AUI等扮演着重要角色。它们旨在简化前端开发者的工作，提供预设计的CSS和JS资源，帮助快速构建静态页面。比如，WeUI主要侧重于微信小程序开发，提供简洁的样式；Vant则覆盖了移动端的全面需求，易于上手；ElementUI配合Vue，功能强大，适合快速搭建管理后台；AUI则提供原生javascript组件，便于移动端应用开发；LayUI则包含了静态页面和数据交互的解决方案，且有完整的开源系统可供参考。

LayUI尤其以其全面的服务，如自动生成的列表实例代码，让开发者无需过多关注HTML和CSS的细节，专注于数据处理和业务逻辑。然而，LayUI的维护已停止，开发者建议转向MVVM开发方式，尽管如此，它在中国前端历史上的贡献不可忽视，被广泛应用在各类网站中。

在选择UI框架时，初学者需要了解每个框架的特点和适用场景，例如Vant的全面组件库，ElementUI的管理后台支持，以及WeUI的微信生态一致性。AUI和LayUI则提供了更直接的组件渲染，适合快速原型开发或对性能要求较高的项目。

微信小程序开发教程：WeUI一个专为微信小程序设计的UI框架

原创2021-03-06 13:07·Jack张WeUI是什么

WeUI是一套同微信原生视觉体验一致的基础样式库。由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。它最初是为了给在微信端页面提供一致的视觉体验而开发开源的一个样式库，后续随着小程序、企业微信等等的开放能力出现，WeUI也提供了小程序、企业微信等等的版本。我们将要介绍的，就是WeUI的小程序版本。

WeUI提供非常多的基础组件。列举如下：

表单组件

Button按钮Input输入框List列表Slider滑块Uploader上传组件基础组件Article文章Badge徽章（小红点）Flex布局Footer脚注Gallery画廊…等等操作反馈ActionSheet弹出式菜单Dialog对话框Msg提示页Picker选择器Toast弹出式显示导航相关Navbar导航栏Tabbar选项栏搜索相关12345678910111213141516171819202122232425

官网地址：https://weui.io/。

Github地址为：
https://github.com/Tencent/weui。

小程序版本的地址为：
https://github.com/Tencent/weui-wxss/。

使用weui进行开发可以简单分为两个步骤。第一步：导入weui.wxss文件

因为weui.wxss是样式文件，所以导入需要在工程的样式文件进行导入，在这里因为我们是在项目全局使用weui的，所以在项目根目录的app.wxss文件进行导入。

weui.wxss文件位于项目的dist/style目录下，我们在工程下创建thirdparty目录，把weui.wxss文件拷贝进去。接着，在app.wxss导入weui.wxss文件。在app.wxss增加import这一行的代码。

/**app.wxss**/@import'thirdparty/weui.wxss';.container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:200rpx0;box-sizing:border-box;}12345678910111213第二步：参照weui提供的例子使用weui组件

我们可以在example目录找到对应组件的视图层代码和逻辑层代码，比如我们要使用的九宫格，就位于example目录下的grid。我们可以直接拷贝使用里面的代码。

为了演示我们自己依赖weui实现的九宫格，我们在上面创建的工程新建一个页面weuidemo，置于pages目录下。

图片描述然后在app.json下增加一个tabbar相关配置，使得我们可以通过tabbar访问到这个页面。

{"pages":["pages/index/index"，"pages/logs/logs"，"pages/weuidemo/weuidemo"]，"window":{"backgroundTextStyle":"light"，"navigationBarBackgroundColor":"#fff"，"navigationBarTitleText":"WeChat"，"navigationBarTextStyle":"black"}，"tabBar":{"list":[{"pagePath":"pages/index/index"，"text":"首页"，"iconPath":""，"selectedIconPath":""}，{"pagePath":"pages/weuidemo/weuidemo"，"text":"weuidemo"，"iconPath":""，"selectedIconPath":""}]}}1234567891011121314151617181920212223242526272829

接着把grid目录下的grid.wxml代码拷贝到weuidemo.wxml文件。

<viewclass="page"><viewclass="page__hd"><viewclass="page__title">Grid</view><viewclass="page__desc">九宫格</view></view><viewclass="page__bd"><viewclass="weui-grids"><blockwx:for="{{grids}}"wx:key="*this"><navigatorurl=""class="weui-grid"hover-class="weui-grid_active"><imageclass="weui-grid__icon"src="../images/icon_tabbar.png"/><viewclass="weui-grid__label">Grid</view></navigator></block></view></view></view>12345678910111213141516

对grid.js文件内容也拷贝到weuidemo.wxml文件。

Page({data:{grids:[0，1，2，3，4，5，6，7，8]}});12345

然后点击重新编译，就能看到九宫格的初步效果。

图片描述同时呢，会出现错误日志，提示相关图标没有找到，把图标路径修改或者按照代码的图标路径放置图标文件即可。

这样子，就可以完成在自建小程序工程使用weui了，在此基础上，开发者就可以进行自定义的开发了。

总结weui是在微信终端非常出色的UI样式库，提供了非常多丰富的基础UI组件，最重要的是拥有了和微信一致的视觉体验，使得用户即使从微信切换到相关小程序，也不会觉得UI感到突兀。接着本文介绍了在自建工程里面使用weui的方法，并配有详细的图示，相信大家在看完本篇文章之后，都会懂得在自建工引入weui。

【WINDRISES MINIPROGRAM PROMOTION】尊享直接对接老板

电话+V： 159999-78052

专注于小程序推广配套流程服务方案。为企业及个人客户提供了高性价比的运营方案，解决小微企业和个体拓展客户的问题