H 5-3.01 webappとjquerymobile

5523 ワード
一.オリジナルアプリとWebAppの比較
  • 原生(Native)App指:iOS:Object-C swift Android:java
  • webAppとは、HTML 5を使用して作成されたモバイルWebアプリケーションを指し、1つのwebappがPC/Android/iOSなどでほとんど変更せずに実行できる.利点:一連のコードがあちこちで実行される劣勢:一部の下位機能が欠けており、実行速度がオリジナルのApp
    • に及ばない
    二.eclipseを使用してアンドロイドアプリケーションを作成し、携帯電話にインストールする
    1.   

    1）  “    ”         
    2）     -》  -》     -》  USB  

2. Android       

    1）      java       -JDK
   
                    java.exe    

    2）      Android       -ADT(AndroidDeveloperTools)

    3)   ADT: eclipse/eclipse.exe

    4)   Android    (       API19)，       ，        ，     

3. Android              

              AndroidManifest.xml

    三.HTML 5アプリケーションをAndroid携帯電話にパッケージ化し、HyBridAppを作成し、
     1.   app,   app     ,         app   (  activity)；
               -       (     ),                  


 2.   webView  -        (       )

     //         
     WebView wv = new WebView(this);
     //     webview  
     this.setContentView(wv);

       ：     oncreate  ，     

 3.   webView  APK           

      //      ，webview     js,     
      wv.getSettings().setJavaScriptEnabled(true);
    //     html  
      wv.loadUrl("file:///android_asset/hybrid.html");

         HTML/css/js     Android   assets   
     

  4.   webview  web       

       //         
       
       wv.loadUrl("http:www.baidu.com");

    これについて言えば、eclipseを使用するとローカルファイルデータを読み取るドメイン間問題があり、eclipseでは解決しにくいので、ローカルサーバの上に置いて、ipアドレスを使用してドメイン間解決にアクセスしたほうがいいです.また、hbuilderを使用してappをパッケージすることで、少し手間を省くことができ、ドメイン間の問題を解決することができます.四.フレームワークの整理
    1. jQuery   js   ，   DOM  ，   DOM   

2. jQueryUI   HTML   ，   HTML  

3. BootStrap   HTML/CSS/JS  ，           ，   CSSReset+HTML  

4. Google AngularJS   JS  ，          ，           SPA  

5. jQueryMobile   HTML   ，   App

    五.jQueryMobile
    1.  jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

2. JQM       ：
   
       &  
     CSS  
       
         


3   JQM   
    
  1）      jquery1.8+  

  2)      jqm  ，  jqm      

        jquery-mobile.css
        jquery-mobile.js
        images/...

  3)    html  ，     css js,   viewport

    一.JQueryMobile
    1.  jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

2. JQM       ：
   
       &  
     CSS  
       
         

3   JQM   
    
  1）      jquery1.8+  

  2)      jqm  ，  jqm      

        jquery-mobile.css
        jquery-mobile.js
        images/...

  3)    html  ，     css js,   viewport

    二.jqueryMobile-pageジャンプおよびフィールドアニメーション
  • ページジャンプはa/button/inputなどが使用できますが、a-を使用すると自動的にフィールドアニメーション
    • が追加されることをお勧めします.
  • 外部の完全なHTMLページにジャンプできます.
    • などの現在のHTMLの別のページにジャンプすることもできます.
     1)        HTML  

   2)  のHTMLの のページにジャンプ3)モードボックス  で のページを く
  • JQMはページ切り替えに非常に豊富なトランジションアニメーションを追加しています.使用方法で使用できるアニメーション効果は、fade:デフォルトアニメーションpop:ポップアップアニメーションslide:スライドアニメーションslideup:スライドアニメーションtrun:アニメーションflipの反転:アニメーションflowの反転:フローアニメーションnone:アニメーションなし
    • です.
    三.jqueryMobile-ボタン
  • A.button.input要素を使用してボタンのスタイル
    • を実装できます.
  • data-role=「button」プロパティを使用してボタンスタイルを実装するか、ui-btn ui-corner-all ui-shadow
    • などのclass実装ボタンのスタイルを指定できます.
  • ボタンのデフォルトはブロックレベル表示であり、ui-btn-inlineを使用して行内ボタン
    • を実現することができる.
  • ボタンには文字とアイコンがあり、アイコンがある場合は文字との位置関係を指定する必要があります.オプション値btn-icon-left btn-icon-right btn-icon-bottom btn-icon-top 
    •        ，          

        ，    ：  ，  ，  ，  ，  ，  ，  ，  ....
  • ボタンはpageのヘッダーに
    • を入れることができます.
     header             ，         ，

    四.jqueryMobile-ナビゲーションバー
      1.     

      
    
        
      
          
    • 

        
    

      
    

  2.   

                     ，  5        2 

              page Header/Main/Footer

        Header Footer  navbar       ，

    五.jqueryMobile-loadローダ
           ： $.mobile.loading("show");

       ：$.mobile.loading("hidden");

    六.jqueryMobile-panel(パネル) 1) jqp page ，header footer
    2) data-position="left/right" data-display = "reveal/overlay/push"

    InfuxDBの概要
    ユーザログイン認証の実装(token)