uniapp—day02 - 技术栈

个人名片：

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

文章目录

[WXML 和HTML区别？](#WXML 和HTML区别？)
[WXSS 和CSS区别？](#WXSS 和CSS区别？)
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 可以通过在标签上绑定事件来实现交互，如 bindtap 、bindinput 等。

HTML 也可以通过事件监听器来实现交互，如 onclick 、onchange 等。

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）

html 复制代码

 <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）

html 复制代码

<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标签）

html 复制代码

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

swiper组件（轮播图组件）

flex布局

案例练习

使用轮播图+flex布局实现如下效果
WXML代码

html 复制代码

<!--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

css 复制代码

/* 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;
}