微信小程序基础 -- 小程序UI组件(5)

news/2024/7/20 18:15:53/文章来源: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>

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SEO优化,小白程序员如何做SEO优化流量从0到1

原文链接&#xff1a;SEO优化&#xff0c;小白程序员如何做SEO优化流量从0到1 1、SEO是什么&#xff1f; SEO即&#xff1a;搜索引擎优化(Search Engine Optimization)&#xff0c;是一种通过优化网站结构、内容和外部链接等因素&#xff0c;提高网站在搜索引擎中的自然排名&…

防止特权升级攻击的有效策略

防止特权升级攻击的有效策略 特权升级攻击是一种通过利用操作系统或应用程序中的编程错误、漏洞、设计缺陷、配置错误或访问控制缺陷&#xff0c;获得对原本应该被限制访问的资源进行未授权访问的行为。这种攻击方式可能导致攻击者获取敏感数据、安装恶意软件并发动其他网络攻…

51单片机-实机演示(单多个数码管)

仿真链接&#xff1a; http://t.csdnimg.cn/QAPhx 目录 一.引脚位置 二.多个显示 三 扩展 一.引脚位置 注意P00 - >A ; 这个多个的在左边,右边的A到B是控制最右边那个单个的. 接下来上显示单个的代码 #include <reg52.h> #include <intrins.h> #define u…

vscode中使用conda虚拟环境

每一次配置环境&#xff0c;真的巨烦&#xff0c;网上的资料一堆还得一个个尝试&#xff0c;遂进行整理 1.准备安装好Anaconda 附带一篇测试教程&#xff0c;安装anaconda 2.准备安装vscode 安装地址&#xff1a;Visual Studio Code 3.创建Conda环境 搜索框搜索Anaconda…

单点登录(JWT实现)

单点登陆的英文名是&#xff1a;Single Sign On&#xff08;简称SSO&#xff09;&#xff0c;只需要登陆一次&#xff0c;就可以访问所有信任的应用系统。 在单体项目中&#xff0c;我们登陆之后可以把验证用户信息的值放入session中&#xff0c;单个tomcat中的session是可以共…

一、Nginx详解和安装

目录 一、简介 1、什么是Nginx 2、Nginx的优点 二、四大应用场景 1、HTTP服务器 2、反向代理 3、负载均衡 4、动静分离 三、Nginx 源码安装 1、安装相关依赖 2、启动nginx 3、安装成系统服务 一、简介 1、什么是Nginx Nginx是一款轻量级的Web服务器&#xff0c;反向…

基于51单片机的智能灯光控制系统

一.硬件方案 智能灯光控制系统由单片机最小系统、人体感应模块、关照强度模块、灯光控制模块、电源模块和灯泡组成。本文以STC89C52单片机为核心&#xff0c;通过利用光照度和红外人体感应相结合主动与被动的探测方法&#xff0c;现了室内无人或者关照充足时灯光自动光灯&…

操作系统4_存储器管理

操作系统4_存储器管理 文章目录 操作系统4_存储器管理1. 存储器的管理功能1.1 地址映射/地址重定位1.2 主存分配与回收1.3 存储保护1.4 主存扩充/虚拟内存2. 存储器的层次结构3. 程序的接入与链接3.1 程序的链接3.2 程序的装入4. 分区存储管理4.1 单一连续分配4.2 固定分区分配…

Mac软件打开时提示:已损坏,无法打开。你应该将它移到废纸娄。怎么解决?

Mac软件打开时提示&#xff1a;已损坏&#xff0c;无法打开。你应该将它移到废纸娄。怎么解决? 原文地址&#xff1a;https://blog.csdn.net/weixin_48311847/article/details/138325009

【Mongo】索引结构

结论 Mongo3.2版本开始&#xff0c;索引的结构默认是B树。 起因 面试的时候&#xff0c;面试官问为什么Mongo DB底层使用B树而不是B树&#xff1f; 面试完赶紧恶补&#xff0c;结果发现面试官好像给我埋了个坑。。。 MongoDB官方描述&#xff1a; 翻译一下就是&#xff1…

多线程JUC 第2季 BlockingQueue 阻塞队列

一 阻塞队列 1.1 阻塞队列介绍 阻塞队列&#xff08;BlockingQueue&#xff09;是一个在队列基础上又支持了两个附加操作的队列&#xff1a; put方法&#xff1a;当队列装满时&#xff0c;添加的线程则被阻塞&#xff0c;直到队列不满&#xff0c;则可用。 take方法&#x…

数据库查询——kettle开发20

一、数据库查询 数据库查询就是数据库里面的左连接&#xff0c;左连接就是两张表执行左关联查询&#xff0c;把左边的表数据全部查询出来。 如图所示我们在进行数据库查询操作时&#xff0c;我们首先需建立数据库连接&#xff0c;输入表名和查询需要的关键字&#xff0c;最后…

解析边缘计算网关的优势-天拓四方

随着信息化、智能化浪潮的持续推进&#xff0c;计算技术正以前所未有的速度发展&#xff0c;而边缘计算网关作为其中的重要一环&#xff0c;以其独特的优势正在逐步改变我们的生活方式和工作模式。本文将详细解析边缘计算网关的优势。 首先&#xff0c;边缘计算网关具有显著的…

Linux shell编程学习笔记50:who命令

0 前言 2024年的网络安全检查又开始了&#xff0c;对于使用基于Linux的国产电脑&#xff0c;我们可以编写一个脚本来收集系统的有关信息。比如&#xff0c;我们可以使用who命令来收集当前已登陆系统的用户信息&#xff0c;当前运行级别等信息。 1. who命令 的功能、格式和选项…

产品推荐-光学镜片镀膜自动上下料设备

随着现代化工业生产的浪潮&#xff0c;智能化和自动化已成为工业发展的必然趋势。在精密制造领域&#xff0c;高精度和高效率更是工艺流程中不可或缺的要素。为满足这一需求&#xff0c;富唯推出了引领行业潮流的智能设备——富唯智能镀膜上下料设备。 一、多功能操作&#xff…

mysql5.7允许root远程访问

mysql客户端工具配置完成后&#xff0c;测试联通失败&#xff0c;客户端真正连接mysql时&#xff0c;也报错不允许rootip连接。 这是由于mysql的root用户默认禁止远程访问&#xff0c;可以通过两种方式改表或者授权的方式开启远程访问。本文中使用改表的方法。按照如下操作即可…

【leetcode 141】环形链表——快慢指针(龟兔赛跑)

给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置&#xff08;…

LVGL圆弧、线条、图片、色环、按钮矩阵、文本区域、键盘部件

目录 LVGL圆弧部件 LVGL线条部件 LVGL图片部件 LVGL色环部件 LVGL按钮矩阵部件 LVGL文本区域部件 LVGL键盘部件 LVGL圆弧部件 圆弧部件以弧形滑动的形式来调节、显示某个参数的值。 圆弧部件组成部分&#xff1a; 背景弧&#xff08;LV_PART_MAIN&#xff09; 前景弧&am…

现代 c++ 三:移动语义与右值引用

移动语义很简单&#xff0c;但它相关联的术语很复杂。本文尝试从历史的角度解释清楚这些乱七八糟的术语及其关联&#xff1a; 表达式 (expression)、类型&#xff08;type&#xff09;、值类别 (value categories)&#xff1b; 左值 (lvalue)、右值 (rvalue)、广义左值 (glval…

UI问题 --- CardView和其它的控件在同一布局中时,始终覆盖其它控件

原本代码&#xff1a; <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"40dp"android:layout_height"wrap_content"andr…