Praktische Entwicklung von JavaScript mit DeviceOne (4) imitiert Youku-Videoanwendungs-Javascript-Fähigkeiten

Bevor Sie mit der Entwicklung beginnen, müssen Sie zunächst die Unterschiede im System berücksichtigen. Verfügt das iOS-Telefon beispielsweise über eine Zurück-Taste, müssen Sie bei der Entwicklung berücksichtigen, dass die sekundäre Entschlüsselung eine Zurück-Taste erfordert Das iOS-Telefon fällt in diese Seite und kann nicht zurückgegeben werden.

Das Android-System verfügt über eine Zurück-Taste. In diesem Fall muss der Benutzer die Zurück-Taste zweimal innerhalb von 3 Sekunden drücken, bevor er das System verlässt, um zu verhindern, dass der Benutzer versehentlich die Zurück-Taste drückt wie folgt:

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

Imitieren Sie Youku Video, um vier Hauptschnittstellen zu implementieren. Sie können zwischen den Seiten wechseln, indem Sie die Seite nach links oder rechts schieben, oder Sie können zwischen den Seiten wechseln, indem Sie auf die untere Schaltfläche klicken. Die Farbe der unteren Schaltfläche ändert sich ebenfalls mit der Seite Schalter. Diese Funktion wird über die Slideview-Komponente implementiert und das Effektbild sieht wie folgt aus:

Untere Änderungen:

Der Code ist wie folgt implementiert:

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

Das Wechseln zwischen Homepage-Postern ähnelt dem Wechseln zwischen Seiten, aber das Wechseln zwischen Postern implementiert auch die Funktion der automatischen Zeitumschaltung, wobei die Zeitsteuerung durch do_timer implementiert wird. Bei Verwendung dieser Komponente kann dies nicht der Fall sein 100, sonst kommt es zu Inkompatibilitätsproblemen beim iOS-System. Das Bild und der Code lauten wie folgt:

Bild:

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]

Klicken Sie auf die Download-Schaltfläche in der oberen linken Ecke der Hauptoberfläche, um die Download-Oberfläche aufzurufen. Nachdem Sie auf „Herunterladen“ geklickt haben, lädt die Anwendung ein weiteres Bildposter aus dem Internet herunter, um das Originalposter zu ersetzen bar, und die Download-Funktion wird über die http-Komponente implementiert, und die Fortschrittsleiste wird über die do_progressbar-Komponente implementiert. Das Rendering und die Code-Implementierung sind wie folgt

Wirkung:

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 = "下载成功";
});
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]

In der oberen rechten Ecke befinden sich drei Schaltflächen. Nachdem Sie auf die erste Schaltfläche von links geklickt haben, wird eine Suchoberfläche angezeigt. Das Suchfeld der Suchoberfläche wird von der Textfeldkomponente implementiert.

Nachdem Sie auf die zweite Schaltfläche geklickt haben, wird die Schnittstelle zum Scannen des QR-Codes angezeigt. Nach erfolgreichem Scannen wird dem Benutzer mitgeteilt, dass der QR-Code erfolgreich ist Von der do_BarcodeView-Komponente implementiert. Das Implementierungsbild und der Implementierungscode lauten wie folgt:

Code:

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

Nachdem Sie auf die dritte Schaltfläche geklickt haben, wird ein Bild auf der Benutzeroberfläche angezeigt. Nach erneutem Drücken der Schaltfläche verschwindet das Bild. Der Effekt ist wie folgt:

Videowiedergabefunktion

Klicken Sie auf ein beliebiges Poster auf der Startseite, um die Videowiedergabeoberfläche aufzurufen. Klicken Sie auf die Wiedergabetaste, um das Video abzuspielen. Der Effekt und der Code sind wie folgt

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 == "播放")
    {
        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]

Klicken Sie auf die Schaltfläche „Poke, alles, was Sie sehen möchten, ist hier“ und die Hauptseite springt direkt zur Abonnementseite. Die Implementierung dieser Funktion basiert auf dem Datenaustausch zwischen Seiten. Die Seitenkomponente wird verwendet, um ein Ereignis „event1“ im Logikcode der Indexseite zu definieren, und die Feuerfunktion der Seitenkomponente wird im Logikcode der Shouye-Seite aufgerufen Lösen Sie das Ereignis „event1“ aus.

Die Darstellung ist wie folgt:

Der Logikcode lautet wie folgt:

Indexseite:

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

Das Obige ist die vom Herausgeber vorgestellte praktische Entwicklung von JavaScript mit DeviceOne (4), die die Youku-Videoanwendung imitiert.