??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：??
??51CTO 開源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??
一、需求分析
本章節(jié)我們基于上節(jié)課的內(nèi)容（HTTP協(xié)議），在上節(jié)課的基礎(chǔ)上進(jìn)行延伸，方便我們?nèi)ダ斫鈪f(xié)議，以及引入在線語音播報(bào)的功能實(shí)現(xiàn)以下功能：
- 文字輸入城市
- 獲取城市的天氣狀況
- 語音播放天氣情況
- 圖標(biāo)更換
二、控件介紹
（1）Video
用于播放視頻文件并控制其播放狀態(tài)的組件。
說明：
該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
權(quán)限列表
使用網(wǎng)絡(luò)視頻時(shí)，需要申請(qǐng)權(quán)限ohos.permission.INTERNET。具體申請(qǐng)方式請(qǐng)參考權(quán)限申請(qǐng)聲明。
子組件
接口
Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})參數(shù)：
參數(shù)名 | 參數(shù)類型 | 必填 | 參數(shù)描述 |
src | string | Resource | 否 | 視頻播放源的路徑，支持本地視頻路徑和網(wǎng)絡(luò)路徑。 支持在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。 默認(rèn)值：1.0 | PlaybackSpeed.Speed_Forward_1_00_X |
previewUri | string | PixelMap8+ | Resource | 否 | 視頻未播放時(shí)的預(yù)覽圖片路徑。 |
controller | VideoController | 否 | 設(shè)置視頻控制器。 |
三、協(xié)議介紹
（1）天氣API
和上一期一樣，本系統(tǒng)依然是使用HTTP來實(shí)現(xiàn)的，這里使用了天氣API來實(shí)現(xiàn)，通過輸入地區(qū)即可獲得很多天氣數(shù)據(jù)。
1、數(shù)據(jù)分析
未處理的數(shù)據(jù)如上，經(jīng)過json分析后得到下圖。
在這個(gè)基礎(chǔ)上使用上節(jié)課的內(nèi)容對(duì)文本進(jìn)行拆分，比如我們要獲得當(dāng)前溫度。
其數(shù)據(jù)是這樣的，我們觀察前面和后面"tem":“6”,“tem1”:“13”，使用掐頭去尾法可以得到當(dāng)前溫度6℃。
2、數(shù)據(jù)概括
本次不打算全部顯示，這里挑選幾個(gè)進(jìn)行展示。
- 當(dāng)前溫度
- 當(dāng)前天氣
- 當(dāng)日溫度區(qū)間
- 溫馨小提示
（2）語音轉(zhuǎn)文字API
這里選擇使用搜狗的語音轉(zhuǎn)文字API，url如下：
- https://fanyi.sogou.com/reventondc/synthesis?text=一鍵三連&speed=1&lang=zh-CHS&from=translateweb&speaker=6。
- text 要轉(zhuǎn)換的文本。
- speed 語速 1~？（我測試到15都還可以） 越大，語速越慢。
- lan 語言類型 lan=en 英文 lan = zh-CHS 中文。
- from 哪種方式請(qǐng)求的。
- speaker 語音類型 1-6的數(shù)字。
四、UI設(shè)計(jì)
（1）天氣圖標(biāo)
尋找資源如上，但本次內(nèi)容只選擇云、雨、晴三個(gè)經(jīng)典天氣來分析，將三個(gè)圖標(biāo)放入目錄下：
使用image控件進(jìn)行生成。
Image(this.IMAGE_URL)
.width(200)
.height(200)
.objectFit(ImageFit.Fill)
（2）輸入框
同上期內(nèi)容。
TextInput({ placeholder: '請(qǐng)輸入要查詢的城市', 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設(shè)計(jì)
在這里我們選擇取巧的方式，使用vedio播放網(wǎng)絡(luò)視頻，只需要隱藏控制按鈕，同時(shí)將控件的寬度和高度設(shè)置為1即可。
音頻試聽：https://tts.youdao.com/fanyivoice?word=一鍵三連&le=zh&keyfrom=speaker-target。
大家復(fù)制上面的url放進(jìn)瀏覽器里面可用聽到。
Video({
src: this.videoSrc,
controller: this.v_controller,
})
.controls(false)
.onStart(() => {
console.info('onStart')
})
.width(1)
.height(1)五、代碼設(shè)計(jì)
（1）HTTPS獲得數(shù)據(jù)部分
我這里將我注冊的API放上來了，key部分隱藏了，不能直接使用，大家去天氣API那里申請(qǐng)個(gè)帳號(hào)就行，免費(fèi)使用2000次。
httpRequest.request(
// 填寫http請(qǐng)求的url地址，可以帶參數(shù)也可以不帶參數(shù)。URL地址需要開發(fā)者自定義。請(qǐng)求的參數(shù)可以在extraData中指定
"https://v0.yiketianqi.com/api?appid=56959347&appsecret=*******&versinotallow=v61&unescape=1&city=" + this.IN_Value,
{
method: http.RequestMethod.GET, // 可選，默認(rèn)為http.RequestMethod.GET
connectTimeout: 60000, // 可選，默認(rèn)為60s
readTimeout: 60000, // 可選，默認(rèn)為60s
}, (err, data) => {
if (!err) {
// data.result為http響應(yīng)內(nèi)容，可根據(jù)業(yè)務(wù)需要進(jìn)行解析
var Get_Return = data.result.toString()
console.log(JSON.stringify(Get_Return));
（2）數(shù)據(jù)拆分
該部分將返回的內(nèi)容進(jìn)行拆分為五個(gè)單元。
//天氣 當(dāng)前溫度 溫度區(qū)間 空氣質(zhì)量
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()
將****部分替換成想播報(bào)的內(nèi)容就行。
六、演示
注意：音頻部分我嘗試了模擬器和遠(yuǎn)程真機(jī)都不行，聲音沒法傳遞過來，但是實(shí)際效果是有的，這個(gè)我之前做過真機(jī)。
這里選擇使用上海和安陽進(jìn)行演示（任意城市都可以）。
??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：??
??51CTO 開源基礎(chǔ)軟件社區(qū)??
??https://ost.51cto.com??
