HarmonyOS入门 : 获取网络数据，并渲染到界面上

时间：2024-11-10 07:48:42

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-****博客

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)

相关文章