微信小程序基础 -- 小程序UI组件（5）

已于 2024-05-26 20:07:34 修改
阅读量1.3k 收藏 25
点赞数 33
分类专栏： 微信小程序 文章标签： 小程序 微信小程序
于 2024-05-26 20:06:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80809706/article/details/139219200
版权

小程序UI组件

1.小程序UI组件概述

开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html
什么是组件：

  • 组件是视图层的基本组成单元。

  • 组件自带一些功能与微信风格一致的样式。

  • 一个组件通常包括 开始标签 和 结束标签 ， 属性 用来修饰这个组件， 内容 在两个标签之内。

  • 这里的组件通俗的讲就是标签

      <tagname property="value">
  Content goes here ...
  </tagname>

注意：所有组件与属性都是小写，以连字符 - 连接

1.1 属性值类型

在这里插入图片描述

1.2 公共属性

所有组件都有以下属性：
在这里插入图片描述

1.3 特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰，请参考各个组件的定义。

2. 视图容器

2.1 view 组件

view 也被称为视图容器。相当于 html 中的 div 标签。
开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

2.2 swiper 与swiper-item

滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

在这里插入图片描述

案例：使用 swiper 滑块实现轮播图

1.配置app.json ，实现新建swiper页面

在这里插入图片描述
2.swiper.wxml 设计界面结构

<!--pages/swiper/swiper.wxml-->
<!-- 轮播图开始 -->
<view class="index_swiper">
	<swiper autoplay indicator-dots circular>
		<swiper-item wx:for="{{swiperList}}">
			<image mode="widthFix" src="{{item}}"></image>
		</swiper-item>
	</swiper>
</view>
<!-- 轮播图 结束 -->

3.swiper.wxss 设计样式

/* pages/swiper/swiper.wxss */
.index_swiper swiper {
	width: 750rpx;
	height: 340rpx;
}
.index_swiper swiper image {
	width: 100%;
}

4.swiper.js 文件中构建代码

// pages/swiper/swiper.js
Page({
	data: {
// 轮播图数组
		swiperList: ["/images/img/banner1.png", "/images/img/banner2.png",
			"/images/img/banner3.png"],
	},
})

5.效果如下图所示
在这里插入图片描述

2.3 scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height

3.基础内容组件

3.1 图标icon

图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

案例：

1.创建bcontent 基础组件页面
2.bcontent.wxml

<Label>-------------图标icon----------</Label>
<view wx:for="{{iconInfos}}">
	<icon color="{{item.color}}" type="{{item.iconType}}" size="
	{{item.iconSize}}"></icon>
</view>

3.bcontent.js

Page({
	data: {
		iconInfos: [{
			"iconSize": 14,
			"color": "red",
			iconType: "success"
		}, {
			"iconSize": 23,
			"color": "orange",
			iconType: "success_no_circle"
		}, {
			"iconSize": 23,
			"color": "yellow",
			iconType: "info"
		}, {
			"iconSize": 46,
			"color": "green",
			iconType: "warn"
		}, {
			"iconSize": 46,
			"color": "rgb(0,255,255)",
			iconType: "waiting"
		}, {
			"iconSize": 93,
			"color": "blue",
			iconType: "cancel"
		}, {
			"iconSize": 93,
			"color": "purple",
			iconType: "download"
		}]
	}
})

4.效果如小图所示
在这里插入图片描述

3.2 文本text

文本

开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/text.html

3.3 富文本rich-text

富文本

开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
在这里插入图片描述
space 的合法值
在这里插入图片描述

案例：

1.wxml 文件

<Label>-------------富文本rich-text---------</Label>
<view><text>{{htmlSnip}}</text></view>
<view>
	<rich-text nodes="{{htmlSnip}}"></rich-text>
</view>

2.wxjs文件

const htmlSnip =
<div class="div_class">
	<h1>Title</h1>
	<p style="color:red">
		Life is&nbsp;<i>like</i>&nbsp;a box of
		<b>&nbsp;chocolates</b>.
	</p>
