Harmonyos JS demo application development

Preface

Under the experience "HarmonyOS JS Demo application development ".

Video tutorial ：HarmonyOS JS Demo application development

Source warehouse ：harmonyos_app_samples

Not yet HarmonyOS Structural understanding , If you need to know , You can refer to Official documents .

In the link above demo, From the perspective of application developers , In general ：html According to the content ,css Control style ,JavaScript For interactive .

Because the warehouse code uses Apache License 2.0, It can be copied here / Modify some codes in the warehouse for notes , See warehouse for complete code .

brief introduction ：

This example is suitable for introducing how to develop a JS Demo application .

This application is shown by an example of a list JS Interface layout and logic implementation in the process of application development .

Show the list of schedules on the application page , The list item consists of the item name 、 Time 、 The degree of urgency consists of . It supports checking and deleting the event list .

---

matters needing attention

The code is easy to understand . Here we just look at how one element in the list is laid out .

Because my front end is more delicious , So here's the layout .

html The code is as follows ：

<div class="container">
    <text class="title">
        {
   { $t('strings.hello') }} {
   { title }}
    </text>
    
    <list>
        <list-item for="{
     {todayList}}" class="todo-list-item">
            <image class="todo-image-left" src="{
     {$item.checkBtn}}" onclick="completeEvent({
     {$item.id}})"></image>
            <div class="todo-item flex-row">
                <div class="todo-name-mark">
                <text class="todo-name">{
   {$item.event}}</text>
                <text class="todo-mark {
     {$item.tag}}"></text>
                </div>
            <text class="todo-time">{
   {$item.time}}</text>
            </div>
            <image class="todo-image-right" src="/common/images/delete.png" onclick="deleteEvent({
     {$item.id}})" show="{
     {$item.completeState}}"></image>
        </list-item>
    </list>
</div>

The effect is as follows ：

[1] " Appointment "event and " Small yellow dot "tag In a div( It's called div1 Well ) in .

[2] "14:30"time and div1, In the larger div2( It's called div2 Well ) in . Use Flex Layout up and down .

[3] ️、 and div2, For one list-item.