OpenHarmony JS——ToDoList应用实践

参考资料

技术胖-华为鸿蒙系统应用 OpenHarmony JS 前端开发 基础入门教程-完结 (jspang.com)

鸿蒙2.x系统应用开发 前端基础入门教程-12集全完结哔哩哔哩bilibili

1. 创建工程项目

2. 真机模拟预览

 3. 应用开发结构目录

目录结构中文件分类如下：

• .hml 结尾的 HML 模板文件，这个文件用来描述当前页面的文件布局结构。
• .css 结尾的 CSS 样式文件，这个文件用于描述页面样式。
• .js 结尾的 JS 文件，这个文件用于处理页面和用户的交互。

各个文件夹的作用：

• app.js 文件用于全局 JavaScript 逻辑和应用生命周期管理。
• pages 目录用于存放所有组件页面。
• common 目录用于存放公共资源文件，比如：媒体资源和 JS 文件。
• i18n 目录用于配置不同语言场景资源内容，比如：应用文本词条，图片路径等资源，注意 i18n 是开发保留文件夹，不可重命名。

 4.文件使用规则

(1)文件访问规则

应用资源可通过绝对路径或相对路径的方式进行访问，本开发框架中绝对路径以 "/" 开头，相对路径以 "./" 或 "../" ，具体访问规则如下：

• 引用代码文件，需使用相对路径，比如：../common/utils.js。

• 引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。

• 公共代码文件和资源文件推荐放在 common 下，通过以上两条规则进行访问。

• CSS 样式文件中通过 url() 函数创建 数据类型，如：url(/common/xxx.png)。

• 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。

• 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。

5. 第三方JSON数据导入

注意使用相对路径

 6.具体代码

hml文件

<div class="container">
    <text class="title">待办事项</text>
    <!-- 待办事项 -->
    <div class="item" for="{{todoList}}"> <!-- for 循环 -->
        <text class="todo">{{$item.info}}</text>  <!-- {{$item.info}} 导入信息 -->
        <!-- {{$item.status}} 导入状态, 方法switchChange($idx) 改变状态-->
        <switch showtext="true" checked="{{$item.status}}"
                texton="完成" textoff="待办"
                class="switch"
                @change="switchChange($idx)"></switch>
        <button class="remove" onclick="remove($idx)">删除</button> <!-- .js 定义remove方法，传入索引值 -->
    </div>
    <!-- 剩余待办 -->
    <div class="info">
        <text class="info-text">您还有</text>
        <text class="info-num">{{todoCount}}</text><!-- todoCount方法计数-->
        <text class="info-text">件事情待办，加油！</text>
    </div>
    <!-- 添加待办 -->
    <div class="add-todo">
        <input class="plan-input" type="text"></input>
        <button class="plan-btn" onclick="addTodo" @click="addTodo">添加待办</button>
    </div>
</div>

.js文件

import todoList from "../../common/datas/todoList.js" // 导入外部JSON数据
export default {
    data: {
        todoList,
    }, // 数据绑定：js 变量放在 data 中
    remove(index){
        console.log(index);
        this.todoList.splice(index, 1);
    },
    switchChange(index){
        this.todoList[index].status = !this.todoList[index].status;
    },
    addTodo(){
        this.todoList.push({
            info: 'IDE工具无法监听键盘输入',
            status: false
        })
    },
    computed:{
        todoCount(){
            let num = 0;
            this.todoList.forEach(element =>{
                if(!element.status){
                    num++;
                }
            });
            return num;
        }
    }
}

.css文件 

.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 100px;
}
.title {
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #000000;
    opacity: 0.9;
    font-size: 28px;
}
.item{
    width: 325px;
    padding: 10px 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid #eee;
}
.todo{
    color: #000;
    width: 180px;
    font-size: 18px;
}
.switch{
    font-size: 12px;
    texton-color: green;
    textoff-color:red;
    text-padding: 5px;
    width: 100px;
    height: 24px;
    allow-scale: false;
}
.remove {
    font-size: 12px;
    margin-left: 10px;
    width: 50px;
    height: 22px;
    color: #fff;
    background-color: red;
}
.info{
    width: 100%;
    margin-top: 10px;
    justify-content: center;
}
.info-text {
    font-size: 18px;
    color: #AD7A1B;
}
.info-num{
    color: orangered;
    margin-left: 10px;
    margin-right: 10px;
}
.add-todo {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: #ddd;
}

.plan-input {
    width: 240px;
    height: 40px;
    background-color: #fff;
}
.plan-btn {
    width: 90px;
    height: 35px;
    font-size: 15px;
}

外部JSON数据 

export default [
    {
        info: '给老王打个电话',
        status: true
    },
    {
        info: '输出工作计划',
        status: false
    },
    {
        info: '和小王对接需求',
        status: true
    },
    {
        info: '整理客户资料',
        status: false
    },
    {
        info: '和朋友一起聚餐',
        status: false
    }
]