devbox
木道寻08
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS/OpenHarmony应用开发ets天气预报_deveco studio下载axios包

作者：木道寻08 | 2024-06-30 11:36:07

赞

踩

deveco studio下载axios包

使用工具：DevEco3.1.0.5，SDK9

文章目录

  • 使用ohpm下载三方库axios
  • 高德天气申请自己的key
  • 发送网络请求获取数据
  • 编写UI界面和程序

前言：

新版本的DevEco预览器可以使用联网功能了，这就很方便了。

文中布局不美观，大家不要介意

完整文件代码下载：src.rar - 蓝奏云

一、使用ohpm下载三方库axios

1.首先需要下载和配置ohpm

官网链接：ohpm使用指导-命令行工具-DevEco Studio使用指南-工具-HarmonyOS应用开发

2.查看OpenHarmony三方库中心仓

官网链接：OpenHarmony三方库中心仓

3.下载和安装第三方库axios

链接：OpenHarmony三方库中心仓

需要在项目名称目录下执行

ohpm install @ohos/axios

二、高德天气申请自己的key

1.注册账号，进入控制台，新建应用，添加Key

2.选择服务平台时需要选择Web服务

3.查看高德官方文档

链接：天气查询-基础 API 文档-开发指南-Web服务 API | 高德地图API (amap.com)

 4.生成自己的请求网址

例如：https://restapi.amap.com/v3/weather/weatherInfo?city=110101&key=<用户key>

三、发送网络请求获取数据

1.导入下载的第三方包

import axios from '@ohos/axios'

2.发请求，拿数据

  1.  async getTodayData(){
  2.    const data = await axios.get('自己申请的网址')
  3.    console.log(data.data)
  4. }

 3.分析数据

四、编写UI界面和程序

1.纵向布局，分头部，中部，底部

头部代码：
  1. //头部
  2.       Column({space:20}){
  3.         Text('阿顾天气1.0')
  4.           .fontSize(25).fontWeight(700).width('100%').textAlign(TextAlign.Center)
  5.         Row(){
  6.           Image(this.posiIco)
  7.             .width(50).height(50).objectFit(ImageFit.Contain)
  8.           //展示获取的城市，2.0版本添加点击事件，可以自主选择地区
  9.           Text(this.address)
  10.             .fontSize(30).fontColor(Color.Black)
  11.         }
  12.       }
  13.       .width('100%').layoutWeight(2).justifyContent(FlexAlign.SpaceAround)
 中部代码：
  1. Column(){
  2.        //分割线
  3.        Divider().width('100%')
  4.        //今日天气
  5.        Column(){
  6.          Text('今日天气：')
  7.            .fontSize(20).fontWeight(800).width('100%')
  8.          //空占位组件
  9.          Blank()
  10.          Column({space:10}){
  11.            Text('天气情况：'+this.weatherToday)
  12.              .fontSize(22).fontColor(Color.Brown)
  13.            Image(this.weatherTodayPic)
  14.              .width(80).height(50).objectFit(ImageFit.Contain)
  15.            Text('气温：'+this.temToday+'°C')
  16.              .fontSize(22).fontColor(Color.Brown)
  17.          }.width('70%').border({width:1,color:Color.Pink}).margin({bottom:10})
  18.          .borderRadius(30).backgroundColor("#ffbabac1").padding(10)
  19.        }
  20.        .width('100%').layoutWeight(1).padding(10)
  21.        //分割线
  22.        Divider().width('100%')
  23.        //未来三日天气
  24.        Column(){
  25.          Text('未来三日天气：')
  26.            .fontSize(20).fontWeight(800).width('100%')
  27.           List({space:10}){
  28.             ForEach(this.weaArr,(item:weatherTypes,index:Number)=>{
  29.               //如果index==0,那么根据返回的数据，会渲染今天的天气，所以要排除今日的，渲染未来3日的
  30.               if(index !== 0){
  31.                 ListItem(){
  32.                   Column({space:10}){
  33.                     Text(item.date)
  34.                       .fontSize(17)
  35.                     Text('白天天气：'+item.dayweather)
  36.                       .fontSize(20).fontColor(Color.Brown)
  37.                     Image(this.judeWeather(item))
  38.                       .width(80).height(50).objectFit(ImageFit.Contain)
  39.                     Text('气温：'+((item.daytemp*1.0+item.nighttemp*1.0)/2)+'°C')//取平均值做温度
  40.                     .fontSize(18).fontWeight(800)
  41.                     Row(){
  42.                       Text('风向：')
  43.                         .fontSize(15).fontColor(Color.Brown)
  44.                       Image(this.windImg)
  45.                         .width(50).height(40).objectFit(ImageFit.Contain)
  46.                         // @ts-ignore
  47.                         .rotate(this.judeWind(item))//图标旋转的角度
  48.                     }
  49.                   }.border({width:1,color:Color.Pink}).padding(10).borderRadius(15).backgroundColor("#ffbabac1")
  50.                 }.margin(20)
  51.               }
  52.             })
  53.           }.listDirection(Axis.Horizontal)//将list方向改为横向
  54.        }
  55.        .width('100%').layoutWeight(2).padding(10)
  56.      }
  57.       .width('100%').layoutWeight(8)
