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 相关文章推荐
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
Javascript writable特性介绍
Feb 27 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
May 17 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
php实现简单的上传进度条
2015/11/17 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Django实现学生管理系统
2019/02/26 Python
基于python实现百度翻译功能
2019/05/09 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
教导处工作制度
2014/01/18 职场文书
全国道德模范事迹
2014/02/01 职场文书
工程造价专业求职信
2014/07/17 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
学校运动会简讯
2015/07/20 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
java解析XML详解
2021/07/09 Java/Android