#创作者激励##深入浅出学习eTs#(二十二)天气语音预报 原创 精华

程皖Orz
发布于 2023-3-26 22:31
浏览
2收藏

【本文正在参加2023年第一期优质创作者激励计划】

本项目Gitee仓地址:深入浅出eTs学习: 带大家深入浅出学习eTs (gitee.com)

一、需求分析

#创作者激励##深入浅出学习eTs#(二十二)天气语音预报-鸿蒙开发者社区

本章节我们基于上节课的内容(HTTP协议),在上节课的基础上进行延伸,方便我们去理解协议,以及引入在线语音播报的功能实现以下功能:

  • 文字输入城市
  • 获取城市的天气状况
  • 语音播放天气情况
  • 图标更换

二、控件介绍

(1)Video

用于播放视频文件并控制其播放状态的组件。

说明:

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

权限列表

使用网络视频时,需要申请权限ohos.permission.INTERNET。具体申请方式请参考权限申请声明

子组件

接口

Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})

参数:

参数名 参数类型 必填 参数描述
src string | Resource 视频播放源的路径,支持本地视频路径和网络路径。 支持在resources下面的video或rawfile文件夹里放置媒体资源。 支持dataability://的路径前缀,用于访问通过Data Ability提供的视频路径,具体路径信息详见DataAbility说明说明: 视频支持的格式是:mp4、mkv、webm、TS。
currentProgressRate number | string | PlaybackSpeed8+ 视频播放倍速。 说明: number取值仅支持:0.75,1.0,1.25,1.75,2.0。 默认值:1.0 | PlaybackSpeed.Speed_Forward_1_00_X
previewUri string | PixelMap8+ | Resource 视频未播放时的预览图片路径。
controller VideoController 设置视频控制器。

三、协议介绍

(1)天气API

#创作者激励##深入浅出学习eTs#(二十二)天气语音预报-鸿蒙开发者社区

和上一期一样,本系统依然是使用HTTP来实现的,这里使用了天气API来实现,通过输入地区即可获得很多天气数据

1.数据分析

#创作者激励##深入浅出学习eTs#(二十二)天气语音预报-鸿蒙开发者社区

未处理的数据如上,经过json分析后得到下图

#创作者激励##深入浅出学习eTs#(二十二)天气语音预报-鸿蒙开发者社区

在这个基础上使用上节课的内容对文本进行拆分,比如我们要获得当前温度

  • ​ “tem”: “6”,

其数据是这样的,我们观察前面和后面"tem":“6”,“tem1”:“13”,使用掐头去尾法可以得到当前温度6℃

2.数据概括

本次不打算全部显示,这里挑选几个进行展示

  • 当前温度
  • 当前天气
  • 当日温度区间
  • 温馨小提示

(2)语音转文字API

这里选择使用搜狗的语音转文字API,url如下

四、UI设计

(1)天气图标

#创作者激励##深入浅出学习eTs#(二十二)天气语音预报-鸿蒙开发者社区
寻找资源如上,但本次内容只选择云、雨、晴三个经典天气来分析,将三个图标放入目录下

#创作者激励##深入浅出学习eTs#(二十二)天气语音预报-鸿蒙开发者社区

使用image控件进行生成

#创作者激励##深入浅出学习eTs#(二十二)天气语音预报-鸿蒙开发者社区

Image(this.IMAGE_URL)
          .width(200)
          .height(200)
          .objectFit(ImageFit.Fill)

(2)输入框

同上期内容

#创作者激励##深入浅出学习eTs#(二十二)天气语音预报-鸿蒙开发者社区

        TextInput({ placeholder: '请输入要查询的城市', controller: this.controller })
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 25, weight: 400 })
          .caretColor(Color.Blue)
          .width('90%')
          .height(80)
          .margin(20)
          .fontSize(25)
          .fontColor(Color.Black)
          .onChange((value: string) => {
            this.IN_Value = value
            console.log(JSON.stringify(this.IN_Value));
          })

(3)按钮和显示框

 Button('查  询')
          .width('60%')
          .height(60)
          .fontSize(30)
          .onClick(() => {
     
 		 });
Blank()
          .height(20)
        Text(this.Out_Value)
          .fontSize(25)
          .width('80%')
          .height(300)
          .textAlign(TextAlign.Center)
          .border({ width: 1 })

(4)Vedio设计

在这里我们选择取巧的方式,使用vedio播放网络视频,只需要隐藏控制按钮,同时将控件的宽度和高度设置为1即可

音频试听:https://tts.youdao.com/fanyivoice?word=一键三连&le=zh&keyfrom=speaker-target

大家复制上面的url放进浏览器里面可用听到

