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

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

通过GridRowColumnsGridColspanxs,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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/468361.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AndroidStudio-视图基础

一、设置视图的宽高 1.在XML文件中设置视图宽高 视图宽度通过属性android:layout_width表达&#xff0c;视图高度通过属性android:layout_height表达&#xff0c;宽高的取值主要有下列三种: &#xff08;1&#xff09;wrap_content:表示与内容自适应。对于文本视图来说&…

三菱QD77MS定位模块紧急停止功能

“紧急停止功能” 是通过简单运动模块的外部输入连接用连接器上连接的紧急停止输入&#xff0c;对同服放大器的全部轴进行批量停止的功能。(初始值为“0:有效”。)通过“[r.82]紧急停止有效/无效设置”可以选择紧急停止输入的有效/无效。 [1]控制内容 将“[r82]紧急停止有效/无…

Android JNI 技术入门指南

引言 在Android开发中&#xff0c;Java是一种主要的编程语言&#xff0c;然而&#xff0c;对于一些性能要求较高的场景&#xff08;如音视频处理、图像处理、计算密集型任务等&#xff09;&#xff0c;我们可能需要使用到C或C等语言来编写底层的高效代码。为了实现Java代码与C…

Js — 定时器

有两种&#xff1a;setInterval 和 setTimeout 间隔时间单位为毫秒 setInterval 每隔指定的毫秒数重复执行一个函数或代码 开启定时器&#xff1a;setInterval(函数&#xff0c;间隔时间) 作用&#xff1a;每隔一段时间调用这个函数 注意&#xff1a;它不是立即执行&#x…

H5播放器EasyPlayer.js 流媒体播放器是否支持npm(yarn) install 安装?

EasyPlayer.js H5播放器是一款功能强大的H5视频播放器&#xff0c;它支持多种流媒体协议播放&#xff0c;包括WebSocket-FLV、HTTP-FLV、HLS&#xff08;m3u8&#xff09;、WebRTC等格式的视频流。它不仅支持H.264和H.265编码格式&#xff0c;还具备实时录像、低延时直播等功能…

前端刺客系列----Vue 3 入门介绍

目录 一.什么是 Vue 3&#xff1f; 二.Vue 3 的主要特性 三,Vue3项目实战 四.总结 在前端开发的世界里&#xff0c;Vue.js 作为一款渐进式的 JavaScript 框架&#xff0c;已成为许多开发者的首选工具。自从 Vue 3 发布以来&#xff0c;它带来了许多重要的改进和新特性&…

【论文复现】MSA+抑郁症模型总结(三)

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀MSA抑郁症模型 热门研究领域&#xff1a;情感计算的横向发展1. 概述2. 论文地址3. 研究背景4. 主要贡献5. 模型结构和代码6. 数据集介绍7. 性…

Linux 实验:日志的备份与恢复 xfs文件系统

添加一个新的硬盘&#xff0c;创建硬盘分区sdc1 设置文件系统格式xfs&#xff0c;提示安装xfsprogs&#xff0c;如果安装失败&#xff0c;在后缀加上--fix-missing直到安装完成为止 mkdir创建空目录data&#xff0c;将sdc1挂载到data&#xff0c;data是根目录下新建的目录&…

应对AI与机器学习的安全与授权管理新挑战,CodeMeter不断创新引领保护方案

人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;技术正在快速发展&#xff0c;逐渐应用到全球各类主流系统、设备及关键应用场景中&#xff0c;尤其是在政府、商业和工业组织不断加深互联的情况下&#xff0c;AI和ML技术的影响日益广泛。虽然AI技术的…

证书学习(六)TSA 时间戳服务器原理 + 7 个免费时间戳服务器地址

目录 一、简介1.1 什么是时间戳服务器1.2 名词扩展1.3 用时间戳标记顺序1.4 7 个免费TSA时间戳服务器地址(亲测可用)1.5 RFC 3161 标准二、时间戳原理2.1 时间戳服务工作流程2.2 验证工作流程2.3 举个例子2.4 时间戳原理总结三、代码实现3.1 curl 命令请求时间戳3.2 java 代码…

