鸿蒙开发实战-OpenHarmony之天气应用

这篇具有很好参考价值的文章主要介绍了鸿蒙开发实战-OpenHarmony之天气应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

“天气之子”

功能描述:

通过请求免费API获取指定城市七天内相关天气信息

开发环境:

IDE:DEV ECO 4.0.600

SDK:4.0.10.15

开发板:DAYU200 4.0.10.16

开发过程

一. 创建项目,调试环境

1.创建项目

天气 api接入 鸿蒙,鸿蒙开发,harmonyos,华为,鸿蒙,移动开发,鸿蒙开发,OpenHarmony,鸿蒙NEXT

2.选择OpenHarmony、API10

天气 api接入 鸿蒙,鸿蒙开发,harmonyos,华为,鸿蒙,移动开发,鸿蒙开发,OpenHarmony,鸿蒙NEXT

3.连网条件下加载依赖

天气 api接入 鸿蒙,鸿蒙开发,harmonyos,华为,鸿蒙,移动开发,鸿蒙开发,OpenHarmony,鸿蒙NEXT

4.在开发板上签名,运行HelloWorld测试环境

直接运行,然后点击log报错直达签名

在工具栏File/Project Structure/Signing Configs,勾选Automatically generate签名;运行HelloWorld。

二.修改图标和名称

1.设置-应用管理页面

AppScope/app.json5中查看相关配置

2.桌面

src/main/module.json5中查看相关配置

最终效果:

天气 api接入 鸿蒙,鸿蒙开发,harmonyos,华为,鸿蒙,移动开发,鸿蒙开发,OpenHarmony,鸿蒙NEXT

天气 api接入 鸿蒙,鸿蒙开发,harmonyos,华为,鸿蒙,移动开发,鸿蒙开发,OpenHarmony,鸿蒙NEXT

三.添加网络权限

因为需要用到网络数据,所以添加initent权限。

在src/main/module.json5的model中添加配置。

   "requestPermissions": [{
      "name": "ohos.permission.INTERNET"
    }],

四.自定义Model

在ets中新建model文件夹,建立ArkTS文件,基于API返回结果结合需要自定义类
API返回结果:
天气 api接入 鸿蒙,鸿蒙开发,harmonyos,华为,鸿蒙,移动开发,鸿蒙开发,OpenHarmony,鸿蒙NEXT

源码如下

export class Item{
  name:string = "紫外线强度指数"
  level:string = "中等"
  // code:string = "uv"
}

export class Result1{//每1天
  city:string = '徐州'
  date:Date = new Date
  temp_day:number = 4
  temp_night:number = -1
  wea_day:string = "晴"
  wea_night:string = '晴'
  wind_day:string = "南风"
  wind_night:string = "南风"
  wind_day_level:string = "<3级"
  wind_night_level:string = "<3级"
  air_level:string = "轻度"
  sunrise:string = "07:17"
  sunset:string = "17:19"
  index:Array<Item> = []//建议
}

export class Result0{
  code:number = 200
  msg:string = 'success'
  data:Array<Result1> = []//7天
}

五.制作index页面、请求网络数据

1.请求网络数据

1.导入http模块

import http from '@ohos.net.http';
import { BusinessError } from '@ohos.base';

2.创建createHttp

let httpRequest = http.createHttp();

3.填写HTTP地址

httpRequest.request(// 填写HTTP请求的URL地址,可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
      "https://v2.alapi.cn/api/tianqi/seven",
      {
        method: http.RequestMethod.GET, // 可选,默认为http.RequestMethod.GET
        // // 开发者根据自身业务需要添加header字段
        header: [{
          'Content-Type': 'application/json'
        }],
        // 当使用POST请求时此字段用于传递内容
        extraData: {
          "token": "自己的token",
          "type": "all",
          "format": "json"
        },
   
      }, (err: BusinessError, data: http.HttpResponse) => {
 
    }
    );

4.对网络数据的处理

if (!err) {
        let result:Result0 = JSON.parse(data.result.toString())
        if(result.code == 200){
          this.a = result.data
        }
        else {
          this.message = result.msg
        }
        httpRequest.destroy();
      } else {
        this.message = JSON.stringify(err)
        // console.error('error:' + JSON.stringify(err));
        // 当该请求使用完毕时,调用destroy方法主动销毁
        httpRequest.destroy();
      }

完整代码:

GetData(city:string) {
  // 3.每一个httpRequest对应一个HTTP请求任务,不可复用
  let httpRequest = http.createHttp();
  // 4.
  httpRequest.request(// 填写HTTP请求的URL地址,可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
    "https://v2.alapi.cn/api/tianqi/seven",
    {
      method: http.RequestMethod.GET, // 可选,默认为http.RequestMethod.GET
      extraData: {
        "token": "自己的token",
        "city":city,
      },
    },
    (err: BusinessError, data: http.HttpResponse) => {
      if (!err) {
        let result:Result0 = JSON.parse(data.result.toString())
        if(result.code == 200){
          this.a = result.data
        }
        else {
          this.message = result.msg
        }
        httpRequest.destroy();
      } else {
        this.message = JSON.stringify(err)
        // console.error('error:' + JSON.stringify(err));
        // 当该请求使用完毕时,调用destroy方法主动销毁
        httpRequest.destroy();
      }
    }
  )
}

