1. 环境搭建
开发HarmonyOS需要安装DevEco Studio，下载地址 : https://developer.huawei.com/consumer/cn/deveco-studio/
2. 如何入门
入门HarmonyOS我们可以从一个实际的小例子入手，比如获取网络数据，并将其渲染到界面上。
本文就是基于"获取网络数据，并将其渲染到界面上"这个小例子，来介绍如何入门HarmonyOS。
3. 鸿蒙获取网络数据，并渲染到界面上
3.1 如何发起HTTP请求
关于如何发起HTTP请求，官网上已经有现成的介绍 : 从网络获取数据-华为开发者学堂 (huawei.com)
对应的代码如下，可以发现和Android上发起HTTP请求差别不大，只不过Android中一般用的是Okhttp这个库，而鸿蒙这里用的是自带的http这个库。
export function httpRequestGet(url: string): Promise<ResponseResult> {
let httpRequest = http.createHttp();
let responseResult = httpRequest.request(url, {
method: http.RequestMethod.GET,
readTimeout: Const.HTTP_READ_TIMEOUT,
header: {
'Content-Type': ContentType.JSON
},
connectTimeout: Const.HTTP_READ_TIMEOUT,
extraData: {}
});
let serverData: ResponseResult = new ResponseResult();
// Processes the data and returns.
return responseResult.then((value: http.HttpResponse) => {
if (value.responseCode === Const.HTTP_CODE_200) {
// Obtains the returned data.
let result = `${value.result}`;
let resultJson: ResponseResult = JSON.parse(result);
if (resultJson.code === Const.SERVER_CODE_SUCCESS) {
serverData.data = resultJson.data;
}
serverData.code = resultJson.code;
serverData.msg = resultJson.msg;
} else {
serverData.msg = `${$r('app.string.http_error_message')}&${value.responseCode}`;
}
return serverData;
}).catch(() => {
serverData.msg = $r('app.string.http_error_message');
return serverData;
})
}
接下来，我们用实际代码来实现一个简单的demo。
3.2 搭建HTTP服务器
这里我们用到了一个现成的服务器 : https://gitee.com/harmonyos_codelabs/NewsData
这是一个关于新闻资讯的服务器，服务器基于node.js，具体环境搭建详见 gitee 中的说明文档。
启动成功后的效果如下
3.3 编写HTTP请求相关代码
这里请求的是刚才我们启动的本地服务器中的/news/getNewsType接口，用来获取新闻类别。
当请求成功后，会直接以String字符串的形式赋值给serverData.data。
这里，我将相关代码放到了IndexViewModel.ts中。
class IndexViewModel{
export async function httpRequestAsync() : Promise<ResponseResult> {
let httpResult = await httpRequestGet("http://192.168.102.141:9588/news/getNewsType")
return httpResult
}
export function httpRequestGet(url: string): Promise<ResponseResult> {
let httpRequest = http.createHttp();
let responseResult = httpRequest.request(url, {
method: http.RequestMethod.GET,
/*header: {
'Content-Type': 'application/json'
},*/
readTimeout: 15,
connectTimeout: 15,
});
let serverData: ResponseResult = new ResponseResult();
return responseResult.then((value: http.HttpResponse) => {
serverData.code = value.responseCode
serverData.data = value.result.toString();
return serverData;
}).catch(() => {
serverData.data = "http_error_message";
return serverData;
})
}
}
3.4 编写界面
这里用到了鸿蒙里基础的界面组件。比如Column是一个列表组件，Text是一个文本组件，Button是一个按钮组件。
具体组件的信息可以查阅官网文档。
- Button官方文档
- Text官方文档
- Column官方文档
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
Text(this.message)
.id('H')
.fontSize(30)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
Button(){
Text("button")
.fontSize(20)
.textAlign(TextAlign.Center)
.width('60%')
.height(48)
.fontWeight(FontWeight.Bold)
}.onClick(event=>{
//TODO 按钮点击事件，待实现
})
}
.height('100%')
.width('100%')
}
}
3.5 按钮点击事件
这里我们希望点击Button按钮的时候，就能发起HTTP请求，向服务器获取数据。
在这之前，我们需要先添加IndexViewModel.ts里相关方法的引用。
import { httpRequestAsync, httpRequestGet } from '../viewmodel/IndexViewModel';
接着，就可以在onClick点击事件里调用方法，发起HTTP请求了。
在HTTP请求回调中，会将响应的数据赋值给message变量，而这个message变量是在Text组件中显示的。当这个message变量改变的时候，UI会自动刷新界面。
.onClick(event=>{
httpRequestAsync().then((value)=>{
this.message = `${value.code} ${value.data}`
})
})
接着，运行项目可以发现，能正常发起HTTP请求，并将数据渲染到界面上了。
4. 其他遇到的问题
在入门鸿蒙开发途中，还遇到了其他的一些小问题，再次一并记录。
4.1 自动生成签名
运行到鸿蒙模拟器上时，是不需要签名的。但是运行到真机上时，是需要签名的，我们可以配置自动生成一个签名，如下图所示，在Project Structure中。
4.2 ArkTS工程目录结构
AppScope > app.json5：应用的全局配置信息，详见app.json5配置文件。
entry：HarmonyOS工程模块，编译构建生成一个HAP包。
src > main > ets：用于存放ArkTS源码。
src > main > ets > entryability：应用/服务的入口。
src > main > ets > entrybackupability：应用提供扩展的备份恢复能力。
src > main > ets > pages：应用/服务包含的页面。
src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见module.json5配置文件。
build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
hvigorfile.ts：模块级编译构建任务脚本。
obfuscation-rules.txt：混淆规则文件。混淆开启后，在使用Release模式进行编译时，会对代码进行编译、混淆及压缩处理，保护代码资产。详见开启代码混淆。
oh-package.json5：用来描述包名、版本、入口文件（类型声明文件）和依赖项等信息。
oh_modules：用于存放三方库依赖信息。
build-profile.json5：工程级配置信息，包括签名signingConfigs、产品配置products等。其中products中可配置当前运行环境，默认为HarmonyOS。
hvigorfile.ts：工程级编译构建任务脚本。
oh-package.json5：主要用来描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等。
原文链接 : 鸿蒙课程学习总结（01）_鸿蒙compatiblesdkversion12-CSDN博客
4.3 同时适配手机和平板 : GridRow / GridCol
通过GridRow的Columns和GridCol的span的xs,sm,md,lg，可以同时适配不同的平板/手机。
GridRow， columns: 5 ; GridCol，span: { xs: 1, sm: 2, md: 3, lg: 4 }， (都带有margin left & right : 10)
- 手机效果
- 平板效果
4.4 获取bundleName的方法
const bundleName = (getContext(this) as common.UIAbilityContext).applicationInfo.name;
const url = `@bundle:${bundleName}/phone/ets/pages/MainPage`;
4.5 HarmonyOS 实用Demo/组件仓库
Codelabs: 分享知识与见解，一起探索HarmonyOS的独特魅力
帮助开发者快速熟悉OpenHarmony SDK所提供的API和应用开发流程，我们提供了一系列的应用示例 (gitee.com)
