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

news2024/11/15 21:23:01

小程序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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1699126.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

安全分析[1]之网络协议脆弱性分析

安全分析[1]之网络协议脆弱性分析

文章目录 威胁网络安全的主要因素计算机网络概述网络体系结构 网络体系结构脆弱性分组交换认证与可追踪性尽力而为匿名与隐私对全球网络基础实施的依赖无尺度网络互联网的级联特性中间盒子 典型网络协议脆弱性IP协议安全性分析IPSec&#xff08;IP Security)IPv6问题 ICMP协议安…
阅读更多...
python基于深度学习的聊天机器人设计

python基于深度学习的聊天机器人设计

python基于深度学习的聊天机器人设计 开发语言:Python 数据库&#xff1a;MySQL所用到的知识&#xff1a;Django框架工具&#xff1a;pycharm、Navicat、Maven 系统功能实现 登录注册功能 用户在没有登录自己的用户名之前只能浏览本网站的首页&#xff0c;想要使用其他功能都…
阅读更多...
GitHub怎么修改个人资料名称name和用户名username

GitHub怎么修改个人资料名称name和用户名username

文档 GitHub•GitHub文档•Get started•帐户和个人资料•配置文件•自定义个人资料•个性化设置https://docs.github.com/zh/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile GitHub•GitHub文档•G…
阅读更多...
Scala的简单认识

Scala的简单认识

Scala编程基础 小白的Scala学习笔记 2024/5/21 上午某一时刻 文章目录 Scala编程基础spark是用Scala开发出来的Scala的优点 打开idea 搜索scala&#xff0c;安装 如果不小心点了取消&#xff0c;或者没有上图的提示&#xff0c;就在依赖里面添加 spark是用Scala开发出来的 类比…
阅读更多...
Linux环境下TensorFlow安装教程

Linux环境下TensorFlow安装教程

TensorFlow是学习深度学习时常用的Python神经网络框 下面以Mask R-CNN 的环境配置为例&#xff1a; 首先进入官网&#xff1a;www.tensorflow.org TensorFlow安装的总界面&#xff1a; 新建anaconda虚拟环境&#xff1a; conda create -n envtf2 python3.8 &#xff08;Pyth…
阅读更多...
K8S认证|CKA题库+答案| 15. 备份还原Etcd

K8S认证|CKA题库+答案| 15. 备份还原Etcd

目录 15、 备份还原Etcd CKA v1.29.0模拟系统 下载试用 题目&#xff1a; 开始操作: 1&#xff09;、切换集群 2&#xff09;、登录master并提权 3&#xff09;、备份Etcd现有数据 4&#xff09;、验证备份数据快照 5&#xff09;、查看节点和Pod状态 6&#xff0…
阅读更多...
Cadence OrCAD学习笔记（3）capture使用技巧_1

Cadence OrCAD学习笔记（3）capture使用技巧_1

本期介绍capture的一些使用技巧。资料来源于小破站up主硬小二 1、导出像Visio规格的图纸 2、全局修改元件属性 然后保存、关闭即可。 3、导出BOM 4、导出网表 5、元件自动编号 6、capture软件和allegro关联 7、新建原理图symbol 以上为添加封装库的路径 如果要创建多部分的sy…
阅读更多...
反弹shell详细易懂讲解，看这一篇就够了

反弹shell详细易懂讲解，看这一篇就够了

文章目录 反弹shell详细易懂讲解&#xff0c;看这一篇就够了一: 基础shell知识什么是shell&#xff0c;bash与shell的区别?通俗解释类型功能常见命令 二: 什么是反弹shell三: 反弹shell类型bash反弹shellNetcat 一句话反弹curl反弹shell正确姿势 wget方式反弹awk反弹 Shellsoc…
阅读更多...
线性模型--普通最小二乘法

线性模型--普通最小二乘法

线性模型 一、模型介绍二、用于回归的线性模型2.1 线性回归&#xff08;普通最小二乘法&#xff09; 一、模型介绍 线性模型是在实践中广泛使用的一类模型&#xff0c;该模型利用输入特征的线性函数进行预测。 二、用于回归的线性模型 以下代码可以在一维wave数据集上学习参…
阅读更多...
AWS CloudWatch日志组中关于中文关键字的查询

AWS CloudWatch日志组中关于中文关键字的查询

问题 在AWS CloudWatch日志组中&#xff0c;想要查询出包含中文关键字的错误日志&#xff0c;结果&#xff0c;AWS说语法错误。 最开始&#xff0c;使用如下查询&#xff0c;查询可能的错误日志&#xff1a; 查询语句&#xff0c;如下&#xff1a; {($.log %ERROR%) }具体效…
阅读更多...
神器EasyRecovery2024中文电脑版下载！让数据恢复不再难

