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

 

提示:以上代码仅demo演示参考使用,产品化的代码需要使用国际化

 

5. 编译运行


通过hdc连接大屏设备
先查看智慧屏IP:大屏设置->"网络与连接"->"网络"->"无线网络"

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

hdc tconn 192.168.xxx.xxx:5555

 

运行

HarmonyOS应用开发-基本控件-鸿蒙开发者社区

 

干得好
你已经成功完成了HarmonyOS应用开发E2E体验,学到了:
如何创建一个HarmonyOS Demo Project
如何构建一个Hap并且将其部署到真机上
在HarmonyOS上如何使用HarmonyOS的轻量级偏好数据库

 

感谢关注HarmonyOS,如果想学习更多鸿蒙2.0基础教学请点击下面链接
HarmonyOS应用开发 — HelloWorld应用开发E2E体验
https://harmonyos.51cto.com/posts/ids/?id=707

HarmonyOS应用开发-元程序交互
https://harmonyos.51cto.com/posts/ids?id=709

HarmonyOS应用开发-分布式任务调度
https://harmonyos.51cto.com/posts/ids/?id=710

HarmonyOS应用开发-剪切板
https://harmonyos.51cto.com/posts/ids/?id=712

HarmonyOS应用开发-应用偏好数据读写
https://harmonyos.51cto.com/posts/ids/?id=713

HarmonyOS应用开发—UI开发与预览
https://harmonyos.51cto.com/posts/ids/?id=711

HarmonyOS应用开发-基本控件
https://harmonyos.51cto.com/posts/ids/?id=708

HarmonyOS应用开发-视频播放
https://harmonyos.51cto.com/posts/ids/?id=706

HarmonyOS应用开发 — 设备虚拟化特性开发
https://harmonyos.51cto.com/posts/ids?id=714

分类
标签
已于2020-9-16 22:38:02修改
1
收藏 1
回复
举报
回复
    相关推荐