大家没有进行开发之前首先需要考虑系统的差异性,比如说IOS手机有没有回退键,所以在开发时一定要考虑二级解密需要有回退键,否则ios的手机就会陷入到这个页面回不去。
安卓系统有回退键,针对这个情况需要要求用户在3秒钟之内连续按回退键两次才退出系统,以此防止用户误按回退键,具体代码实现如下:
退出优酷");
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组件实现,效果图片如下:
底部变化:
代码实现如下:
订阅","我的"];
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,lbs,img,bt)
{
sv.set({index: num});
sv.refreshItems();
subChange(num,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",e){
indexChange(0,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3);
});
var pindao = ui("pindao");
pindao.on("touch",e){
indexChange(1,do_button_3);
});
var dingyue = ui("dingyue");
dingyue.on("touch",e){
indexChange(2,do_button_3);
});
var wode = ui("wode");
wode.on("touch",e){
indexChange(3,do_button_3);
});
//滑动主界面实现
底部图片的切换
do_slideview_1.on("indexChanged",e){
subChange(data,action_lbs);
});
[/mw_shl_code]
首页海报之间的切换和页面间切换类似,但海报间切换还实现了自动定时切换的功能,每三秒钟切换一次,时间控制由do_timer来实现,在使用这个组件时,时间段不能是100,否则ios系统将会有不兼容的问题,图片及代码如下所示:
图片:
代码:
点击主界面的左上角的下载按键后,进入下载界面,点击下载后应用将从网上下载另个图片的海报来取代原海报,下载的进度通过进度条来显示,下载功能通过http组件的download方法实现,进度条通过do_progressbar组件实现,其效果图及代码实现如下:
效果:
代码:
右上角有三个按钮点击左数第一个按钮之后将弹出一个查找界面,查找界面的搜索框由textfield组件实现。
点击第二个按钮之后将弹出扫描二维码的界面,该界面实现了扫描二维码的功能,成功之后提示用户扫描成功,二维码由do_BarcodeView组件实现,实现图片和实现代码如下所示:
代码:
获取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",e) {
start();
})
[/mw_shl_code]
点击第三个按钮之后,界面将弹出一个图片,再按一次该按钮后,图片消失,效果如下:
点击首页的任意一张海报就进入到视频播放界面,点击播放按键后将播放视频,此功能由do_VideoView组件实现,效果和代码实现如下:
代码:
点击“戳一下,你喜欢看的都在这里了”按钮,主页面会直接跳到订阅页面。此功能的实现依赖于页面之间的数据交换,利用page组件在index页面的逻辑代码中定义一个event1事件,在shouye页面的逻辑代码中调用page组件的fire函数来触发event1事件。
效果图如下:
逻辑代码如下:
index页面:
页面:
[mw_shl_code=javascript,true]do_Button_0.on("touch",e)
{
page.fire("event1","");
});[/mw_shl_code]
以上所述就是小编给大家介绍的JavaScript使用DeviceOne开发实战(四)仿优酷视频应用,希望大家喜欢。