HarmonyOS应用开发-基本控件

西门吹雪

发布于 2020-9-11 14:25

浏览

1收藏

1、介绍

本篇CodeLab将实现的内容
HarmonyOS是面向全场景多终端的分布式操作系统，使得应用程序的开发打破了智能终端互通的性能和数据壁垒，业务逻辑原子化开发，适配多端。通过一个简单应用开发，体验HarmonyOS的基本控件使用。

您将建立什么
在这个CodeLab中，你将创建Demo Project，并将Demo编译成HAP，部署到智慧屏上，以实现HarmonyOS基本控件使用。

您将会学到什么
如何创建一个HarmonyOS Demo Project
如何构建一个HAP并且将其部署到智慧屏上
通过此示例应用体验在HarmonyOS上如何使用基本控件，包括文本输入框，日期选择控件，单选按钮，下拉菜单和按钮

2. 您需要什么

硬件要求
操作系统：Windows10 64位
内存：8G及以上
硬盘：100G及以上
分辨率：1280*800及以上

软件要求
安装DevEco Studio和Node.js，详情请参考下载和安装软件
设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境
1. 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作
2. 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境

需要的知识点
JavaScript基础开发能力。

3. 能力接入准备
实现HarmonyOS应用开发，需要完成以下准备工作：

环境准备。
环境搭建。
创建项目
申请调试证书
应用开发

具体操作，请按照《DevEco Studio使用指南》中详细说明来完成。

4. 代码编写

1. 在en-US.json和zh-CN.json文件中添加字符串资源参考代码

{
    "strings": {
        "male": "male",
        "female": "female",
        "secret": "secret",
        "graduated": "graduated",
        "bachelor": "bachelor",
        "master": "master",
        "doctor": "doctor"
    }
}

{
    "strings": {
        "male": "男",
        "female": "女",
        "secret": "保密",
        "graduated": "本科",
        "bachelor": "学士",
        "master": "硕士",
        "doctor": "博士"
    }
}

2. index.hml文件页面布局参考代码

<div class="container">
    <input class="title" onchange="getName" value="{{text}}" type="text"></input>
    <div class="title">
        <div class="radio-item">
            <input id="radio_male" type="radio" name="radio" value="{{ $t('strings.male') }}" onchange="getGender"></input>
            <label target="radio_male">{{ $t('strings.male') }}
            </label>
        </div>
        <div class="radio-item">
            <input id="radio_female" type="radio" name="radio" value="{{ $t('strings.female') }}"
                    onchange="getGender"></input>
            <label target="radio_female">{{ $t('strings.female') }}
            </label>
        </div>
        <div class="radio-item">
            <input id="radio_secret" type="radio" name="radio" value="{{ $t('strings.secret') }}"
                    onchange="getGender"></input>
            <label target="radio_secret">{{ $t('strings.secret') }}
            </label>
        </div>
    </div>
    <select class="title">
        <option value="{{$t('strings.graduated')}}">{{$t('strings.graduated')}}
        </option>
        <option value="{{$t('strings.bachelor')}}">{{$t('strings.bachelor')}}
        </option>
        <option value="{{$t('strings.master')}}">{{$t('strings.master')}}
        </option>
        <option value="{{$t('strings.doctor')}}">{{$t('strings.doctor')}}
        </option>
    </select>
</div>

3. index.css文件样式参考代码

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title {
    font-size: 20px;
    flex-direction: column;
}

.radio-item {
    font-size: 30px;
    flex-direction: row;
}

4. index.js文件逻辑参考代码

export default {
    data: {
        text: "",
        today: "2020-08-26"
    },
    getName(e) {
        this.text = e.text;
        console.info("user name is " + e.text);
    },
    getGender(e) {
        console.info("gender is " + e.value);
    },
    getDate(e) {
        this.today = e.year + "-" + (e.month + 1) + "-" + e.day;
        console.info("date is " + e.year + "/" + (e.month + 1) + "/" + e.day);
    },
    onInit() {
        this.title = this.$t('strings.world');
    }
}