三次培训444

TodoList应用构建
（1）.首先要注意页面的设置
页面结构使用 HTML 相同的标签进行嵌套，最外层是 div 容器。
文本内容放在<text>标签中才能呈现，否则不会呈现文本内容。
可以直接调用 鸿蒙 JS 封装好的 组件，这里我们使用的是 switch 组件。
如图所示为一个switch组件

（2）页面样式设计注意事项
页面 CSS 支持 id、class、tag 选择器，建议使用 class 选择器。
页面样式系统基于 flex 弹性布局进行设置，默认就是 flex 弹性布局，需要注意，弹性布局会自动的拉升和压缩内部元素模块宽度、高度。
鸿蒙封装的 JS 组件，有一个专门的样式说明，这个和我们传统的 CSS 写法有很大的差异，这个尤其需要注意
（3）数据渲染与事件绑定
1.第三方 JSON 数据导入，注意使用相对路径

代码：

export default [
    {
        info: '给老王打个电话',
        status: true
    },
    {
        info: '输出工作计划',
        status: false
    },
    {
        info: '和小王对接需求',
        status: true
    },
    {
        info: '整理客户资料',
        status: false
    },
    {
        info: '和朋友一起聚餐',
        status: false
    }
]
import todoList from "../../common/datas/todoList.js"
2.数据绑定

与vue用法类似

hml {{ 变量名 }}

js 变量放在 data 中

export default{
    data:{
        变量名： value
    }
}
3.列表渲染（for)

tid 属性指定数组中每个元素的唯一标识，默认值为 id，用于加速for循环的重渲染。

写法1（都不指定）：<div for="{{array}}" tid='id'></div> ,$idx代表元素索引，$item代表数组元素

写法2（指定元素名称）：<div for="{{value in array}}" tid='id'></div>，$idx 代表元素索引，value 代表数组元素

写法3（指定索引和元素名称）：<div for="{{(index,value) in array}}" tid='id'></div> ，index代表元素索引，value代表数组元素

 4.

事件绑定

类似 v-on，在 js 中绑定的函数和 data 同级

hml：<div οnclick="clickfunc"></div> 或 <div @click="clickfunc"></div>

js： 放在 data 后:

export default{
    data:{
    },
    clickfunc: function(){
        ......
    }
}
5.用计算属性 computed 和 Vue 中的用法一样，依赖 data 中的数据进行计算，return 返回计算的结果。

页面样式布局及多终端运行TodoList
（1）多终端页面样式设计规则
JS UI 框架页面样式，系统基于 flex 弹性布局进行设置，默认就是 flex 弹性布局，需要注意，弹性布局会自动的拉升和压缩内部元素模块宽度、高度。

JS UI框架中手机和智慧屏中的 px 指逻辑像素，px 是根据实际屏幕宽度物理像素进行缩放计算的。例如当width 设为 100px 时，在宽度为1440物理像素的屏幕上，实际显示的宽度为200物理像素。

需要注意的地方有：

在 TV 上有一个黑色的背景，需要针对性的调整对应的 CSS 样式，颜色需要重点处理反转。
穿戴设备是一个圆形的表盘，需要针对圆形容器特征专门设计对应的样式
媒体查询

媒体查询（Media Query）在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能：

针对设备和应用的属性信息，可以设计出相匹配的布局样式。

当屏幕发生动态改变时（比如分屏、横竖屏切换），应用页面布局同步更新。

我们常用类型来进行判断，按照 phone、tv、wearable 顺序输出不同响应式的页面布局

@media screen and (device-type: phone)  {}
@media screen and (device-type: tv)  {}
@media screen and (device-type: wearable)  {}
（2）TodoList页面多端适配实现

分组列表：<list-item-group>

普通列表：<list-item>

使用router.push,先导入模块

滑动容器，提供切换子组件显示的能力