如果显示2300006错误码,很可能是网络问题

2.制作UI

1.文本输入框

TextInput({
      placeholder:"请输入查询城市名,如:徐州",
    }).onChange((item:string)=>{
      if(item!=null && item!=undefined){
        this.message = item
      }
    }).maxLength(8).type(InputType.Normal)

2.“查询”按钮:点击页面进行跳转到列表页

Button("查询").onClick(()=>{
      this.GetData(this.message)
      //跳转
      if(this.a!=null && this.a!=undefined && this.a.length>0){
        router.pushUrl({
          url:"pages/ListPage",
          params:this.a
        })
      }
      else{
        promptAction.showToast({message:"请重试~"})//数据请求失败
      }
    }).backgroundColor(Color.Transparent).width("50%")

最终界面:
天气 api接入 鸿蒙,鸿蒙开发,harmonyos,华为,鸿蒙,移动开发,鸿蒙开发,OpenHarmony,鸿蒙NEXT

六.制作列表页(跳转到的第二张页面)

先看最终效果:
天气 api接入 鸿蒙,鸿蒙开发,harmonyos,华为,鸿蒙,移动开发,鸿蒙开发,OpenHarmony,鸿蒙NEXT

1.自定义组件

天气 api接入 鸿蒙,鸿蒙开发,harmonyos,华为,鸿蒙,移动开发,鸿蒙开发,OpenHarmony,鸿蒙NEXT

Component装饰器修饰,定义struct,并且用关键字export导出

@Component
export struct ALine{//日期 天气图片 详情跳转
  @State date:Date = new Date
  @State wea:string = '晴'

  build(){
    Row(){
      Text(this.date.toString()).fontSize(25).fontWeight(FontWeight.Bold).margin({right:240}).fontColor(Color.White)

      Text("(白天)"+this.wea).fontColor(Color.White)

      Text("  >").fontWeight(FontWeight.Lighter).fontSize(30).fontColor(Color.White)
    }.width("100%").height("100%")
    .border({color:Color.Transparent}).borderRadius(14).borderWidth(3)
    .backgroundImage($r("app.media.LLBG")).backgroundImagePosition(Alignment.Center)
  }
}

2.页面UI

1.首先接收上一页面传输数据

@State a:Array<Result1> = router.getParams() as Array<Result1>

2.主要用到List,Column,Row,Text和自定义组件;利用ForEach循环渲染;每一个自定义组件绑定一个点击事件,可分别跳转到详情页。

源码:

Column({space:5}){
      Text(this.a[0].city).fontSize(50).fontColor(Color.White)

      List({space:20}){
        ForEach(this.a,(item:Result1)=>{
          ListItem(){
            ALine({date:item.date,wea:item.wea_day})
              .onClick(()=>{//
                router.pushUrl({
                  url:"pages/DetailPage",
                  params:item
                })
              })
          }.height("20%").width("100%")
        })
      }.width("100%").height("100%").scrollBar(BarState.Off)
    }.backgroundImage($r("app.media.LPBG")).backgroundImageSize(ImageSize.Cover)

七.制作详情页(点击自定义组件跳转到的第三张页面)

有了前面两张页面的基础,这一张可以较为顺利完成,故不再赘述。

最终效果:
天气 api接入 鸿蒙,鸿蒙开发,harmonyos,华为,鸿蒙,移动开发,鸿蒙开发,OpenHarmony,鸿蒙NEXT
本文主要是对鸿蒙开发中的实战讲解,制作天气应用原生开发。有关更多的实战学习,可以往主页阅读更多;鸿蒙的技术分布内容有如下:
天气 api接入 鸿蒙,鸿蒙开发,harmonyos,华为,鸿蒙,移动开发,鸿蒙开发,OpenHarmony,鸿蒙NEXT

高清完整或者实战文档,可以找我保存
天气 api接入 鸿蒙,鸿蒙开发,harmonyos,华为,鸿蒙,移动开发,鸿蒙开发,OpenHarmony,鸿蒙NEXT

天气 api接入 鸿蒙,鸿蒙开发,harmonyos,华为,鸿蒙,移动开发,鸿蒙开发,OpenHarmony,鸿蒙NEXT

八.总结

此项目主要练习了:文章来源地址https://www.toymoban.com/news/detail-833732.html

  1. List,Column,Row,Text,Divider,Image,promptAction等组件及其属性
  2. 网络数据请求
  3. 页面跳转及传输数据
  4. 自定义组件
  5. 自定义类
  6. 做自己喜欢的UI

