JavaScript使用DeviceOne开发实战(四)仿优酷视频应用


Posted in Javascript onDecember 02, 2015

大家没有进行开发之前首先需要考虑系统的差异性,比如说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组件实现,效果图片如下:

 JavaScript使用DeviceOne开发实战(四)仿优酷视频应用

底部变化:

代码实现如下:

[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系统将会有不兼容的问题,图片及代码如下所示:

图片:

JavaScript使用DeviceOne开发实战(四)仿优酷视频应用

代码:

[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组件实现,其效果图及代码实现如下:

效果:

JavaScript使用DeviceOne开发实战(四)仿优酷视频应用

代码:

[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组件实现,实现图片和实现代码如下所示:

JavaScript使用DeviceOne开发实战(四)仿优酷视频应用

代码:

[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]

点击第三个按钮之后,界面将弹出一个图片,再按一次该按钮后,图片消失,效果如下:

JavaScript使用DeviceOne开发实战(四)仿优酷视频应用

视频播放功能

点击首页的任意一张海报就进入到视频播放界面,点击播放按键后将播放视频,此功能由do_VideoView组件实现,效果和代码实现如下:

JavaScript使用DeviceOne开发实战(四)仿优酷视频应用

代码:

[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事件。

效果图如下:

JavaScript使用DeviceOne开发实战(四)仿优酷视频应用

逻辑代码如下:

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开发实战(四)仿优酷视频应用,希望大家喜欢。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
jQuery插件 tabBox实现代码
Feb 09 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
关于JavaScript轮播图的实现
Nov 20 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 #Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 #Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 #Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 #Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 #Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 #Javascript
jquery实现简单文字提示效果
Dec 02 #Javascript
You might like
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python 处理图片像素点的实例
2019/01/08 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
公司综合部的成员自我评价分享
2013/11/05 职场文书
学生会招新策划书
2014/02/14 职场文书
党支部换届选举方案
2014/05/08 职场文书
微笑服务标语
2014/06/24 职场文书
大专学生求职信
2014/07/04 职场文书
音乐幼师求职信
2014/07/09 职场文书
民事授权委托书范文
2014/08/02 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
演讲开场白和结束语
2015/05/29 职场文书
企业法律事务工作总结
2015/08/11 职场文书
服务器间如何实现文件共享
2022/05/20 Servers