本篇CodeLab将实现的内容

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

您将建立什么

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

您将会学到什么

硬件要求

软件要求

需要的知识点

实现HarmonyOS应用开发，需要完成以下准备工作：

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

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');
    }
}

通过hdc连接大屏设备

先查看智慧屏IP：大屏设置->"网络与连接"->"网络"->"无线网络"

在cmd或者IDE的Terminal输入命令：

hdc tconn 192.168.xxx.xxx:5555

运行

您已经成功完成了HarmonyOS应用开发体验，学到了：

 已复制代码