This is my 35th day of participating in the First Challenge 2022

Have to say is js development way and small program really touch the same, the same.

Author: Nuts

Public account: “Big Front End Tour”

Huawei Cloud sharing expert, InfoQ contract writer, Ali Cloud expert blogger, 51CTO blog chief Experience officer, one of the open source project GVA, focusing on the sharing of big front-end technologies, including Flutter, applets, Android, VUE, JavaScript.

There are a lot of tips on hongmeng development that have been introduced in previous articles, but today we are going to do our first to-do list application. Just like Flutter, Flutter is cross-platform. A set of Flutter code is available on Android, ios, and the Web. Linux, Desk and other deployment, Hongmeng also has such features, can be in mobile phone, large screen, watch effect, experience “one development, multiple device deployment” feature.

Next we begin the text

Here’s a preview:

The first step is of course to install DevEco Studio. It is recommended to install the 3.0beta, and it is good to use 3.0 for learning.

The second new construction project

Since the emergence of micro channel small programs, all kinds of “small programs” have mushroomed. The fact that small program development is very good, hongmeng JS UI framework to adopt a similar way is expected.

A small program (in The case of Hung Mun OS, Ability) consists of multiple pages, each consisting of three parts:

  • .hml is used to describe interface elements
  • .css is used to describe the style of the interface
  • .js is used to write logic to handle events

Let’s look at an example:

First, we create a project

Js file

import todoList from ".. /.. /common/todoList.js"
import router from '@system.router';
export default {
    data: {
        // To-do list
        todoList,
        inputTodo: "IDE cannot call input"
    },
    computed: {needTodoNum(){
            let num = 0;
            this.todoList.forEach(item= > {
                if(!item.status){
                    num++;
                }
            });
            returnnum; }},remove(index){
        console.log(index)
        this.todoList.splice(index,1)},addTodo() {
        this.todoList.push({
            info:this.inputTodo,
            status: false})},checkStatus(index){
        console.log(index);
        this.todoList[index].status = !this.todoList[index].status;
    },
    getNewTodo(e){
        this.inputTodo = e.value;
    },
// goback(){
// router.back();
/ /}
}
Copy the code

The CSS file

.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;
}
Copy the code

HTM file

<div class="container">
    <text class="title">Big front end trip to-do list</text>

    <div class="item" for="{{todoList}}">
        <text class="todo">{{$item.info}}</text>
        <switch showtext="true" checked="{{$item.status}}"
                texton="Complete" textoff="To do"
                class="switch"
                @change="checkStatus($idx)"></switch>
        <button class="remove" onclick="remove($idx)">delete</button>
    </div>
    <div class="info">
        <text class="info-text">Do you have</text>
        <text class="info-num">{{needTodoNum}}</text>
        <text class="info-text">Things to do, come on!</text>
    </div>
    <div class="add-todo">
        <input class="plan-input" type="text" onchange="getNewTodo"></input>
        <button class="plan-btn" onclick="addTodo">Add the backlog</button>
    </div>
</div>
Copy the code

The first is that the data source is assigned to Todolist by import.

The remaining backlog items are calculated by comouted calculation attributes, traversing the data source todolist in a state of

Number of false. It is assigned to needToNum and displayed on the page.

In the change event of the switch, reverse its status.

checkStatus(index){ console.log(index); this.todoList[index].status = ! this.todoList[index].status; },Copy the code

To-do items are removed from the list by passing the index when they are deleted.

remove(index){
    console.log(index)
    this.todoList.splice(index,1)
},
Copy the code

Add a to-do list by setting the input change event

getNewTodo(e){
    this.inputTodo = e.value;
},
Copy the code

Assign the input value to the variable inputTodo.

And then in the new button click event

addTodo() {
    this.todoList.push({
        info:this.inputTodo,
        status: false
    })
},
Copy the code

Add an object to the data source.

Data sources are imported from todoList under Common

Export default [{info: 'follow public id ', status: true}, {info:' big front-end tour ', status: false}, {info: 'learn programming knowledge ', status: True}, {info: 'accept programming push ', status: false}, {info:' day push ', status: false}]Copy the code

One of the issues involved with images is adding ohos.permission.INTERNET permission (if using cloud paths)

2. Working principle

To understand how it works, it’s important to look at the compiled code first. After the above three documents, compiling generates a file, its position in: / entry/build/intermediates/res/debug/lite/assets/js/default/pages/index/index. Js

Index. HML becomes the create function:

Index.css becomes a JSON file.

This is a neat way to convert XML/CSS that JS is not good at into JS code and JSON objects, and the conversion is done by tools that avoid runtime overhead.

Without looking at the compiled code, I tried to find the code to parse HML in the ACE/Graphic packages and was surprised to find nothing. It was only after looking at the generated code that the penny dropped.