大家没有进行开发之前首先需要考虑系统的差异性，比如说ios手机有没有回退键，所以在开发时一定要考虑二级解密需要有回退键，否则ios的手机就会陷入到这个页面回不去。
安卓系统有回退键，针对这个情况需要要求用户在3秒钟之内连续按回退键两次才退出系统，以此防止用户误按回退键，具体代码实现如下：
[mw_shl_code=javascript,true]page.on(back, function(){ if (canback) { global.exit(); } else { nf.toast(再按一次退出优酷); 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]
仿优酷视频实现了四个主界面，页面之间可以通过左右滑动页面来切换页面，也可以通过点击底部按钮实现页面间的切换，并且底部按钮的颜色也会随着页面的切换而改变。此功能通过slideview组件实现，效果图片如下：
底部变化：
代码实现如下：
[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,); }});//点击底部按钮实现主界面以及底部图片颜色的切换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);});//滑动主界面实现底部图片的切换do_slideview_1.on(indexchanged,function(data, e){ subchange(data,do_button,action_imgs,action_lbs);});[/mw_shl_code]
首页海报之间的切换和页面间切换类似，但海报间切换还实现了自动定时切换的功能，每三秒钟切换一次，时间控制由do_timer来实现，在使用这个组件时，时间段不能是100，否则ios系统将会有不兼容的问题，图片及代码如下所示：
图片：
代码：
[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]
点击主界面的左上角的下载按键后，进入下载界面，点击下载后应用将从网上下载另个图片的海报来取代原海报，下载的进度通过进度条来显示，下载功能通过http组件的download方法实现，进度条通过do_progressbar组件实现，其效果图及代码实现如下：
效果：
代码：
[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]
右上角有三个按钮点击左数第一个按钮之后将弹出一个查找界面，查找界面的搜索框由textfield组件实现。
点击第二个按钮之后将弹出扫描二维码的界面，该界面实现了扫描二维码的功能，成功之后提示用户扫描成功，二维码由do_barcodeview组件实现，实现图片和实现代码如下所示：
代码：
[mw_shl_code=javascript,true]var nf = sm(do_notification);//根据id获取barcodeview实例对象；var barcode = ui(do_barcodeview_1);start();function start(){ //开始启动扫描 barcode.start(function(data, e) { //扫描成功，执行回调函数 var result = json.stringify(data); nf.alert(扫描二维码成功！, 完成) });}var btn = ui(btn_restart);btn.on(touch, function(data, e) { start();})[/mw_shl_code]
点击第三个按钮之后，界面将弹出一个图片，再按一次该按钮后，图片消失，效果如下：
视频播放功能
点击首页的任意一张海报就进入到视频播放界面，点击播放按键后将播放视频，此功能由do_videoview组件实现，效果和代码实现如下：
代码：
[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 = 继续; } else if(do_button_1.text == 继续) { 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]
点击“戳一下，你喜欢看的都在这里了”按钮，主页面会直接跳到订阅页面。此功能的实现依赖于页面之间的数据交换，利用page组件在index页面的逻辑代码中定义一个event1事件，在shouye页面的逻辑代码中调用page组件的fire函数来触发event1事件。
效果图如下：
逻辑代码如下：
index页面：
[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页面：[mw_shl_code=javascript,true]do_button_0.on(touch,function(data, e){ page.fire(event1,);});[/mw_shl_code]
以上所述就是小编给大家介绍的javascript使用deviceone开发实战（四）仿优酷视频应用，希望大家喜欢。