一文快速预览经典深度学习模型(一)——CNN、RNN、LSTM、Transformer、ViT

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本文主要简要并通俗地介绍了几种经典的深度学习模型&#xff0c;如CNN、RNN、LSTM、Transformer、ViT&#xff08;Vision Transformer&#xff09;等&#xff0c;便于大家初探深度学习的相关知识&#xff0c;并更好地理解深度学…

如何运营Github Org

目录 前言 正文 关于分支保护 特别说明 如何在Windows环境下配置GitHub Desktop GPG签名&#xff1f; 推荐分支保护选择 关于good first issue 如何设置good first issue&#xff1f; 关于Project 尾声 &#x1f52d; Hi,I’m Pleasure1234&#x1f331; I’m currently learni…

接收nVisual中rabbitmq数据不成功问题排查

rabbitmq服务部署成功的情况下&#xff0c;消息对接不成功一般原因为消息发送失败&#xff0c;发送失败大多数可能为global_settings表配置错误。下面从两个方面解决消息对接不成功问题。 1.数据是否成功发送 检查global_settings表中rabbitmq发送消息配置信息是否正确 #MQS…

二叉树的实现

一.树 1.1树的概念与结构 树是一种非线性数据结构&#xff0c;由有限个结点组成的具有层次关系的集合。树的根部位置就叫根结点&#xff0c;除根结点以外&#xff0c;其余的树被分为各个互不相交的集合。树的根系只能向下延伸不能向左右延伸。除根结点以外每个结点有且仅有一…

Python基础学习-03逻辑分支语句、循环

目录 1、记住逻辑关系 2、逻辑分支语句 3、for-loop循环 4、while-loop 5、break 和 continue 6、本节总结 1、记住逻辑关系 • 逻辑关系 1&#xff09; True&#xff08;真&#xff09; 和 False&#xff08;假&#xff09; 2&#xff09;逻辑关系有 and&#xff08;与…

Spark中给读取到的数据 的列 重命名的几种方式!

目录 一、第一种 (withColumnRenamed) 二、第二种&#xff08;toDF&#xff09; 三、第三种&#xff08; toDF(*tuple1) &#xff09; 四、 第四种(schema) 五、假如文件里自带有列名的情况&#xff08;option&#xff09; 一、第一种 (withColumnRenamed) 假设要把如下…

鸿蒙UI开发——实现环形文字

1、背 景 有朋友提问&#xff1a;您好关于鸿蒙UI想咨询一个问题 如果我想实现展示环形文字是需要通过在Text组件中设置transition来实现么&#xff0c;还是需要通过其他方式来实现。 针对这位粉丝朋友的提问&#xff0c;我们做一下解答。 2、实现环形文字效果 ❓ 什么是环形…

现场工程师日记-MSYS2迅速部署PostgreSQL主从备份数据库

文章目录 一、概要二、整体架构流程1. 安装 MSYS2 环境2. 安装postgresql 三、技术名词解释1.MSYS22.postgresql 四、技术细节1. 创建主数据库2.添加从数据库复制权限3. 按需修改参数&#xff08;1&#xff09;WAL保留空间&#xff08;2&#xff09;监听地址 4. 启动主服务器5.…

Rust-AOP编程实战

文章本天成,妙手偶得之。粹然无疵瑕,岂复须人为?君看古彝器,巧拙两无施。汉最近先秦,固已殊淳漓。胡部何为者,豪竹杂哀丝。后夔不复作,千载谁与期? ——《文章》宋陆游 【哲理】文章本是不加人工,天然而成的,是技艺高超的人在偶然间所得到的。其实作者所说的“天成”…

Spark的Standalone集群环境安装

一.简介 与MR对比&#xff1a; 概念MRYARNSpark Standalone主节点ResourceManagerMaster从节点NodeManagerWorker计算进程MapTask&#xff0c;ReduceTaskExecutor 架构&#xff1a;普通分布式主从架构 主&#xff1a;Master&#xff1a;管理节点&#xff1a;管理从节点、接…