JavaScript使用DeviceOne开发实战（四）仿优酷视频应用

大家没有进行开发之前首先需要考虑系统的差异性，比如说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）%4movieview.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开发实战（四）仿优酷视频应用，希望大家喜欢。