鸿蒙上实现天气语音预报

　　本文我们将在鸿蒙上引入在线语音播报功能。
　　需求分析
　　本章节我们基于上节课的内容（HTTP 协议），在上节课的基础上进行延伸，方便我们去理解协议，以及引入在线语音播报的功能。
　　需求分析如下： 文字输入城市 获取城市的天气状况 语音播放天气情况 图标更换
　　控件介绍 ①Video
　　用于播放视频文件并控制其播放状态的组件。
　　说明：该组件从 API Version 7 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
　　权限列表：使用网络视频时，需要申请权限 ohos.permission.INTERNET。
　　具体申请方式请参考权限申请声明： https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/security/accesstoken-guidelines.md/②子组件接口如下：Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})
　　参数如下：
　　协议介绍 ①天气 API
　　和上一期一样，本系统依然是使用 HTTP 来实现的，这里使用了天气 API 来实现，通过输入地区即可获得很多天气数据。 数据分析如下：
　　未处理的数据如上，经过 json 分析后得到下图：
　　在这个基础上使用上节课的内容对文本进行拆分，比如我们要获得当前温度。 ＂tem＂: ＂6＂,
　　其数据是这样的，我们观察前面和后面＂tem＂:＂6＂,＂tem1＂:＂13＂，使用掐头去尾法可以得到当前温度 6℃。 ②数据概括
　　本次不打算全部显示，这里挑选几个进行展示： 当前温度 当前天气 当日温度区间 温馨小提示 ③语音转文字 API
　　这里选择使用搜狗的语音转文字 API，url 如下： https://fanyi.sogou.com/reventondc/synthesis?text=一键三连&speed=1&lang=zh-CHS&from=translateweb&speaker=6
　　text 要转换的文本；speed 语速 1~？（我测试到 15 都还可以） 越大，语速越慢；lan 语言类型 lan=en 英文 lan = zh-CHS 中文；from 哪种方式请求的；speaker 语音类型 1-6 的数字。
　　UI 设计
　　①天气图标 ​
　　寻找资源如上，但本次内容只选择云、雨、晴三个经典天气来分析，将三个图标放入目录下。
　　使用 image 控件进行生成： Image(this.IMAGE_URL)           .width(200)           .height(200)           .objectFit(ImageFit.Fill)
　　②输入框​
　　同上期内容： 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));           })
　　③按钮和显示框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 })
　　④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)
　　代码设计 ①HTTPS 获得数据部分
　　我这里将我注册的 API 放上来了，key 部分隐藏了，不能直接使用，大家去天气 API 那里申请个帐号就行，免费使用 2000 次。 httpRequest.request(               // 填写http请求的url地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定               ＂https://v0.yiketianqi.com/api?appid=56959347&appsecret=*******&versinotallow=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));②数据拆分
　　该部分将返回的内容进行拆分为五个单元： //天气 当前温度 温度区间 空气质量 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 ＂ + ＂天气:＂ + Get_TQ +＂r ＂+ ＂温度:＂ + Get_dq +＂℃  ＂+Get_wdd+＂-＂+Get_wdg+＂r ＂ + ＂温馨提示:＂+Get_KQZ③音频播放部分​//            this.videoSrc = ＂http://tts.youdao.com/fanyivoice?word=****&le=zh&keyfrom=speaker-target＂ //            this.v_controller.start()
　　将****部分替换成想播报的内容就行。
　　演示效果 注意：音频部分我尝试了模拟器和远程真机都不行，声音没法传递过来，但是实际效果是有的，这个我之前做过真机。
　　这里选择使用上海和安阳进行演示（任意城市都可以）：