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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

HTTP的由来以及发展史

HTTP的由来以及发展史

HTML&HTML5的学习探索 01、Html的由来和发展史 01-01、Html的由来 HTML的英文全称是 Hypertext Marked Language&#xff0c;即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee&#xff08;蒂姆伯纳斯李&#xff09;于1990年创立的一种标记语言&#xff0c; 他是万…
阅读更多...
从程序被SQL注入来MyBatis 再谈 #{} 与 ${} 的区别

从程序被SQL注入来MyBatis 再谈 #{} 与 ${} 的区别

缘由 最近在的一个项目上面&#xff0c;发现有人在给我搞 SQL 注入&#xff0c;我真的想说我那么点资源测试用的阿里云服务器&#xff0c;个人估计哈&#xff0c;估计能抗住他的请求。狗头.png 系统上面的截图 数据库截图 说句实在的&#xff0c;看到这个之后我立马就是在…
阅读更多...
《Python源码剖析》之pyc文件

《Python源码剖析》之pyc文件

前言 前面我们主要围绕pyObject和pyTypeObject聊完了python的内建对象部分&#xff0c;现在我们将开启新的篇章—python虚拟机&#xff0c;将聚焦在python的执行部分&#xff0c;搞懂从“代码”到“执行”的过程。开启新的篇章之前&#xff0c;你也许会有一个疑惑&#xff1a;我…
阅读更多...
VLAN高级特性

VLAN高级特性

1.VLAN聚合 &#xff08;1&#xff09;VLAN聚合产生的技术背景 &#xff08;2&#xff09;VLAN聚合概述 &#xff08;3&#xff09;VLAN聚合的原理 多个Sub-VLAN共享一个网关地址&#xff0c;节约了子网网络地址、子网定向广播地址、子网缺省网关地址&#xff0c;且各Sub-VLAN…
阅读更多...
C#调用HttpClient.SendAsync报错：System.Net.Http.HttpRequestException: 发送请求时出错。

C#调用HttpClient.SendAsync报错：System.Net.Http.HttpRequestException: 发送请求时出错。

C#调用HttpClient.SendAsync报错&#xff1a;System.Net.Http.HttpRequestException: 发送请求时出错。 var response await client.SendAsync(request, HttpCompletionOption.ResponseHeadersRead, cancellationToken);问题出在SSL/TLS&#xff0c;Windows Server 2012不支持…
阅读更多...
MybatisPlus中自定义sql

MybatisPlus中自定义sql

背景 在开发过程中&#xff0c;可能会出现除了where条件&#xff0c;其它sql比较复杂&#xff0c;这时候就需要用到自定义sql了。 问题 如&#xff1a;用户状态为正常的数据年龄加一&#xff08;所有用户年龄加一&#xff09; 数据库中sql&#xff1a; UPDATE USER SET…
阅读更多...
【Linux】TCP协议【下一】{三次握手/四次挥手的深度解读==状态变化}

【Linux】TCP协议【下一】{三次握手/四次挥手的深度解读==状态变化}

文章目录 本篇知识需要有TCP协议【中】的知识&#xff01;详情点击&#x1f447;1.测试一&#xff1a;服务器start函数不定义任何行为&#xff08;不调用accept&#xff09;的三次握手状态变化int listen(int sockfd, int backlog);的backlog参数全连接队列当全连接队列已满&am…
阅读更多...
异方差的Stata操作（计量114）

异方差的Stata操作（计量114）

以数据集 nerlove.dta 为例&#xff0c;演示如何在 Stata 中处理异方差。 此数据集包括以下变量&#xff1a; tc ( 总成本 ) &#xff1b; q ( 总产量 ) &#xff1b; pl ( 工资率 ) &#xff1b; pk ( 资本的使用成本 ) &#xff1b; pf ( 燃料价格 ) &#xff1b; …
阅读更多...
Cyber Weekly #8

Cyber Weekly #8

赛博新闻 1、微软召开年度发布会Microsoft Build 2024 本周&#xff08;5.22&#xff09;微软召开了年度发布会&#xff0c;Microsoft Build 2024&#xff0c;发布了包括大杀器 Copilot Studio 在内的 50 项更新。主要包括&#xff1a; 硬件层面&#xff1a;与英伟达 & A…
阅读更多...
Python的pip配置、程序运行、生成exe文件

Python的pip配置、程序运行、生成exe文件

