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

点击第二个按钮之后将弹出扫描二维码的界面,该界面实现了扫描二维码的功能,成功之后提示用户扫描成功,二维码由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开发实战(四)仿优酷视频应用,希望大家喜欢。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzzfy.html