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

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这个库。

ts 复制代码
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中。

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是一个按钮组件。

具体组件的信息可以查阅官网文档。

ts 复制代码
@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里相关方法的引用。

ts 复制代码
import { httpRequestAsync, httpRequestGet } from '../viewmodel/IndexViewModel';

接着,就可以在onClick点击事件里调用方法,发起HTTP请求了。

在HTTP请求回调中,会将响应的数据赋值给message变量,而这个message变量是在Text组件中显示的。当这个message变量改变的时候,UI会自动刷新界面。

ts 复制代码
.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

通过GridRowColumnsGridColspanxs,sm,md,lg,可以同时适配不同的平板/手机

GridRow, columns: 5 ; GridCol,span: { xs: 1, sm: 2, md: 3, lg: 4 }, (都带有margin left & right : 10)

  • 手机效果
  • 平板效果

4.4 获取bundleName的方法

ts 复制代码
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)

相关推荐
郝晨妤2 小时前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙
Peace*3 小时前
HarmonyOs鸿蒙开发实战(16)=>沉浸式效果第一种方案一窗口全屏布局方案
harmonyos·鸿蒙·鸿蒙系统
howard20055 小时前
鸿蒙实战:页面跳转传参
harmonyos·跳转·router·传参
ZHOU_WUYI6 小时前
React 中使用 Axios 进行 HTTP 请求
javascript·react.js·http
柳如烟@6 小时前
华为Ensp模拟器配置RIP路由协议
华为
可涵不会debug8 小时前
【Linux|计算机网络】HTTPS工作原理与安全机制详解
linux·网络协议·http·网络安全·https
lu云之东9 小时前
Harbor2.11.1生成自签证和配置HTTPS访问
网络协议·http·docker·https·harbor
helloWorldZMY9 小时前
超文本传输协议(HTTP)与超文本传输安全协议(HTTPS)
网络协议·计算机网络·http·https
Amd79410 小时前
Nuxt.js 应用中的 webpack:configResolved事件钩子
webpack·自定义·开发·配置·nuxt.js·构建·钩子
威哥爱编程13 小时前
异步编程在ArkTS中具体怎么实现?
harmonyos·arkts·harmonyos next