底部代码：
  1. //底部信息区
  2.       Row(){
  3.         Text('信息：天气数据来自于高德天气API@2024.3.21')
  4.           .fontSize(15).fontWeight(500).fontColor("#ffae2e2e").width('100%').textAlign(TextAlign.Center)
  5.       }
  6.       .width('100%').layoutWeight(1)

2.编写今日天气和未来3日天气的网络请求数据

  1.   //获取今日天气数据
  2.  async getTodayData(){
  3.    const data = await axios.get(this.todayUrl)
  4.    this.weaList = data.data.lives
  5.    //赋值地址，默认北京东城区
  6.    this.address = this.weaList[0].province+'市'+this.weaList[0].city
  7.    //将获取的今日天气情况赋值
  8.    this.weatherToday = this.weaList[0].weather
  9.    //执行函数，判断今日获取的天气情况，动态赋值根据天气情况展示图片
  10.    this.getWeatherTodayPic()
  11.    //将获取的今日温度赋值
  12.    this.temToday = this.weaList[0].temperature
  13.   }
  14.  
  15.   //获取未来3日的天气数据
  16.   async getLaterData(){
  17.     const data = await axios.get(this.laterUrl)
  18.     //将获取到的数据存入数组中
  19.     this.weaArr = data.data.forecasts[0].casts
  20.   }

 3.编写根据天气情况动态展示图片函数

  1.  //动态判断今日天气情况，根据天气情况动态展示图片
  2.   getWeatherTodayPic(){
  3.     if(this.weatherToday.includes('雨')){
  4.       this.weatherTodayPic = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.xTBpOQF2baaiYA1stR_jDQHaHa?w=175&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7';
  5.     }else if(this.weatherToday.includes('阴')){
  6.       this.weatherTodayPic = 'https://tse2-mm.cn.bing.net/th/id/OIP-C.T4a2oN9ggyuwxQnQBY5c7wHaFi?w=264&h=197&c=7&r=0&o=5&dpr=1.5&pid=1.7';
  7.     }else if(this.weatherToday.includes('晴')){
  8.       this.weatherTodayPic = 'https://tse1-mm.cn.bing.net/th/id/OIP-C.xwmwAj0dteZV-l6hutuGLAHaHa?w=198&h=199&c=7&r=0&o=5&dpr=1.5&pid=1.7'
  9.     }else if(this.weatherToday.includes('多云')){
  10.       this.weatherTodayPic = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.lFiZ9pHlWoMraLRTv4RMSAHaHa?w=169&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'
  11.     }
  12.   }
  13.  
  14.   //动态判断未来3日天气情况，展示未来三日的每一天的图片
  15.   judeWeather(item){
  16.     if(item.dayweather == '晴'){
  17.       return this.fineImg
  18.     }else if(item.dayweather.includes('云')){
  19.       return this.cloudImg
  20.     }else if(item.dayweather.includes('雨')){
  21.       return this.rainImg
  22.     }else if(item.dayweather.includes('阴')){
  23.       return this.yinImg
  24.     }
  25.     return this.fineImg
  26.   }

