HarmonyOS鸿蒙Next应用开发—解锁学习实战（二）

HarmonyOS鸿蒙Next应用开发—解锁学习实战（二） 四、编写项目代码

1. 项目目录结构介绍：

src:
├── Js:
│   └── default:
├── i18n：国际化文件；
├── Image：项目图片存储文件；
├── Pages：页面代码(html+css+js)文件存储位置；
├── Openharmony: 提示搜索Openharmony页面布局；
│   ├── Index: app首页布局；
│   ├── Interest: Openharmony开发者勉励语页面布局；
│   ├── study: Openharmony点击学习页面；
│   └── tupian: 学习入口页面布局；
└── resources:
    ├── element: app部分配置json，如app名称；
    └── media: app图标存放位置；
        └── config.json: 项目配置文件

1. 关键代码（点击学习部分）说明：

页面布局(html)：

<div class="pagediv">
    <div class="topdiv">
        <text class="textdiv" for="{{title}}">{{$item}}</text>
    </div>
    <div class="middlediv">
        <block for="{{arrs}}">
            <div class="box">
                <button class="button_dj" onclick="show({{$item.id}})"> {{$item.id}}</button>
            </div>
        </block>
    </div>
    <div class="bottomdiv">
        <div class="div_dati">
            <text class="text_style">{{show_text}}</text>
        </div>
    </div>
    <div class="button_study">
        <text class="button_style_study" onclick="page_four">{{know_study}}</text>
    </div>
</div>

点击学习页面逻辑代码(js)：

import router from '@system.router';

export default {
    data: {
        title:["点击按钮","解锁术语解释与学习"],
        arrs:[
            {
                'id':'Ability',
                'value':'应用的重要组成部分，是应用所具备能力的抽象'
            },
            ...
        ],
        show_text:'',
        know_study:"了解更多"
    },
    show(e){
        console.info(e)
        var list = this;
        this.arrs.forEach(element => {
            console.info(element.id)
            if (element.id==e) {
                list.show_text = element.value
            }
        });
        console.info(list.show_text);
    },
    page_four(){
        router.push({
            uri:'pages/harmonyos/harmonyos'
        })
    }
}