DeviceOneを使ったJavaScriptの実践開発(4)Youkuの動画アプリを真似てみる

DeviceOneを使ったJavaScriptの実践開発(4)Youkuの動画アプリを真似てみる_JavaScriptスキル

WBOY

リリース： 2016-05-16 15:28:00

オリジナル

1291 人が閲覧しました

開発を開始する前に、まずシステムの違いを考慮する必要があります。たとえば、iOS スマートフォンには戻るボタンがあるかどうかを考慮する必要があります。したがって、開発時には、2 番目の復号化には戻るボタンが必要であることを考慮する必要があります。 iOS端末はこのページに該当しますので戻ることはできません。

Android システムには戻るボタンがあり、この場合、ユーザーが誤って戻るボタンを押さないように、システムを終了する前に 3 秒以内に戻るボタンを 2 回押す必要があります。以下のように:

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

ログイン後にコピー

Youku Videoを模倣して4つの主要なインターフェースを実装します。ページを左右にスライドすることでページを切り替えることができ、下のボタンをクリックすることでページを切り替えることができ、ページに応じて下のボタンの色も変わります。スイッチを切り替えます。この機能はスライドビューコンポーネントを通じて実装されており、効果の図は次のとおりです:

基本的な変更点:

コードは次のように実装されます:

[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 システムに互換性の問題が発生します。画像とコードは次のとおりです:

写真:

コード:

[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 コンポーネントを介して実装され、プログレスバーは do_progressbar コンポーネントを介して実装されます。レンダリングとコードの実装は次のとおりです。

効果:

コード:

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

ログイン後にコピー

右上隅に 3 つのボタンがあり、左から最初のボタンをクリックすると、検索インターフェイスの検索ボックスがテキストフィールドコンポーネントによって実装されます。

2 番目のボタンをクリックすると、QR コードをスキャンするためのインターフェイスが表示され、スキャンが成功すると、ユーザーに QR コードのスキャンが成功したことを示すメッセージが表示されます。 do_BarcodeView コンポーネントによって実装されます。実装図と実装コードは次のとおりです。

コード:

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

ログイン後にコピー

3 番目のボタンをクリックすると、インターフェースに画像が表示されます。もう一度ボタンを押すと、次のような効果が表示されます。

動画再生機能

ホームページ上の任意のポスターをクリックしてビデオ再生インターフェイスに入り、再生ボタンをクリックしてビデオを再生します。この関数は do_VideoView コンポーネントによって実装されます。

コード:

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

ログイン後にコピー

「Poke、見たいものはすべてここにあります」ボタンをクリックすると、メインページから購読ページに直接ジャンプします。この関数の実装は、ページ間のデータ交換に依存しています。ページコンポーネントは、インデックスページのロジックコードでevent1イベントを定義するために使用され、ページコンポーネントの fire 関数は、shouye ページのロジックコードで呼び出されます。 event1 イベントをトリガーします。

レンダリングは次のとおりです:

ロジックコードは次のとおりです:

インデックスページ:

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

ログイン後にコピー

以上は編集者が紹介したYouku動画アプリを真似たDeviceOneを使ったJavaScriptの実践開発です。気に入っていただければ幸いです。