JavaScript development using DeviceOne (4) practices of video app Youku-javascript

This article mainly introduces how to use DeviceOne for JavaScript development. (4) related information on the application of the imitation youku video. If you need more information, consider system differences before you start development, for example, if the IOS Mobile phone has a rollback key, you must consider that the secondary decryption requires a rollback key during development. Otherwise, the ios Mobile Phone will not be able to go back to this page.

Android has a rollback key. In this case, you need to press the rollback key twice in three seconds to exit the system. This prevents you from mistakenly pressing the rollback key. The Code is as follows:

[Mw_shl_code = javascript, true] page. on ("back", function () {if (canBack) {global. exit ();} else {nf. toast ("Exit Youku again"); 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]

Youku-like video provides four main interfaces. you can slide between pages to switch between pages, or click the button at the bottom to switch between pages, the color of the button at the bottom will also change with the page switching. This function is implemented through the slideview component, as shown in the following figure:

Bottom changes:

The code is implemented as follows:

[Mw_shl_code = javascript, true] function subChange (num, button, imgs, lbs) {var strings = ["Download", "channel", "subscription ", "My"]; 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 = "0080 FFFF"; 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 = "Download ") {app. openPage ("source: // view/download. ui "," ") ;}}); // click the button at the bottom to switch the color of the main interface and the image at the bottom. 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 );}); // slide the main interface to switch the bottom image. do_slideview_1.on ("indexChanged", function (data, e) {subChange (data, do_button, action_imgs, action_lbs) ;}); [/mw_shl_code]

The switching between posters on the home page is similar to switching between pages. However, the switching between posters also enables automatic and scheduled switching, which is implemented every three seconds. The time control is implemented by do_timer, when using this component, the time period cannot be 100. Otherwise, the ios system may be incompatible. The image and Code are as follows:

Image:

Code:

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

Click the Download button in the upper left corner of the main interface to go To the download page. After clicking download, the app will download another picture from the Internet to replace the original poster. The download progress is displayed through the progress bar, the download function is implemented through the download method of the http component, and the progress bar is implemented through the do_progressbar component. Its implementation and Code are as follows:

Effect:

Code:

[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 = "downloaded" ;}); 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]

Three buttons in the upper-right corner, click the first button on the left, and a search interface is displayed. The search box of the search interface is implemented by the textfield component.

Click the second button. The QR code scanning interface is displayed. The QR code scanning function is enabled. After the scan is successful, a prompt is displayed. The QR code is implemented by the do_BarcodeView component, the implementation image and Implementation Code are as follows:

Code:

[Mw_shl_code = javascript, true] var nf = sm ("do_Notification"); // obtain the BarcodeView Instance Object Based on the ID; var barcode = ui ("do_BarcodeView_1"); start (); function start () {// start scanning barcode. start (function (data, e) {// scan successful, execute callback function var result = JSON. stringify (data); nf. alert ("QR code scanned! "," Finished ")});} var btn = ui (" btn_restart "); btn. on ("touch", function (data, e) {start () ;}) [/mw_shl_code]

After you click the third button, an image is displayed, and the image disappears after you press the button again. The effect is as follows:

Video Playback

Click any poster on the homepage to go to the video playback page. Click the playback button to play the video. This function is implemented by the do_VideoView component. The effect and Code are as follows:

Code:

[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 = "play") {do_VideoView_1.play (0 ); do_Button_1.text = "pause";} else if (do_Button_1.text = "pause") {pause (); do_Button_1.text = "continue";} else if (do_Button_1.text = "continue ") {do_VideoView_1.resume (); do_Button_1.text = "pause" ;}}); do_Button_2.on ("touch", function (data, e) {do_Button_1.text = "play "; do_VideoView_1.stop () ;}); [/mw_shl_code]

Click the "Stamp, all you like is here" button. The main page will jump directly to the subscription page. This function relies on data exchange between pages. The page component is used to define an event1 event in the logic code of the index page, call the fire function of the page component in the logic code of the shouye page to trigger the event1 event.

As follows:

The logic code is as follows:

Index page:

[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 page: [mw_shl_code = javascript, true] do_Button_0.on ("touch", function (data, e) {page. fire ("event1", "") ;}); [/mw_shl_code]

The above section describes how to develop a practical application using DeviceOne in JavaScript (4) using a video app like Youku.