4.编写判断风向的函数

  1. //根据返回的数据结果，判断风向，根据东南西北，赋值角度，默认北方向
  2.   judeWind(item){
  3.     if(item.daywind == '东'){
  4.       return this.wind = 90
  5.     }else if(item.daywind == '东北'){
  6.       return this.wind = 45
  7.     }else if(item.daywind == '南'){
  8.       return this.wind = 180
  9.     }else if(item.daywind == '东南'){
  10.       return this.wind = 135
  11.     }else if(item.daywind == '西'){
  12.       return this.wind = 270
  13.     }else if(item.daywind == '西南'){
  14.       return this.wind = 225
  15.     }else if(item.daywind == '西北'){
  16.       return this.wind = 315
  17.     }
  18.     return this.wind = 0
  19.   }

总结代码

完整代码如下：

  1. import axios from '@ohos/axios'
  2. @Entry
  3. @Component
  4. struct Index {
  5.  
  6.   //请求今日数据的网络地址
  7.   @State todayUrl:string = 'https://restapi.amap.com/v3/weather/weatherInfo?city=110101&key=ce1f551fc7d7227efd45ee58fd7887e7'
  8.   //请求未来3日数据的网络地址
  9.   @State laterUrl:string = 'https://restapi.amap.com/v3/weather/weatherInfo?city=110101&key=ce1f551fc7d7227efd45ee58fd7887e7&extensions=all'
  10.  
  11.   //数据显示
  12.   @State message:string = ''
  13.   //查询天气的地址
  14.   @State address:string = ''
  15.   //定位图片链接
  16.   @State posiIco:string = 'https://tse3-mm.cn.bing.net/th/id/OIP-C.62J8FA41P_ftriSbFbw-HgHaHa?w=166&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'
  17.  
  18.   //================今日的天气变量=================//
  19.   //接受天气数据的数组
  20.   @State weaList: weatherType[] = []
  21.   //今日天气
  22.   @State weatherToday:string = ''
  23.   //今日天气图片(网络获取)
  24.   @State weatherTodayPic:string = ''
  25.   //今日温度
  26.   @State temToday:string = ''
  27.   //================未来3日的天气变量=================//
  28.   //接受未来3日天气数据的数组
  29.   @State weaArr: weatherTypes[] = []
  30.   //晴天展示的图像
  31.   @State fineImg:string = 'https://tse1-mm.cn.bing.net/th/id/OIP-C.xwmwAj0dteZV-l6hutuGLAHaHa?w=198&h=199&c=7&r=0&o=5&dpr=1.5&pid=1.7'
  32.   //多云展示的图像
  33.   @State cloudImg:string = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.lFiZ9pHlWoMraLRTv4RMSAHaHa?w=169&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'
  34.   //下雨展示的图像
  35.   @State rainImg:string = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.xTBpOQF2baaiYA1stR_jDQHaHa?w=175&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'
  36.   //阴天展示的图像
  37.   @State yinImg:string = 'https://tse2-mm.cn.bing.net/th/id/OIP-C.T4a2oN9ggyuwxQnQBY5c7wHaFi?w=264&h=197&c=7&r=0&o=5&dpr=1.5&pid=1.7'
  38.   //风向图标
  39.   @State windImg:string = 'https://img.ixintu.com/upload/jpg/20210523/79f0359886d38d97112c4b78b9107710_26936_800_800.jpg!con'
  40.   //风向角度
  41.   @State wind:number = 0
  42.  
  43.   aboutToAppear(){
  44.     this.getTodayData()
  45.     this.getLaterData()
  46.   }
  47.  
  48.   //获取今日天气数据
  49.  async getTodayData(){
  50.    const data = await axios.get(this.todayUrl)
  51.    this.weaList = data.data.lives
  52.    //赋值地址，默认北京东城区
  53.    this.address = this.weaList[0].province+'市'+this.weaList[0].city
  54.    //将获取的今日天气情况赋值
  55.    this.weatherToday = this.weaList[0].weather
  56.    //执行函数，判断今日获取的天气情况，动态赋值根据天气情况展示图片
  57.    this.getWeatherTodayPic()
  58.    //将获取的今日温度赋值
  59.    this.temToday = this.weaList[0].temperature
  60.   }
  61.  
  62.   //获取未来3日的天气数据
  63.   async getLaterData(){
  64.     const data = await axios.get(this.laterUrl)
  65.     //将获取到的数据存入数组中
  66.     this.weaArr = data.data.forecasts[0].casts
  67.   }
  68.  
  69.   //动态判断今日天气情况，根据天气情况动态展示图片
  70.   getWeatherTodayPic(){
  71.     if(this.weatherToday.includes('雨')){
  72.       this.weatherTodayPic = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.xTBpOQF2baaiYA1stR_jDQHaHa?w=175&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7';
  73.     }else if(this.weatherToday.includes('阴')){
  74.       this.weatherTodayPic = 'https://tse2-mm.cn.bing.net/th/id/OIP-C.T4a2oN9ggyuwxQnQBY5c7wHaFi?w=264&h=197&c=7&r=0&o=5&dpr=1.5&pid=1.7';
  75.     }else if(this.weatherToday.includes('晴')){
  76.       this.weatherTodayPic = 'https://tse1-mm.cn.bing.net/th/id/OIP-C.xwmwAj0dteZV-l6hutuGLAHaHa?w=198&h=199&c=7&r=0&o=5&dpr=1.5&pid=1.7'
  77.     }else if(this.weatherToday.includes('多云')){
  78.       this.weatherTodayPic = 'https://tse4-mm.cn.bing.net/th/id/OIP-C.lFiZ9pHlWoMraLRTv4RMSAHaHa?w=169&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'
  79.     }
  80.   }
  81.  
  82.   //动态判断未来3日天气情况，展示未来三日的每一天的图片
  83.   judeWeather(item){
  84.     if(item.dayweather == '晴'){
  85.       return this.fineImg
  86.     }else if(item.dayweather.includes('云')){
  87.       return this.cloudImg
  88.     }else if(item.dayweather.includes('雨')){
  89.       return this.rainImg
  90.     }else if(item.dayweather.includes('阴')){
  91.       return this.yinImg
  92.     }
  93.     return this.fineImg
  94.   }
  95.  
  96.   //根据返回的数据结果，判断风向，根据东南西北，赋值角度，默认北方向
  97.   judeWind(item){
  98.     if(item.daywind == '东'){
  99.       return this.wind = 90
  100.     }else if(item.daywind == '东北'){
  101.       return this.wind = 45
  102.     }else if(item.daywind == '南'){
  103.       return this.wind = 180
  104.     }else if(item.daywind == '东南'){
  105.       return this.wind = 135
  106.     }else if(item.daywind == '西'){
  107.       return this.wind = 270
  108.     }else if(item.daywind == '西南'){
  109.       return this.wind = 225
  110.     }else if(item.daywind == '西北'){
  111.       return this.wind = 315
  112.     }
  113.     return this.wind = 0
  114.   }
  115.  
  116.   build() {
  117.     Column({space:20}){
  118.       //头部
  119.       Column({space:20}){
  120.         Text('阿顾天气1.0')
  121.           .fontSize(25).fontWeight(700).width('100%').textAlign(TextAlign.Center)
  122.         Row(){
  123.           Image(this.posiIco)
  124.             .width(50).height(50).objectFit(ImageFit.Contain)
  125.           //展示获取的城市，2.0版本添加点击事件，可以自主选择地区
  126.           Text(this.address)
  127.             .fontSize(30).fontColor(Color.Black)
  128.         }
  129.       }
  130.       .width('100%').layoutWeight(2).justifyContent(FlexAlign.SpaceAround)
  131.      Column(){
  132.        //分割线
  133.        Divider().width('100%')
  134.        //今日天气
  135.        Column(){
  136.          Text('今日天气：')
  137.            .fontSize(20).fontWeight(800).width('100%')
  138.          //空占位组件
  139.          Blank()
  140.          Column({space:10}){
  141.            Text('天气情况：'+this.weatherToday)
  142.              .fontSize(22).fontColor(Color.Brown)
  143.            Image(this.weatherTodayPic)
  144.              .width(80).height(50).objectFit(ImageFit.Contain)
  145.            Text('气温：'+this.temToday+'°C')
  146.              .fontSize(22).fontColor(Color.Brown)
  147.          }.width('70%').border({width:1,color:Color.Pink}).margin({bottom:10})
  148.          .borderRadius(30).backgroundColor("#ffbabac1").padding(10)
  149.        }
  150.        .width('100%').layoutWeight(1).padding(10)
  151.        //分割线
  152.        Divider().width('100%')
  153.        //未来三日天气
  154.        Column(){
  155.          Text('未来三日天气：')
  156.            .fontSize(20).fontWeight(800).width('100%')
  157.           List({space:10}){
  158.             ForEach(this.weaArr,(item:weatherTypes,index:Number)=>{
  159.               //如果index==0,那么根据返回的数据，会渲染今天的天气，所以要排除今日的，渲染未来3日的
  160.               if(index !== 0){
  161.                 ListItem(){
  162.                   Column({space:10}){
  163.                     Text(item.date)
  164.                       .fontSize(17)
  165.                     Text('白天天气：'+item.dayweather)
  166.                       .fontSize(20).fontColor(Color.Brown)
  167.                     Image(this.judeWeather(item))
  168.                       .width(80).height(50).objectFit(ImageFit.Contain)
  169.                     Text('气温：'+((item.daytemp*1.0+item.nighttemp*1.0)/2)+'°C')//取平均值做温度
  170.                     .fontSize(18).fontWeight(800)
  171.                     Row(){
  172.                       Text('风向：')
  173.                         .fontSize(15).fontColor(Color.Brown)
  174.                       Image(this.windImg)
  175.                         .width(50).height(40).objectFit(ImageFit.Contain)
  176.                         // @ts-ignore
  177.                         .rotate(this.judeWind(item))//图标旋转的角度
  178.                     }
  179.                   }.border({width:1,color:Color.Pink}).padding(10).borderRadius(15).backgroundColor("#ffbabac1")
  180.                 }.margin(20)
  181.               }
  182.             })
  183.           }.listDirection(Axis.Horizontal)//将list方向改为横向
  184.        }
  185.        .width('100%').layoutWeight(2).padding(10)
  186.      }
  187.       .width('100%').layoutWeight(8)
  188.       //底部信息区
  189.       Row(){
  190.         Text('信息：天气数据来自于高德天气API@2024.3.21')
  191.           .fontSize(15).fontWeight(500).fontColor("#ffae2e2e").width('100%').textAlign(TextAlign.Center)
  192.       }
  193.       .width('100%').layoutWeight(1)
  194.     }
  195.     .width('100%').height('100%')
  196.     .backgroundImage('https://tse1-mm.cn.bing.net/th/id/OIP-C.DvKV8H07XleMDFfcVdtoMAAAAA?w=197&h=329&c=7&r=0&o=5&dpr=1.5&pid=1.7')
  197.     .backgroundImageSize({width:'100%',height:'100%'})
  198.   }
  199. }
  200.  
  201.  
  202. //==================模拟接口类型，便于数组.出来===================//
  203.  
  204. //今日天气
  205. interface weatherType{
  206.   province: string;
  207.   city: string;
  208.   adcode:string;
  209.   weather: string;
  210.   temperature: string;
  211.   winddirection: string;
  212.   windpower: string;
  213.   humidity: string;
  214.   reporttime: string;
  215.   temperature_float: string;
  216.   humidity_float: string;
  217. }
  218. //未来3日天气
  219. interface weatherTypes{
  220.   date: string;
  221.   week: string;
  222.   dayweather: string;
  223.   nightweather: string;
  224.   daytemp: number;
  225.   nighttemp: number;
  226.   daywind:string;
  227.   nightwind: string;
  228.   daypower: string;
  229.   nightpower: string;
  230.   daytemp_float: string;
  231.   nighttemp_float: string;
  232. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/772513
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号