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.responseCodeserverData.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)