学习打卡第8周

组件分类

一个html页面必须有一个只能有一个div 作为根节点

根据组件的功能，可以将组件分为以下四大类：

文本组件

主要是 CSS 样式的设置，目前在鸿蒙操作系统中，主要应用如下的样式
文本样式:color、font-size、allow-scale、word-spacing、text-valign。
划线样式:text-decoration、text-decoration-color。
隐藏文本:text-overlow;ellipsis。
文本折行:word-break;break-all。
还支持添加子组件span

<div class "container" style="justify-content: center; align-items: center; flex-direction:column;background-color: #F1F3F5;">
<text style="font-size: 45px;">
学鸿蒙
</text>
<text style="font-size: 45px;">
<span style="color: aqua;">我是</span>
<span style="color: aqua;">span</span></text>
</div>

按钮组件

在鸿蒙 App 中添加一个按钮非常方便，并且 Ark UI已经预先内置了几种常用的按钮形状button 是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮和下载按钮，代码如下

HTML
<! -- xxx.hml -->
<div class="containern>
	<button class="circle"type="capsule">胶囊按钮</button>
	<button class="circle" type="circle">+</button>
	<button class="text"type="text">文本按讯</button>
	<button class="button donload" type="download" id="download-btn" onclick="setProgress">下战按钮</button>
</div>

在使用按钮组件时，注意事项：

1. 胶囊按钮(type=capsule)：不支持 border 相关样式
2. 圆形按钮(type=circle) ：不支持文本相关样式
3. 文本按钮 (type=text)：自适应文本大小，不支持尺寸样式设置 (radius、width、height)，背景透明不支持 background-color 样式。
4. 下载按钮(type=download)为 button 组件添加 progress 方法，从而可以实时显示下载进度条的进度。
5. button 组件使用的 icon 图标如果来自云端路径，则需要添加网络访问权限ohos.permission.INTERNET

列表组件

list 是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据代码如下。

HTML
<! -- index.hml -->
<div class="container>
<list>
	<list-item class="listItem"> </list-item>
	<list-item class="listItem"> </list-item>
	<list-item class="listItem"> </list-item>
	<list-item class="listItem"> </list-item>
</list>
</div>

css
tXXX.css */
.container {
	flex-direction: column;
	align-items: center;background-color: #F1F3F5;
	}
.list-itemf{
	height: 20%;
	background-color:#d2e0e0;
	margin-top:20px;
}

• list ——>list-group——>list-item
• list-group 带折叠
• list class=“list-wrapper” 、.list-wrapper list-item { }
  

页面路由跳转

一个 App 大多数都是由1个以上页面才能完成大多数的功能，那么页面与页面之间就需要进行跳转。比如访问商品列表页面时，单击某个商品，就会进人商品详情页面，这个功能就是靠页面路由来实现的。

页面路由 router 根据页面的 uri 到目标页面，从而实现跳转。以最基础的两个页面之间的跳转为例，具体实现步骤如下。

1. 在 Project窗口，打开 enry > sr > main >js >default 选项，右键单击 pages
   文件夹，选择New >JS Page 命令，创建一个详情页。

2. 调用 router.push()路由到详情。

3. 调用rouler.back()回到首页

构建页面布局 index和detail 这两个页面包含一个 text 组件和 bulton 组件:text 组件用来指明当前页面button 组件用来实现两个页面之间的相互跳转。

<!-- index.hml -->
<div class="container">
    <text class="title">
        浏览
    </text>
    <button type="capsule" onclick="launch"> go in </button>
</div>

<!-- detail.hml -->
<div class="container">
    <text class="title">
        详情页
    </text>
    <button type="capsule"  onclick="launch">back</button>
</div>

<!--index.js-->

import router from '@system.router';
export default {
    launch: function() {
        router.push ({
            uri: 'pages/detail/detail',
        });
    },
}

<!-- index.hml -->
import router from '@system.router';
export default {
   launch: function()
   {
       router.back();
   },
}

数据绑定

使用JavaScript 开发方式，可以很方便地把脚本中的变量在文档中进行动态展示，这里需要用到数据绑定的功能，html代码如下

HTML
<text class="title">
{{ content })
</text>

JavaScript代码如下
// xxx.js
export default{
data: {
content:'你好鸿蒙开发者'
  }
}

事件

主要包括手势事件和按键事件。手势事件主要用于智能穿戴等具有触摸屏的设备，按键事件主要用于智慧屏设备。

手势事件

手势表示由单个或多个事件识别的语义动作（例如：点击、拖动和长按）。一个完整的手势也可能由多个事件组成，对应手势的生命周期。JS UI 框架支持的手势事件有：

触摸

• touchstart：手指触摸动作开始。
• touchmove：手指触摸后移动。
• touchcancel：手指触摸动作被打断，如来电提醒、弹窗。
• touchend：手指触摸动作结束。

点击
click：用户快速轻敲屏幕。

长按

longpress：用户在相同位置长时间保持与屏幕接触。

html代码
<div class="container">
    <text class="title">
        用户事件
    </text>
    <button type="capsule" on:click="click"> 点击事件</button>
    <button type="circle" on:longpress="longpress">长按事件</button>
    <button type="download" on:touchstart="touchstart">触摸开始事件</button>
    <button type="text" on:touchmove="touchmove">触摸移动事件</button>
    <button type="text" on:touchcancel="touchcancel">触摸取消事件</button>
    <button type="text" on:touchend="touchend">触摸结束事件</button>
</div>

js代码
export default {
    data: {
        title: ""
    },
    onInit() {

    },
    click(){
        console.log("用户点击了按钮")
    },
    longpress(){
        console.log("用户长按了按钮")
    },
    touchstart()
    {
        console.log("开始触摸")
    },
    touchmove()
    {
        console.log("触摸移动")
    },
    touchcancel(){
        console.log("触摸取消")
    },
    touchend()
    {
        console.log("结束触摸")
    }
}