uniapp—day02

个人名片:
😊作者简介:一名大二在校生
🤡 个人主页:坠入暮云间x
🐼
座右铭:给自己一个梦想,给世界一个惊喜。
🎅**学习目标: 坚持每一次的学习打卡

文章目录

  • WXML 和HTML区别?
    • 1.语法结构:
    • 2.标签
    • 3.样式表
    • 4.事件处理
  • WXSS 和CSS区别?
    • 1.作用范围
    • 2.语法规则
    • 3.像素单位
    • 4.样式导入
    • 5.适用范围
  • view组件(相当于div)
  • image组件(相当于img)
  • text组件(相当于P标签)
  • swiper组件(轮播图组件)
  • flex布局
    • 案例练习

WXML 和HTML区别?

wxml 和 HTML 是两种不同的标记语言,分别用于小程序开发网页开发

1.语法结构:

  • WXML 是微信小程序框架使用的标记语言,语法结构和 HTML 类似,但比 HTML 更简洁,更符合小程序的开发规范。
  • HTML 是用于网页的标记语言,具有更多的标签元素和属性,用于构建网页结构。

2.标签

  • WXML 中的标签是小程序框架提供的一组特定标签,如 、 、 等,用于构建小程序页面。
  • HTML 中的标签更加丰富,如 <div>、<p>、<a>、<span> 等,可以用于构建各种类型的网页。

3.样式表

  • WXML 中使用 WXSS(类似 CSS)来定义样式,保持了与 WXML 文件的分离,有利于代码维护和开发。
  • HTML 中使用 CSS 来定义样式,同样也是为了保持结构和样式的分离。

4.事件处理

WXML 可以通过在标签上绑定事件来实现交互,如 bindtapbindinput 等。
HTML 也可以通过事件监听器来实现交互,如 onclickonchange 等。

WXSS 和CSS区别?

1.作用范围

  • WXSS 是微信小程序框架使用的样式表语言,用于定义小程序页面的样式。
  • CSS 是用于网页开发的样式表语言,用于定义网页的样式。

2.语法规则

  • WXSS 在语法结构上与 CSS 类似,但在一些细节上有所区别,例如单位的写法、颜色的表示等。
  • CSS 的语法规则比较成熟,支持的属性和值更加丰富。

3.像素单位

  • 在 WXSS 中,可以使用 rpx(响应式像素)作为长度单位,以适应不同的屏幕密度。
  • 在 CSS 中,通常使用 px、em、rem 等单位来定义长度,适用于网页的展示。

4.样式导入

在 WXSS 中,可以使用 @import 导入外部样式表,类似于 CSS。
在 CSS 中,也可以使用 @import 导入外部样式表。

5.适用范围

  • WXSS 主要用于微信小程序的开发,特别适用于小程序页面的样式定义。
  • CSS 则广泛应用于网页开发中,涵盖了更广泛的开发领域。

view组件(相当于div)

 <text  class="greenBigFont">1.view组件 </text><!-- hover-class:显示手指按下去的样式,点击态 --><view hover-class="touchClass">第一个view</view><!--hover-start-time:点击时多久后显示点击态,单位为毫秒  --><view hover-class="touchClass" hover-start-time="3000">第二个view</view><view hover-class="touchClass" hover-stay-time="5000">第三个view</view>

显示如下
在这里插入图片描述
在这里插入图片描述

image组件(相当于img)

<text  class="textClass">2.image组件 </text><image src="../../images/demo01.jpg"  /><!-- aspectFit: --><image src="../../images/demo01.jpg" mode="aspectFit"/><image src="../../images/demo02.jpg" mode="aspectFit"/><image src="../../images/demo02.jpg" mode="top"/><image src="../../images/demo02.jpg" mode="bottom"/><image src="../../images/demo02.jpg" mode="right"/><image src="../../images/demo02.jpg" mode="left"/><image src="../../images/demo02.jpg" mode="top right"/><image src="../../images/demo02.jpg" mode="bottom right"/>

在这里插入图片描述

在这里插入图片描述在这里插入图片描述在这里插入图片描述

text组件(相当于P标签)

 <text  class="textClass">4.text组件</text><text>123</text><text user-select="true">abc</text> 

在这里插入图片描述

swiper组件(轮播图组件)

在这里插入图片描述

flex布局


在这里插入图片描述
在这里插入图片描述

案例练习

使用轮播图+flex布局实现如下效果
在这里插入图片描述WXML代码