到了这里,关于鸿蒙开发实战-OpenHarmony之天气应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 鸿蒙HarmonyOS4.0开发应用从入门到实战 安装DevEcoStudio

    安装包下载地址: 可以根据自己的操作系统选择对应版本下载。 HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 下载好后,打开安装包,进入安装界面: 点击Next,进入安装目录选择页面(不要出现中文或特殊字符),可以走默认路径: 点击Next,进入安装选项页面,按照如

    2024年02月04日
    浏览(82)
  • HarmonyOS 鸿蒙开发DevEco Studio OpenHarmony:配置开发环境

    目录 下载OpenHarmony SDK及工具链 参考信息 配置DevEco Studio代理 配置NPM代理 在进行OpenHarmony应用/服务开发前,需要提前在DevEco Studio中下载对应版本的SDK。下载OpenHarmony SDK需要连接网络,一般情况下,可以直接下载;但部分用户的网络可能受限,此时需要先根据参考信息 配置相

    2024年02月19日
    浏览(67)
  • HarmonyOS 鸿蒙开发DevEco Studio OpenHarmony:使用低代码进行开发

    OpenHarmony低代码开发方式,具有丰富的UI界面编辑功能,遵循JS、TS开发规范 ,通过可视化界面开发方式快速构建布局,可有效降低用户的时间成本和提升用户构建UI界面的效率。 说明 支持使用低代码进行JS/eTS页面开发,本章节以开发eTS页面为例,介绍低代码功能及使用方法。

    2024年02月19日
    浏览(65)
  • HarmonyOS 鸿蒙开发DevEco Studio OpenHarmony:编译构建概述

    目录 OpenHarmony构建体系 构建工具Hvigor 构建插件hvigor-ohos-plugin 工程目录及配置文件说明 如何构建应用/服务 启动应用/服务构建 查看编译过程

    2024年02月22日
    浏览(70)
  • 鸿蒙开发实战-OpenHarmony沙箱文件

    在openharmony文件管理模块中,按文件所有者分类分为应用文件和用户文件和系统文件。 1)沙箱文件。也叫做应用文件,包括应用安装文件、应用资源文件、应用缓存文件 在使用时首先需要导入包 import fs from “@ohos.file.fs”; 在API9之前使用“@ohos.fileio”,API9之后废弃。 1.常用

    2024年01月19日
    浏览(46)
  • 《HarmonyOS开发 – OpenHarmony开发笔记(基于小型系统)》第4章 OpenHarmony应用开发实例

    开发环境 : 开发系统:Ubuntu 20.04 开发板:Pegasus物联网开发板 MCU:Hi3861 OpenHarmony版本:3.0.1-LTS 1.新建工程及源码 新建目录 在applications/sample/myapp中新建src目录以及myapp.c文件,代码如下所示。 新建编译组织文件 新建applications/sample/myapp/BUILD.gn文件,内容如下所示: static_libr

    2024年02月09日
    浏览(82)
  • HarmonyOS/OpenHarmony-ArkTS基于API9元服务开发快速入门

    一、创建项目     二、创建卡片     三、添加资源   四、具体代码 五、运行案例     六、案例卡片效果   七、代码地址 (HarmonyOSAPP开发相关组件: 深圳市蛟龙腾飞网络科技有限公司 - Gitee.com)

    2024年02月14日
    浏览(48)
  • HarmonyOS/OpenHarmony应用开发-Stage模型应用/组件级配置

    在开发应用时,需要配置应用的一些标签,例如应用的包名、图标等标识特征的属性。本文描述了在开发应用需要配置的一些关键标签。图标和标签通常一起配置,可以分为应用图标、应用标签和入口图标、入口标签,分别对应 app.json5配置文件 和 module.json5配置文件 文件中的

    2024年02月13日
    浏览(65)
  • HarmonyOS/OpenHarmony应用开发-HDC环境变量设置

    hdc(HarmonyOS Device Connector)是 HarmonyOS 为开发人员提供的用于调试的命令行工具,通过该工具可以在 windows/linux/mac 系统上与真实设备或者模拟器进行交互。 hdc 工具通过 HarmonyOS SDK 获取,存放于 /Huawei/Sdk/openharmony/版本号/toolchains/ 目录下。 1、打开环境变量 2、新建系统变量 3、

    2024年04月15日
    浏览(56)
  • 【HarmonyOS】鸿蒙应用获取华为帐号手机号码步骤(API7及以下)

    【写在前面】 本文主要介绍使用API7及以下版本开发HarmonyOS应用时,通过华为帐号SDK和云侧接口获取手机号码的主要开发步骤,注意:开发过程中集成的华为帐号SDK仅支持API7及以下版本的HarmonyOS应用。 【前提准备】 1、HarmonyOS应用已申请获取手机号码的权限,申请权限文档请

    2024年02月12日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包