开发之前需要考虑系统的差异性,比如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开发实战(四)仿优酷视频应用的更多相关文章

  1. JavaScript使用DeviceOne开发实战(三)仿微信应用

    这是一个系列的文档,长期目标是利用DeviceOne开发一些目前使用广泛的优质手机应用,我们会最大化的实现这些应用的每一个功能和细节,不只停留在简单的UI模仿和Demo阶段,而是一个基本可以使用的实际 ...

  2. JavaScript使用DeviceOne开发实战(一) 配置和起步

    2015 年 9 月 底,DeviceOne Release发布.至此,DeviceOne 基本完成了对多端的支持.基于 DeviceOne 可以: HTML5.Android.iOS.Windows ...

  3. JavaScript使用DeviceOne开发实战(五)仿ZAKER应用

    关于index底下切换的的组件,可以用ViewShower实现,详见: do_ViewShower http://bbs.deviceone.net/forum.php?mod=viewthread& ...

  4. JavaScript使用DeviceOne开发实战(二) 生成调试安装包

    生成调试安装包 首先需要说明的是,这个步骤并不是每次调试App都必须的,大部分情况生成一次调试安装包,安装到手机上之后就可以忽略整个这个步骤.因为调试安装包包含了很多原生组件,都是可以定制勾选的,如果 ...

  5. JavaScript使用DeviceOne开发实战(六)点墨真实案例

    qq群里的yan用户开发的App,基本完工大家可以看看 安装二维码是 QQ群:365443130

  6. 仿优酷Android客户端图片左右滑动(自动滑动)

    最终效果: 页面布局main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayou ...

  7. 高仿优酷Android客户端图片左右滑动(自动切换)

    本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现: 具体思路: 1. 工程中需要添加android-support-v4.jar,才能 ...

  8. ViewPager实现滑屏切换页面及动画效果(仿优酷客户端)

     找了许多实现该功能的例子,但效果都不很理想,于是自己结合网上的资源及自己的总结,整理了一下,发出来,供大家参考.这个是自己做的,仿优酷客户端的. 先看效果: ****************** ...

  9. 使用Vitamio打造自己的Android万能播放器(5)——在线播放(播放优酷视频)

    前言 为了保证每周一篇的进度,又由于Vitamio新版本没有发布, 决定推迟本地播放的一些功能(截图.视频时间.尺寸等),跳过直接写在线播放部分的章节.从Vitamio的介绍可以看得出,其支持http ...

随机推荐

  1. Dump中查看dictionary信息的方法

    In order to dump the contents of a dictionary, you need to start with either the MethodTable or the ...

  2. js封装的方法

    1.JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦.通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置. 2.JS封装的方法有函数方式.对象的方式.闭包的方式. 举 ...

  3. Maven中Spring-Data-Redis存储对象(redisTemplate)

    Redis是一种nosql数据库,在开发中常用做缓存.Jedis是Redis在java中的redis- client.在此之前,希望已经了解redis的基本使用和Maven的使用.建立Maven Pr ...

  4. 未能加载文件或程序集&quot;System.Data,Version=2.0.0.0,Culture=neutral,PublicKeyToken=b77a5c561934e089&quot;或它的某一个依赖项。系统找不到指定的文件。

    sqlserver 2005打开出现无法正常访问数据,提示信息: 未能加载文件或程序集"System.Data,Version=2.0.0.0,Culture=neutral,PublicK ...

  5. 【转载】Linux小白最佳实践:《超容易的Linux系统管理入门书》(连载六)Linux的网络配置

    本篇是Linux小白最佳实践第6篇,目的就是让白菜们了解Linux网络是如何配置的.Linux系统在服务器市场占有很大的份额,尤其在互连网时代,要使用计算机就离不开网络. 想每天能听到小妞的语音播报, ...

  6. COJ 0578 4019二分图判定

    4019二分图判定 难度级别: B: 编程语言:不限:运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 给定一个具有n个顶点(顶点编号为0,1,… ...

  7. PHPCMSV9上线方法及文件权限设置

    上线步骤: a.替换代码和数据库文件内的域名b.修改cache/configs/database.php中的数据库密码c.修改cache/configs/system.php文件中的网站路径变量 'w ...

  8. 【Luogu1919】 A*B Problem升级版(FFT)

    题面戳我 题解 把每个数都直接看做一个多项式,每一位就是一项 现在求用FFT求出卷积 然后考虑一下进位就可以啦 #include<iostream> #include<cstdio& ...

  9. Linux 虚存 linux2.6内核特性

    一.大型页面的支持 当代计算机体系结构大都支持多种页面大小,例如,IA-32体系结构支持4KB或4MB的页面, Linux操作系统只是将大型页面用于映射实际的内核映像.大型页面的使用主要是为了改进高性 ...

  10. Must practice programming questions in all languages

    To master any programming languages, you need to definitely solve/practice the below-listed problems ...