<!--pages/list/list.wxml-->
<navigation-bar title="这是list页面" back="{{false}}" color="black" background="yellow"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list"><swiper interval="2000" autoplay="true" indicator-dots="true" indicator-color="gray" indicator-active-color="red"><swiper-item><image src="../../images/swiper01.jpg" mode="widthFix"/></swiper-item><swiper-item><image src="../../images/swiper02.jpg" mode="widthFix"/></swiper-item>
</swiper><view class="List"><view class="ListGrid"><image src="../../images/shi.png" mode=""/><text>美食</text></view><view class="ListGrid"><image src="../../images/xiu.png" mode=""/><text>装修</text></view><view class="ListGrid"><image src="../../images/yu.png" mode=""/><text>洗浴</text></view><view class="ListGrid"><image src="../../images/che.png" mode=""/><text>汽车</text></view><view class="ListGrid"><image src="../../images/chang.png" mode=""/><text>唱歌</text></view><view class="ListGrid"><image src="../../images/fang.png" mode=""/><text>汽车</text></view><view class="ListGrid"><image src="../../images/xue.png" mode=""/><text>汽车</text></view><view class="ListGrid"><image src="../../images/gong.png" mode=""/><text>汽车</text></view><view class="ListGrid"><image src="../../images/hun.png" mode=""/><text>汽车</text></view></view></scroll-view>

wxss