</div>`
Page({
	data: {
		htmlSnip
	}
})

3.效果
在这里插入图片描述

4.表单组件

4.1 form 表单组件

表单

当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，
需要在表单组件中加上 name 来作为 key。
开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/form.html

4.2 button按钮

按钮

开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/button.html

4.3 input输入框组件

输入框

开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

4.4 checkbox

复选框

开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

4.5 radio

单选按钮

开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

4.6 slider

滑动选择器

开发文档: https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

4.7 switch

开关选择器

开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/switch.html

表单案例：

1.添加form页面
2.wxml文件

<view>
	<form catchsubmit="formSubmit" catchreset="formReset">
		<view>
			<view>switch</view>
			<switch name="switch" />
		</view>
		<view>
			<view>radio</view>
			<radio-group name="radio">
			<label>
				<radio value="radio1" />选项一
			</label>
			<label>
				<radio value="radio2" />选项二
			</label>
		</radio-group>
	</view>
	<view>
		<view>checkbox</view>
			<checkbox-group name="checkbox">
			<label>
				<checkbox value="checkbox1" />选项一
			</label>
			<label>
				<checkbox value="checkbox2" />选项二
			</label>
		</checkbox-group>
	</view>
		<view>
			<view>slider</view>
			<slider value="50" name="slider" show-value></slider>
		</view>
	<view>
		<view>input</view>
			<view style="margin: 30rpx 0">
				<input name="input" placeholder="这是一个输入框" />
			</view>
		</view>
	<view>
		<button style="margin: 30rpx 0" type="primary"formType="submit">Submit</button>
		<button style="margin: 30rpx 0" formType="reset">Reset</button>
	</view>
	</form>
</view>

3.wxjs文件

formSubmit(e){
console.log('form发生了submit事件，携带数据为：', e.detail.value)
},

4.效果如下图所示
在这里插入图片描述

5.导航

5.1 navigator

导航，跳转

开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
在这里插入图片描述

target 的合法值
在这里插入图片描述

open-type 的合法值
在这里插入图片描述

提示：

  • open-type的值如果设置为navigate则可以拥有回退按钮；如果设置为redirect则没有回退按钮
  • navigate、redirect这两值和switchTab这个值的区别在于前面两个不能跳转到带tabBar的页面；
    而switchTab可以
案例：

1.创建nav导航页面
2.nav.wxml

<!--pages/nav/nav.wxml-->
<!-- 假如跳转到tabbar关联的页面，则需open-type="switchTab" -->
<navigator url="/pages/index/index" open-type="switchTab">跳转到tab首页</navigator>

<!-- open-type="navigate" 拥有回退按钮 -->
<navigator url="/pages/tap/tap" open-type="navigate">跳转到tap首页</navigator>
<navigator url="/pages/bcontent/bcontent" open-type="redirect">跳转到基本bcontent页</navigator>
<view bind:tap="tapEnterForm">通过事件代码进入视图容器页</view>

3.nav.js

Page({
	data: {
	},
	 onLoad: function (options) {
	},
	tapEnterForm:function() {
		wx.navigateTo({
			url: '/pages/container/container',
		})
	}
})

6.媒体组件

6.1 image

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID

开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
在这里插入图片描述

mode 的合法值 : 图片的填充方式
在这里插入图片描述

提示：

  1. image组件默认宽度320px、高度240px
  2. image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

6.2 camera

系统相机, 扫码二维码功能

开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/camera.html
在这里插入图片描述

mode 的合法值
在这里插入图片描述

resolution 的合法值
在这里插入图片描述

提示：
同一页面只能插入一个 camera 组件

案例

1.添加media页面
2.media.wxml

<!-- camera.wxml -->
<camera style="width: 100%; height: 300px;" mode="normal"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>

3.media.js

Page({
	data: {
		},
	onLoad: function (options) {
	},
	takePhoto() {
		const ctx = wx.createCameraContext()
		ctx.takePhoto({
			quality: 'high',
			success: (res) => {
				this.setData({
					src: res.tempImagePath
				})
			}
		})
	},
})

6.3 video

视频

开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/video.html
在这里插入图片描述
支持的格式:兼容性才更好 , 版权 转成这种格式
在这里插入图片描述
支持的编码格式
在这里插入图片描述
media.wxml

<video autoplay loop controls="{{false}}"
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?
filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204
012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4
ff02024ef202031e8d7f02030f42400204045a320a0201000400"
></video>
爬虫囦
关注
  • 33
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
推荐微信小程序常用的几个UI组
纸言片语
03-01 2965
1.WeUI WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。 GitHub 地址：https://github.com/Tencent/weui 效果：https://weui....
小程序UI组件推荐
zkpeace
05-05 254
ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作也有，可以为你开发提供一些思路。下载|仓库｜扫描下面二维码可以预览全部组件???? 原文链接???? 直接下载组件，根据官方Readme介绍，移动/demo（我把文件名改为colorui）到小程序目录里即可，我是创建了文件夹components用于统一管理外部组件，结构如下。 下一步要在全局样式表ap...
2024年最全微信小程序解析富文本(支持代码高亮)_小程序里使用highlight(1)，数据库工程师面试自我介绍
最新发布
2401_84434442的博客
05-14 1069
排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。所有只能放弃小程序内置的组件了，在百度了几分钟后，看到目前比较热门的是。，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。这对个人的开发者来说确实挺不友好的，在开放文档中查找。的GitHub官网中有详细的介绍。
小程序常用的ui组件
pauline_的博客
12-16 1344
1.text文本(类似span) 属性名 类型 默认值 说明 selectable Boolean false 文本是否可选,除了text组件外,其他组件都无法长按选中 s
微信小程序-UI控件的使用(2)
zww学习笔记
01-11 1604
微信模版的使用： 新建一个templates目录，新建header.wxml,footer.wxml两个模版文件 header.wxml<template name="header1"> <view class="header"> <text>这是头部模版-{{title}}</text> </view> </template>footer.wxml<template n
微信小程序UI组件库合集
IT水很深，路还很长
01-17 6587
微信小程序实用UI组件库合集。 UI组件库合集，大家有遇到好的组件库，欢迎留言评论然后加入到文档里。 第一款： 官方WeUI组件库，地址WeUI组件库简介 | 微信开放文档 预览码： 第二款： ColorUI：地址https://github.com/weilanwl/ColorUI 预览码： 第三款： vantUI（又名：ZanUI）：地址Vant Weapp - 轻量、可靠的小程序 UI 组件库 预览码： 第四款： MinUI： 地址https...
微信小程序整合的一套UI库
05-10
微信小程序组件如此之丰富、你还需要重量级的组件库来冗余代码吗？ 所以只需要Wa-UI这个轻量级的库很快捷的做布局就可以了 ##使用须知 import引入即可使用，快速开始 Wa-UI说明文档请参考Wiki IDE更新2800版本之后...
Lin UI微信小程序组件库-其他
06-12
Lin UI 是一套基于微信小程序原生语法实现的高质量 UI 组件库。遵循简洁、易用、美观的设计规范。快速上手：安装1、初始化你的项目为一个 NPM 项目npm init -y若项目根目录已包含 package.json 文件，则可跳过该步骤...
微信小程序--旋转木马/缩放轮播图效果
03-29
微信小程序原生Swiper控件 Wxss Transform、Transition 轮播条滚动回调控制 微信小程序条件渲染、列表渲染 全部实现代码加起来也就三四十行，大部分还用来写wxml UI代码，所以功能实现起来非常简单。  首先将问题...
计算机专业毕业设计-微信小程序案例-微信小程序的驾校预约管理系统--论文-毕设源码+说明文档.rar
03-09
* 界面简洁易用：采用微信小程序原生UI组件，界面美观大方，操作便捷。 * 预约功能完善：支持学员在线查看教练信息、预约课程、取消预约等操作。 * 数据实时更新：教练和课程信息实时同步，确保数据的准确性和及时性...
微信小程序常用的ui组件库
08-17
分享一个常用的微信小程序UI组件库直接导入到微信开发者工具即可拿来使用方面很全面
微信小程序_针对微信小程序整合的一套UI库
11-02
针对微信小程序整合的一套UI库
被圈粉的微信小程序纯UI组件colorUi
技术需要沉淀，兴国需要科技！
09-15 2321
作为一名ui小bai，但又想开发一款界面好看的小程序，那我极力推荐今天的主角-colorUi，它的优点在于提供了很多常用的纯ui组件，不掺杂任何逻辑，而且引入简单，轻量级！很适合没有ui基础又想快速制作一款小程序的开发者，下面一起了解一下。//调用动画效果需要。引入colorUI的样式在app.wxss中加上就完成了它的样式引用。
这款小程序UI组件太漂亮，我粉了
Github导航站
02-25 511
  大家好，我是为广大程序员兄弟操碎了心的小编，每天推荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节省开发效率，实现不加班不熬夜不掉头发，是我的目标！   今天小编推荐一款小程序UI组件库ColorUI，ColorUI是一个css库！在你引入样式后可以根据class来调用组件。ColorUI下载下来看了下，组件还挺齐全的，UI效果视觉上看着在众多框架中脱颖而出，于是下过来看了下，基本上知道了怎么用了。 开始 App.vue` 引入关键Css `main.css` `icon.css &
微信小程序UI组件库推荐
小乙的博客
08-08 3797
微信小程序UI组件库推荐
高颜值微信小程序 UI 组件库！
Jack, what else can you do besides holding your little darling?
03-31 1097
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让你信手拈来，如鱼得水。
UniApp、微信小程序、Vue常用的UI组件
番茄Salad
03-30 2055
在前端项目开发过程中，总是会引入一些UI框架，已为方便自己的使用，很多大公司都有自己的一套UI框架，下面就是最近经常使用并且很流行的UI框架。
微信小程序-UI控件的使用(1)
zww学习笔记
01-10 6649
button的初体验：初始化一个项目，新建一个目录firstPage，结构如下：在firtst.wxml中写UI<view class="content"><text class="title">button 示例</text></view><button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{pla
微信小程序ui组件库
08-30
有很多优秀的微信小程序 UI 组件库可以供你使用。以下是一些常见的微信小程序 UI 组件库： 1. WeUI：WeUI 是一款基于微信官方设计语言的 UI 组件库，提供了丰富的组件和样式，可以快速构建符合微信风格的小程序界面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值