一、安装Python 通过官网下载对应的版本&#xff0c;安装即可。 下载地址&#xff1a;Download Python | Python.org Python标准库查看&#xff08;Python自带库&#xff09; Python 标准库文档 安装Python的时候&#xff0c;如果选第二个自定义安装要记得勾选安装pip 二、…
阅读更多...
go-zero 实战（4）

go-zero 实战（4）

中间件 在 userapi 项目中引入中间件。go项目中的中间可以处理请求之前和之后的逻辑。 1. 在 userapi/internal目录先创建 middlewares目录&#xff0c;并创建 user.go文件 package middlewaresimport ("github.com/zeromicro/go-zero/core/logx""net/http&q…
阅读更多...
返回枚举类给前端

返回枚举类给前端

1. 前言 在实际开发过程中&#xff0c;前端的下拉框或者单选按钮的内容通常的需要和后端匹配的&#xff0c;故一般会由后端将下拉框的内容或单选框的内容传给前端&#xff0c;而这些内容在后端一般是由枚举类存储的&#xff0c;如果后端直接返回枚举类&#xff0c;返回结果将会…
阅读更多...
民国漫画杂志《时代漫画》第24期.PDF

民国漫画杂志《时代漫画》第24期.PDF

时代漫画24.PDF: https://url03.ctfile.com/f/1779803-1248635000-177187?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps: 资源来源网络!
阅读更多...
基于YOLOv8的车牌检测与识别(CCPD2020数据集)

基于YOLOv8的车牌检测与识别(CCPD2020数据集)

前言 本篇博客主要记录在autodl服务器中基于yolov8实现车牌检测与识别&#xff0c;以下记录实现全过程~ yolov8源码&#xff1a;GitHub - ultralytics/ultralytics: NEW - YOLOv8 &#x1f680; in PyTorch > ONNX > OpenVINO > CoreML > TFLite 一、环境配置 …
阅读更多...
怎么在网上赚点零花钱？分享十个正规的赚钱兼职平台

怎么在网上赚点零花钱？分享十个正规的赚钱兼职平台

亲爱的朋友们&#xff0c;大家好&#xff01;今天要和大家聊聊一个让人兴奋的话题——网上赚钱。在这个互联网飞速发展的时代&#xff0c;网上赚钱已经不再是遥不可及的梦想。如果你正想在网上赚点零花钱&#xff0c;那么这篇文章你可不能错过&#xff01; 在这个信息爆炸的时代…
阅读更多...
ASP.NET 代码审计

ASP.NET 代码审计

ASP.NET 官方文档 名词解释 IIS&#xff08;Internet Information Services&#xff09; IIS 是微软开发的一款 Web 服务器软件&#xff0c;用于在 Windows 服务器上托管和提供Web应用程序和服务。它支持 HTTP、HTTPS、FTP、SMTP 等多种协议&#xff0c;主要用于&#xff1a…
阅读更多...
HTML与CSS的学习

HTML与CSS的学习

什么是HTML,CSS&#xff1f; HTML(HyperText Markup Language):超文本标记语言。 超文本:超越了文本的限制&#xff0c;比普通文本更强大。除了文字信息&#xff0c;还可以定义图片、音频、视频等 标记语言:由标签构成的语言 >HTML标签都是预定义好的。例如:使用<a>…
阅读更多...
Jupyter Lab 软件安装与使用

Jupyter Lab 软件安装与使用

软件简介 Jupyter Lab 软件是一个基于web 的交互式开发环境&#xff0c;集成了代码编辑器、终端、文件管理器等功能&#xff0c;使得开发者可以在一个界面中完成各种任务。JupyterLab是Jupyter Notebook的全面升级&#xff0c;是一个集文本编辑器、终端以及各种个性化组件于一…
阅读更多...
STL库 —— unordered_set与unordered_map的封装

STL库 —— unordered_set与unordered_map的封装

这里要对 unordered_set 与 unordered_map 进行封装&#xff0c;封装时使用的是上一篇中学的 HashBucket 。不仅要完成封装&#xff0c;同时要写入迭代器。 一、HashBucket 的修改 1.1 节点的修改 T 首先来认识一下使用 unordered_set 和 ordered_map 时的区别&#xff1a; …
阅读更多...
头歌结构化分析方法-数据流图

头歌结构化分析方法-数据流图

第1关&#xff1a;数据流图-画出外部实体 第2关&#xff1a;数据流图-画出加工 第3关&#xff1a;数据流图-画出数据存储 第4关&#xff1a;数据流图-画出数据流 第5关&#xff1a;数据流图-机票预定系统
阅读更多...
最新文章

Copyright @ 2022~2023