/* pages/list/list.wxss */
swiper {height: 350rpx;
}
swiper image {width: 100%;height: 100%;
}
.List{display: flex;flex-wrap: wrap;
}
.List .ListGrid{width: 250rpx;height: 250rpx;border-right: 1rpx solid #eee;border-bottom: 1rpx solid #eee;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
/* 九宫格区域中每一个格子中的图片和文字的样式 */
.List .ListGrid image {width: 70rpx;height: 70rpx;
}
.List .ListGrid text {color: #999;font-size: 28rpx;margin-top: 20rpx;
}

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

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

相关文章

系统及其分类

系统定义 系统&#xff1a;指若干相互关联的事物组合而成的具有特定功能的整体。 系统的基本作用&#xff1a;对输入信号进行加工和处理&#xff0c;将其转换为所需要的输出信号。 系统分类 系统的分类错综复杂&#xff0c;主要考虑其数学模型的差异来划分不同类型。主要分为…

怎么绕过CDN查找真实IP

一、怎么绕过CDN查找真实IP 首先使用全球ping查看该域名是否存在cdn 方法一&#xff1a;使用phpinfo等探针的方式找到真实IP 方法二&#xff1a;网站根域或子域查找真实IP 大部分CDN服务都是按流量进行收费的&#xff0c;所以一些网站管理员只给重要业务部署CDN&#xff0c…

大华智慧园区综合管理平台 clientServer SQL注入漏洞复现

0x01 产品简介 “大华智慧园区综合管理平台”是一款综合管理平台,具备园区运营、资源调配和智能服务等功能。平台意在协助优化园区资源分配,满足多元化的管理需求,同时通过提供智能服务,增强使用体验。 0x02 漏洞概述 由于大华智慧园区综合管理平台clientServer接口处未…

使用reprepro+nginx搭建apt服务器

目录 项目背景 项目要求 项目开发过程 1、apt服务器的搭建 2、实现自定义指定源文件列表来实现apt update更新 3、实现软件启动时自动更新 4. source.list中镜像源地址的格式 项目开发的难点/坑点 总结 项目背景 前面写过一篇“利用Nginx搭建一个apt服务器”&#xff…

STM32嵌入式开发需要掌握硬件、嵌入式系统、C编程语言以及相关的外设驱动等知识

学习STM32嵌入式开发需要掌握硬件、嵌入式系统、C编程语言以及相关的外设驱动等知识。以下是学习STM32的路线及重要的学习内容&#xff1a; 阶段学习内容目标1.基础知识- 理解嵌入式系统的基本概念和原理 - 了解STM32系列微控制器的特点和应用领域掌握嵌入式系统基本概念&…

Midjourney绘图欣赏系列(十)

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子&#xff0c;它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同&#xff0c;Midjourney 是自筹资金且闭源的&#xff0c;因此确切了解其幕后内容尚不…

用Docker Compose实现负载均衡【入门篇】

在本文中&#xff0c;我们将讨论如何使用Docker Compose管理多个容器&#xff0c;并实现负载均衡。 首先&#xff0c;让我们简要介绍一下Docker Compose。Docker Compose是一个用于定义和运行多个Docker容器的工具&#xff0c;通过一个单独的文件来描述应用程序的整个服务架构…

vue项目:webpack打包优化实践

本文目录 一、项目基本信息二、分析当前项目情况1、使用 webpack-bundle-analyzer 插件2、使用 speed-measure-webpack-plugin 插件 三、解决构建问题1、caniuse-lite 提示的问题2、 warning 问题 四、打包速度优化1、修改source map2、处理 loader 五、webpack性能优化1、使用…

idea+maven+tomcat+spring 创建一个jsp项目

概述&#xff1a;我真服了&#xff0c;这个垃圾学校还在教jsp&#xff0c;这种技术我虽然早会了&#xff0c;但是之前搞的大多都是springboot web类型的&#xff0c;这里我就复习一下&#xff0c;避免以后忘记这种垃圾技术 第一步&#xff1a;创建maven项目 第二步&#xff1a…

adb shell 指令集

1.connect device连接设备&#xff1a; adb devices #return: List of devices attached 0123456789ABCDEF device2.连接终端 adb shell从设备拷贝文件到本地 adb pull <remote> [local] 如: adb pull /sdcard/demo.txt e:\从到本地拷贝文件到设备 adb push &…

HUAWEI 华为交换机 配置 MAC 地址漂移检测示例

组网需求 如 图 2-17 所示&#xff0c;网络中两台 LSW 间网线误接形成了网络环路&#xff0c;引起 MAC 地址发生漂 移、MAC 地址表震荡。 为了能够及时检测网络中出现的环路&#xff0c;可以在 Switch 上配置 MAC 地址漂移检测功能&#xff0c; 通过检测是否发生MAC 地址漂移…

从零搭建Vue项目

目录 环境准备 NodeJS安装 ​编辑 2. 选择安装目录 3. 验证NodeJS环境变量 4. 配置npm的全局安装路径 5. 切换npm的淘宝镜像 6. 安装Vue-cli Vue项目创建 1. 打开UI界面 2. 打开项目管理器 3. 创建项目 vue项目目录结构介绍 运行vue项目 Vue项目开发流程 Vue组…

JAVA的多线程及并发

1. Java 中实现多线程有几种方法 继承 Thread 类&#xff1b; 实现 Runnable 接口&#xff1b; 实现 Callable 接口通过 FutureTask 包装器来创建 Thread 线程&#xff1b; 使 用 ExecutorService 、 Callable 、 Future 实 现 有 返 回 结 果 的多 线 程 &#xff08; 也 就 …

十五、计算机视觉-sobel算子

文章目录 前言一、sobel算子的概念二、sobel算子的计算方式三、具体实现 前言 上节课我们学习了梯度的知识&#xff0c;学习了如何去计算梯度&#xff0c;本节我们继续学习计算梯度的方法&#xff0c;本节我们学习使用Sobel算子计算梯度&#xff0c;这与上节课梯度计算方法有所…

jmeter发送请求参数如何使用变量

问题描述 发送jmeter请求时&#xff0c;想设置请求参数为变量 解决方法

190基于matlab的tfrSTFT时频分布图

基于matlab的tfrSTFT时频分布图&#xff0c;计算时间序列的STFT时频分布图&#xff0c;得到瞬时频率。通过GUI可以调节图像的展示样式。程序已调通&#xff0c;可直接运行。 190 STFT时频分布图 瞬时频率 能量谱 (xiaohongshu.com)

GPT R 生态环境领域数据统计分析

自2022年GPT&#xff08;Generative Pre-trained Transformer&#xff09;大语言模型的发布以来&#xff0c;它以其卓越的自然语言处理能力和广泛的应用潜力&#xff0c;在学术界和工业界掀起了一场革命。在短短一年多的时间里&#xff0c;GPT已经在多个领域展现出其独特的价值…

Django调用mysql

Django——数据库 1、ORM ORM 是 Django提供的内置框架 &#xff0c; 是和一些关系型数据库的连接接口&#xff0c;使用类对象的方式操作数据(增删改查)。 ORM 将类对象的操作语句转换为 sql 语句&#xff0c;将在数据库中查询得到的结果转换为对象的格式进行返回 在 Djang…

excel统计分析——一元直线回归

参考资料&#xff1a;生物统计学 两个具有因果关系的协变量如果呈直线关系&#xff0c;可以用直线回归模型来分析两个变量的关系。直线回归&#xff08;linear regression&#xff09;是回归分析中最简单的类型&#xff0c;建立直线回归方程并经检验证明两个变量存在直线回归关…

如何使用 templ 在 Go 中编写 HTML 用户界面?

简介 templ 是一个在 Go 中编写 HTML 用户界面的语言。使用 templ&#xff0c;我们可以创建可呈现 HTML 片段的组件&#xff0c;并将它们组合起来创建屏幕、页面、文档或应用程序。 安装 我们可以通过以下两种方式来安装 templ&#xff1a; go 安装 首先&#xff0c;我们需…