JavaScript使用设备一开发实战（四)仿优酷视频应用

大家没有进行开发之前首先需要考虑系统的差异性，比如说IOS手机有没有回退键，所以在开发时一定要考虑二级解密需要有回退键，否则ios的手机就会陷入到这个页面回不去。

安卓系统有回退键，针对这个情况需要要求用户在3秒钟之内连续按回退键两次才退出系统，以此防止用户误按回退键，具体代码实现如下：

[mw_shl_code=javascript，true]page.on('back '，function(){ if(canBack){ global。exit()；} else { nf.toast('再按一次退出优酷');canBack=truedelay 3。start()；}});var延迟3=mm(' do _ Timer ')；延迟3分钟。延迟=3000；delay 3 . interval=1000 delay 3 . on(' tick '，function(){ this。stop()；canBack=false })；[/mw_shl_code]仿优酷视频实现了四个主界面，页面之间可以通过左右滑动页面来切换页面，也可以通过点击底部按钮实现页面间的切换，并且底部按钮的颜色也会随着页面的切换而改变。此功能通过幻灯片视图组件实现，效果图片如下：

底部变化：

代码实现如下：

[mw_shl_code=javascript，true]函数子范围(数字、按钮、imgs、lbs){ var strings=['下载','频道','订阅','我的'];按钮。text=strings[num]；var URL=[' source ://image/main/shoye '，' source://image/main/pindao '，' source ://image/main/丁岳，'来源：//image/main/沃德'];for(var I=0；i4；I){ imgs。来源=网址；磅。font color=' 222222 ff} imgs[num].来源=' b磅数font color=' 0080 ffffFOr(var I=0；i4；i ) { imgs.source=' .png '；} img . visible=false Bt . visible=false }函数indexChange(num，sv，button，imgs，lbs，img，Bt){ SV。set({ index : num })；SV。refresh items()；子范围（数量、按钮、imgs、磅);}do_button.on('touch '，function(data，e){ if(do_button.text=='下载){ app。Openpage('来源：//查看/下载。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 _ slide view _ 1。BindItems(列表数据)；列表数据。adddata([{ template : 0 }、{template : 1}、{template : 2}、{ template : 3 }])；do _ slide view _ 1。刷新项目({ })；定义变量寿野=ui('寿野');shoye。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)；});定义变量丁岳=ui('丁岳');dingyue.on('touch '，function(data，e){ indexChange(2，do_slideview_1，do_button，action_imgs，action_lbs，imageview，do _ button _ 3)；});定义变量沃德=ui('沃德');wode.on('touch '，function(data，e){ indexChange(3，do_slideview_1，do_button，action_imgs，action_lbs，imageview，do _ button _ 3)；});//滑动主界面实现底部图片的切换do _ slide view _ 1。on('索引已更改'，函数(数据，e){ subChange(数据，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=1000timer . start({ })；timer.on('tick '，function(){ DURATION；if(DURATION==3){ ind=(ind 1)% 4 movie view . set({ index : ind })；movie view . RefreshItems()；DURATION=0；}});[/mw_shl_code]点击主界面左上角的下载按钮，进入下载界面。点击下载后，应用程序将从互联网上下载另一张图片海报来替换原始海报。进度条显示下载进度。下载功能通过http组件的下载方式实现，进度条通过do_progressbar组件实现。效果图和代码如下：

效果：

代码：

[mw_shl_code=javascript，true]var Http=mm(' do _ Http ')；http.timeout=30000http . ContentType=' application/JSON '；http . URL=' http://h . hip photos . Baidu.com/baike/c0=baike 60，5，5，60，20；t=gif/sign=88e 9903 f 8735 e5d 8421 ad 8d 17 afcc 8a/f 9198618367 adab 48 DC 66 B2 e 89d 4b 31 c 8701 e 44d . jpg '；http.on('success '，function(data){ do _ imageview _ 1 . source=' data ://xiazai . png '；Do_button_2.text='下载成功'；});http.on('progress '，function(data){ do _ progress bar _ 0 . progress=data . current size * 100/data . total size；lb _ progress . text=data . current size * 100/data . total size“%”；});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()；函数start(){ //开始扫描条形码。start(函数(数据，e){//扫描成功，执行回调函数var result=JSON.stringify(数据)；Nf.alert('扫描二维码成功！'，' complete ')})；} var BTN=ui(' BTN _ restart ')；btn.on('touch '，函数(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 _ video view _ 1=ui(' do _ video view _ 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=' play '){ do _ video view _ 1 . play(0)；Do _ Button _ 1.text=' pause} else if(do _ Button _ 1 . text==' pause '){ do _ video view _ 1 . pause()；Do _ Button _ 1.text=' continue} else if(do _ Button _ 1 . text==' continue '){ do _ video view _ 1 . resume()；Do _ Button _ 1.text=' pause}});Do _ button _ 2。on ('touch '，功能(数据，e) {do _ button _ 1。text=' playdo _ video view _ 1 . stop()；});[/mw_shl_code]点击按钮“Poke，你喜欢看的都在这里”，主页面会直接跳转到订阅页面。这个功能的实现依赖于页面之间的数据交换。页面组件用于在索引页面的逻辑代码中定义一个event1事件，在首野页面的逻辑代码中调用页面组件的fire函数触发event1事件。

效果图如下：

逻辑代码如下：

索引页：

[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]寿野页面：[mw_shl_code=javascript，true]do_Button_0.on('touch '，function(data，e){ page.fire('event1 '，' ')；});[/mw_shl_code]以上所述就是小编给大家介绍的Java脚本语言使用设备一开发实战（四)仿优酷视频应用，希望大家喜欢。