大家沒(méi)有進(jìn)行開(kāi)發(fā)之前首先需要考慮系統(tǒng)的差異性，比如說(shuō)IOS手機(jī)有沒(méi)有回退鍵，所以在開(kāi)發(fā)時(shí)一定要考慮二級(jí)解密需要有回退鍵，否則ios的手機(jī)就會(huì)陷入到這個(gè)頁(yè)面回不去。
安卓系統(tǒng)有回退鍵，針對(duì)這個(gè)情況需要要求用戶在3秒鐘之內(nèi)連續(xù)按回退鍵兩次才退出系統(tǒng)，以此防止用戶誤按回退鍵，具體代碼實(shí)現(xiàn)如下：
[mw_shl_code=javascript,true]page.on("back", function(){ if (canBack) { global.exit(); } else { nf.toast("再按一次退出優(yōu)酷"); canBack = true; delay3.start(); }});var delay3 = mm("do_Timer");delay3.delay = 3000;delay3.interval = 1000;delay3.on("tick", function(){ this.stop(); canBack = false;});[/mw_shl_code]仿優(yōu)酷視頻實(shí)現(xiàn)了四個(gè)主界面，頁(yè)面之間可以通過(guò)左右滑動(dòng)頁(yè)面來(lái)切換頁(yè)面，也可以通過(guò)點(diǎn)擊底部按鈕實(shí)現(xiàn)頁(yè)面間的切換，并且底部按鈕的顏色也會(huì)隨著頁(yè)面的切換而改變。此功能通過(guò)slideview組件實(shí)現(xiàn)，效果圖片如下：
底部變化：
代碼實(shí)現(xiàn)如下：
[mw_shl_code=javascript,true]function subChange(num,button,imgs,lbs){ var strings = ["下載","頻道","訂閱","我的"]; button.text = strings[num]; var url = [ "source://image/main/shouye", "source://image/main/pindao", "source://image/main/dingyue", "source://image/main/wode" ]; for(var i = 0 ; i < 4 ; i++) { imgs.source = url; lbs.fontColor = "222222FF"; } imgs[num].source += "b"; lbs[num].fontColor = "0080FFFF"; for(var i = 0 ; i < 4 ; i++) { imgs.source += ".png"; } img.visible = false; bt.visible = false;}function indexChange(num,sv,button,imgs,lbs,img,bt){ sv.set({index: num}); sv.refreshItems(); subChange(num,button,imgs,lbs);}do_button.on("touch",function(data, e){ if(do_button.text == "下載") { app.openPage("source://view/download.ui",""); }});//點(diǎn)擊底部按鈕實(shí)現(xiàn)主界面以及底部圖片顏色的切換var action_imgs = [ui("img_0"), ui("img_1"), ui("img_2"), ui("img_3")];var action_lbs = [ui("lb_0"), ui("lb_1"), ui("lb_2"), ui("lb_3"),];do_slideview_1.bindItems(listdata );listdata.addData([ {template : 0}, {template : 1}, {template : 2}, {template : 3}]);do_slideview_1.refreshItems({});var shouye = ui("shouye");shouye.on("touch",function(data, e){ indexChange(0,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3);});var pindao = ui("pindao");pindao.on("touch",function(data, e){ indexChange(1,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3);});var dingyue = ui("dingyue");dingyue.on("touch",function(data, e){ indexChange(2,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3);});var wode = ui("wode");wode.on("touch",function(data, e){ indexChange(3,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3);});//滑動(dòng)主界面實(shí)現(xiàn)底部圖片的切換do_slideview_1.on("indexChanged",function(data, e){ subChange(data,do_button,action_imgs,action_lbs);});[/mw_shl_code]首頁(yè)海報(bào)之間的切換和頁(yè)面間切換類似，但海報(bào)間切換還實(shí)現(xiàn)了自動(dòng)定時(shí)切換的功能，每三秒鐘切換一次，時(shí)間控制由do_timer來(lái)實(shí)現(xiàn)，在使用這個(gè)組件時(shí)，時(shí)間段不能是100，否則ios系統(tǒng)將會(huì)有不兼容的問(wèn)題，圖片及代碼如下所示：
圖片：
代碼：
[mw_shl_code=javascript,true]var ind = 0;timer.delay = 0;timer.interval = 1000;timer.start({});timer.on("tick", function(){ DURATION++; if(DURATION == 3){ ind =(ind+1)%4 movieview.set({index: ind}); movieview.refreshItems(); DURATION = 0; }});[/mw_shl_code]點(diǎn)擊主界面的左上角的下載按鍵后，進(jìn)入下載界面，點(diǎn)擊下載后應(yīng)用將從網(wǎng)上下載另個(gè)圖片的海報(bào)來(lái)取代原海報(bào)，下載的進(jìn)度通過(guò)進(jìn)度條來(lái)顯示，下載功能通過(guò)http組件的download方法實(shí)現(xiàn)，進(jìn)度條通過(guò)do_progressbar組件實(shí)現(xiàn)，其效果圖及代碼實(shí)現(xiàn)如下：
效果：
代碼：
[mw_shl_code=javascript,true]var http = mm("do_Http");http.timeout = 30000;http.contentType = "application/json";http.url = "http://h.hiphotos.baidu.com/baike/c0%3Dbaike60%2C5%2C5%2C60%2C20%3Bt%3Dgif/sign=88e9903f8735e5dd8421ad8d17afcc8a/f9198618367adab48dc66b2e89d4b31c8701e44d.jpg";http.on("success", function(data) { do_imageview_1.source="data://xiazai.png"; do_button_2.text = "下載成功";});http.on("progress", function(data) { do_ProgressBar_0.progress = data.currentSize * 100 / data.totalSize; lb_progress.text = data.currentSize * 100 / data.totalSize + "%";});do_button_2.on("touch",function(data, e){ http.download("data://xiazai.png");});[/mw_shl_code]右上角有三個(gè)按鈕點(diǎn)擊左數(shù)第一個(gè)按鈕之后將彈出一個(gè)查找界面，查找界面的搜索框由textfield組件實(shí)現(xiàn)。
點(diǎn)擊第二個(gè)按鈕之后將彈出掃描二維碼的界面，該界面實(shí)現(xiàn)了掃描二維碼的功能，成功之后提示用戶掃描成功，二維碼由do_BarcodeView組件實(shí)現(xiàn)，實(shí)現(xiàn)圖片和實(shí)現(xiàn)代碼如下所示：
代碼：
[mw_shl_code=javascript,true]var nf = sm("do_Notification");//根據(jù)ID獲取BarcodeView實(shí)例對(duì)象；var barcode = ui("do_BarcodeView_1");start();function start(){ //開(kāi)始啟動(dòng)掃描 barcode.start(function(data, e) { //掃描成功，執(zhí)行回調(diào)函數(shù) var result = JSON.stringify(data); nf.alert("掃描二維碼成功！", "完成") });}var btn = ui("btn_restart");btn.on("touch", function(data, e) { start();})[/mw_shl_code]點(diǎn)擊第三個(gè)按鈕之后，界面將彈出一個(gè)圖片，再按一次該按鈕后，圖片消失，效果如下：
視頻播放功能
點(diǎn)擊首頁(yè)的任意一張海報(bào)就進(jìn)入到視頻播放界面，點(diǎn)擊播放按鍵后將播放視頻，此功能由do_VideoView組件實(shí)現(xiàn)，效果和代碼實(shí)現(xiàn)如下：
代碼：
[mw_shl_code=javascript,true]var page = sm("do_Page");var app = sm("do_App");var do_VideoView_1 = ui("do_VideoView_1");var do_Button_1 = ui("do_Button_1");var do_Button_2 = ui("do_Button_2");var do_Button_3 = ui("do_Button_3");page.on("back", function(){ app.closePage() });ui("action_back").on("touch", function(){ app.closePage() });do_Button_1.on("touch", function(data, e) { if(do_Button_1.text == "播放") { do_VideoView_1.play(0); do_Button_1.text = "暫停"; } else if(do_Button_1.text == "暫停") { do_VideoView_1.pause(); do_Button_1.text = "繼續(xù)"; } else if(do_Button_1.text == "繼續(xù)") { do_VideoView_1.resume(); do_Button_1.text = "暫停"; }});do_Button_2.on("touch", function(data, e) { do_Button_1.text = "播放"; do_VideoView_1.stop();});[/mw_shl_code]點(diǎn)擊“戳一下，你喜歡看的都在這里了”按鈕，主頁(yè)面會(huì)直接跳到訂閱頁(yè)面。此功能的實(shí)現(xiàn)依賴于頁(yè)面之間的數(shù)據(jù)交換，利用page組件在index頁(yè)面的邏輯代碼中定義一個(gè)event1事件，在shouye頁(yè)面的邏輯代碼中調(diào)用page組件的fire函數(shù)來(lái)觸發(fā)event1事件。
效果圖如下：
邏輯代碼如下：
index頁(yè)面：
[mw_shl_code=javascript,true]page.on("event1", function(data, e) { indexChange(2,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3);});[/mw_shl_code]shouye頁(yè)面：[mw_shl_code=javascript,true]do_Button_0.on("touch",function(data, e){ page.fire("event1","");});[/mw_shl_code]以上所述就是小編給大家介紹的JavaScript使用DeviceOne開(kāi)發(fā)實(shí)戰(zhàn)（四）仿優(yōu)酷視頻應(yīng)用，希望大家喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