Video({
          src: this.videoSrc,
          controller: this.v_controller,
        })
          .controls(false)
          .onStart(() => {
            console.info('onStart')
          })
          .width(1)
          .height(1)

五、代码设计

(1)HTTPS获得数据部分

我这里将我注册的API放上来了,key部分隐藏了,不能直接使用,大家去天气API那里申请个帐号就行,免费使用2000次

          httpRequest.request(
              // 填写http请求的url地址,可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
              "https://v0.yiketianqi.com/api?appid=56959347&appsecret=*******&version=v61&unescape=1&city=" + this.IN_Value,
              {
                method: http.RequestMethod.GET, // 可选,默认为http.RequestMethod.GET
                connectTimeout: 60000, // 可选,默认为60s
                readTimeout: 60000, // 可选,默认为60s
              }, (err, data) => {
              if (!err) {
                // data.result为http响应内容,可根据业务需要进行解析

                var Get_Return = data.result.toString()
                console.log(JSON.stringify(Get_Return));

(2)数据拆分

该部分将返回的内容进行拆分为五个单元

//天气 当前温度 温度区间 空气质量
let Get_TQ = ''
let Get_dq = ''
let Get_wdg = ''
let Get_wdd = ''
let Get_KQZ = ''
                var Begin_Num =  Get_Return.indexOf('"wea":"')
                var Last_Num = Get_Return.lastIndexOf('","wea_img"')
                var Get_TQ = Get_Return.substring(Begin_Num+7,Last_Num)

                var Begin_Num =  Get_Return.indexOf('"tem":"')
                var Last_Num = Get_Return.lastIndexOf('","tem1"')
                var Get_dq = Get_Return.substring(Begin_Num+7,Last_Num)


                var Begin_Num =  Get_Return.indexOf('"tem1":"')
                var Last_Num = Get_Return.lastIndexOf('","tem2"')
                var Get_wdg = Get_Return.substring(Begin_Num+8,Last_Num)

                var Begin_Num =  Get_Return.indexOf('"tem2":"')
                var Last_Num = Get_Return.lastIndexOf('","win"')
                var Get_wdd = Get_Return.substring(Begin_Num+8,Last_Num)

                var Begin_Num =  Get_Return.indexOf('","air_tips":"')
                var Last_Num = Get_Return.lastIndexOf('","alarm":')
                var Get_KQZ = Get_Return.substring(Begin_Num+14,Last_Num)

                console.log(JSON.stringify(Get_TQ));
                console.log(JSON.stringify(Get_dq));
                console.log(JSON.stringify(Get_wdg));
                console.log(JSON.stringify(Get_wdd));
                console.log(JSON.stringify(Get_KQZ));
             this.Out_Value = '城市:' + this.IN_Value + '\r\n' + '天气:' + Get_TQ +'\r\n'+ '温度:' + Get_dq +'℃  '+Get_wdd+'-'+Get_wdg+'\r\n' + '温馨提示:'+Get_KQZ

(3)音频播放部分

//            this.videoSrc = 'http://tts.youdao.com/fanyivoice?word=****&le=zh&keyfrom=speaker-target'
//            this.v_controller.start()

将****部分替换成想播报的内容就行

六、演示

注意:音频部分我尝试了模拟器和远程真机都不行,声音没法传递过来,但是实际效果是有的,这个我之前做过真机

这里选择使用上海和安阳进行演示(任意城市都可以)

#创作者激励##深入浅出学习eTs#(二十二)天气语音预报-鸿蒙开发者社区

#创作者激励##深入浅出学习eTs#(二十二)天气语音预报-鸿蒙开发者社区#创作者激励##深入浅出学习eTs#(二十二)天气语音预报-鸿蒙开发者社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
2
收藏 2
回复
举报
5条回复
按时间正序
/
按时间倒序
?镜
?镜

那个image,天气图标怎么实现动态切换?

回复
2023-3-27 09:12:23
程皖Orz
程皖Orz 回复了 ?镜
那个image,天气图标怎么实现动态切换?

这部分我没写,在数据处理那里,检测天气的部分出现的中文字,有云/雨/晴就切换路径,关于图片的动态切换,你可以看我之前的,里面有,也是通过变量实现的

回复
2023-3-27 10:16:27
?镜
?镜 回复了 程皖Orz
这部分我没写,在数据处理那里,检测天气的部分出现的中文字,有云/雨/晴就切换路径,关于图片的动态切换,你可以看我之前的,里面有,也是通过变量实现的

OK,解决了

回复
2023-3-27 10:20:07
hmyxd
hmyxd

常出差的人会经常用到的APP


回复
2023-3-27 10:44:12
程皖Orz
程皖Orz 回复了 ?镜
OK,解决了

厉害 这么快就复现了

回复
2023-3-27 14:33:14
回复
    相关推荐