成都市住房和城乡建设局网站,黑龙江省垦区建设协会网站,云服务器上建网站,华安网站建设1. 环境搭建
开发HarmonyOS需要安装DevEco Studio#xff0c;下载地址 : https://developer.huawei.com/consumer/cn/deveco-studio/
2. 如何入门
入门HarmonyOS我们可以从一个实际的小例子入手#xff0c;比如获取网络数据#xff0c;并将其渲染到界面上。 本文就是基于…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): PromiseResponseResult {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() : PromiseResponseResult {let httpResult await httpRequestGet(http://192.168.102.141:9588/news/getNewsType)return httpResult}export function httpRequestGet(url: string): PromiseResponseResult {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配置文件。 entryHarmonyOS工程模块编译构建生成一个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 ; GridColspan: { 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)