神器EasyRecovery2024中文电脑版下载！让数据恢复不再难

在数字化时代&#xff0c;数据就是我们的财富。无论是重要的工作报告&#xff0c;还是那些珍贵的生活瞬间照片&#xff0c;或是我们与朋友间的聊天记录&#xff0c;都储存在我们的电脑或手机中。然而&#xff0c;有时候&#xff0c;意外总是突如其来&#xff0c;电脑突然崩溃&a…
阅读更多...
中国区 AWS 控制台集成 ADFS 登录

中国区 AWS 控制台集成 ADFS 登录

前言 本文将使用一台 Windows Server 2019 服务器实现自建 AD ADFS 环境集成到中国区 AWS 控制台进行单点登录. 参考文档: https://aws.amazon.com/cn/blogs/china/adfs-bjs/ 配置 AD 生产环境建议先给本地连接设置静态 IP 地址, 不设置也没事儿, 后面配置功能的时候会有 W…
阅读更多...
HTML与CSS的学习

HTML与CSS的学习

什么是HTML,CSS&#xff1f; HTML(HyperText Markup Language):超文本标记语言。 超文本:超越了文本的限制&#xff0c;比普通文本更强大。除了文字信息&#xff0c;还可以定义图片、音频、视频等 标记语言:由标签构成的语言 >HTML标签都是预定义好的。例如:使用<a>…
阅读更多...
python深入解析字符串操作的八大神技

python深入解析字符串操作的八大神技

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、字符串的长度与切片 示例代码 二、去除多余的空格 示例代码 三、字符串的开头与包含…
阅读更多...
VXLAN小结

VXLAN小结

1.VXLAN:(组件虚拟网络的架构核心)虚拟扩展本地局域网&#xff0c;通过隧道的形式&#xff0c;将物理上有隔离的资源&#xff0c;在逻辑上连通起来&#xff0c;使其二层互通。 a.物理网络:指的是构成 VXLAN 连接的基础 IP 网络 b.逻辑网络:指的是通过 VXLAN 构建的虚拟网络 C.N…
阅读更多...
【Linux杂货铺】进程通信

【Linux杂货铺】进程通信

目录 &#x1f308; 前言&#x1f308; &#x1f4c1; 通信概念 &#x1f4c1; 通信发展阶段 &#x1f4c1; 通信方式 &#x1f4c1; 管道&#xff08;匿名管道&#xff09; &#x1f4c2; 接口 ​编辑&#x1f4c2; 使用fork来共享通道 &#x1f4c2; 管道读写规则 &…
阅读更多...
DEM、DSM和DTM之间的区别及5米高程数据获取

DEM、DSM和DTM之间的区别及5米高程数据获取

在日常的学习工作中我们经常会遇到DEM、DSM和DTM等术语&#xff0c;它们的含义类似&#xff0c;甚至相互替换。那么它们之间有什么区别&#xff1f;这里我们对这些术语进行介绍。 DEM&#xff08;数字高程模型&#xff0c;Digital Elevation Model&#xff09;&#xff1a; 定义…
阅读更多...
24法考证件照要求｜不合格原因汇总！

24法考证件照要求｜不合格原因汇总！

6月法考报名&#xff0c;大家一定要提前熟悉下电子证件照片要求‼️ ⚠️证件照注意事项 ▪️不得上传全身照、风景照、生活照、背带(吊带)衫照、艺术照、侧面照、不规则手机照等。 ▪️本人近三个月内彩色(红、蓝、白底色均可)正面免冠电子证件照片&#xff0c;照片必须清晰完…
阅读更多...
＜商务世界＞《75 微课堂＜茶叶（1）-质量分级＞》

＜商务世界＞《75 微课堂＜茶叶（1）-质量分级＞》

1 中国茶叶分级 中国的10级标准是按照茶叶的外观、香气、滋味、汤色、叶底五个方面进行评分&#xff0c;分别用10分制进行评分&#xff0c;总分为50分&#xff0c;得分越高&#xff0c;茶叶的品质就越高。具体的分数和等级如下表所示&#xff1a; 2 每级的特点 茶叶的质量等级…
阅读更多...
Flask+Vue+MySQL天水麻辣烫管理系统设计与实现（附源码 配置 文档）

Flask+Vue+MySQL天水麻辣烫管理系统设计与实现（附源码 配置 文档）

背景&#xff1a; 同学找到我期望做一个天水麻辣烫的网页&#xff0c;想复用以前做过的课设&#xff0c;结合他的实际需求&#xff0c;让我们来看看这个系统吧~ 项目功能与使用技术概述&#xff1a; 里面嵌入了6个子系统&#xff0c;其中餐饮系统可以进行餐馆信息添加、修改…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023