Hbuilder入門(4)/ログインページの作成

8067 ワード
モバイル開発 httml 5
前の紹介を通して、HTML 5+に対して比較的直観的な認識を持つべきです.しかし、「覚えがいいのは下手な筆頭」だからこそ、実際にページを作ることが大切です.
 
次に、最も基本的なページであるログインページを作成します.
では、まずログインページに必要な内容を考えてみましょう.ユーザー名、パスワード、ログインボタンです.もしあなたが力のある美工があれば、私たちはクールな美工の設計を加えることができます.
HbuilderはUIコンポーネントのセットを提供しています.ここを参照してください.MUI.
 
Web開発に詳しい人にとって、上記は簡単すぎて、分でできます.しかし、これはモバイル開発であることを忘れないでください.普通のブラウザアプリケーションとは違います.次に、ページのレイアウトを見てみましょう.
 
ここでは一つの原則を忘れないでください.現在HTML 5+の実現はこの1社(Hbuilder)しかないので、私たちはいろいろな機能を実現するときは、必ずHbuilderの公式推薦の方法に従わなければなりません.
 
次にindexからhtmlが始まります.
Hbuilderがデフォルトで生成するindex.htmlのmeta部分はviewportのプロパティのみです.
 
  
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
 
 
実際には十分ではありません.手動でいくつかのプロパティを追加する必要があります.
  
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
 
 
次にmuiに必要なcssと対応するjavascriptファイルを導入します.
 
  
	<link rel="stylesheet" href="css/mui.min.css">
	<script src="js/mui.min.js"></script>
	<script src="js/app.js"></script>
 
 
muiとデフォルトのappを使わないと聞きたいなら.jsでよろしいでしょうか.答えは肯定的だ.しかし、思いがけない問題に直面する可能性があります.だから、インタフェースコンポーネントmuiにとって、個人が強い美工のパートナーがいれば、muiを使わなくても十分です.でもapp.js、やはり使ったほうがいいでしょう.
 
また、公式にはjqueryなどのjsクラスライブラリはなるべく使わないようにしてください.これはあなたのアプリケーションの速度に深刻な影響を与えます.だから、公式の提案に従ってください.実はモバイル端末の現代ブラウザでは、jqueryも本当にあってもなくてもいいです.
これでHTMLのhead部分は終わりです.それからbodyの部分を書き始めました.
    
公式には、ページのすべての内容をdivに入れるべきで、このdivのclassは「mui-content」--もちろん、muiを使うときです.ここではmuiを暫定的に使用します.
一般的には、ウィンドウの下部にcopyrightなどの文字を追加します.標準的にはclass=「mui-bar mui-bar-tab」のdivが必要であり、このmui-bar DIVはmui-contentの上に置かなければならないことに注意してください.つまり、最後のコードはこのようなものです.
 
     
<body>
	<div class="mui-bar mui-bar-tab" style="height:20px;line-height:20px;font-size:10px;text-align:center;">
			      
	</div>
	<div class="mui-content">

        </div>
<body>

 
上のmui-barには、高さを制御するためのスタイルが追加されており、必要に応じて自分で注文することができます.
次にmuiのコンポーネントを入れます:入力ボックス
<div class="mui-content-padded" style="margin: 5px;">
	<form class="mui-input-group">
		<div class="mui-input-row">
			<label>   </label>
			<input type="text" id="username" placeholder="   ">
		</div>
		<div class="mui-input-row">
			<label>  </label>
			<input type="password" id="userpassword" placeholder="  ">
		</div>
	</form>
</div>
<div style="margin-top:20px;text-align: center;">
	<button class="mui-btn mui-btn-primary" id="loginBtn">  </button>
	&nbsp;&nbsp;<button class="mui-btn mui-btn-primary" id="regBtn">  </button>
</div>

 
ここの入力ボックスとbuttonボタンはmuiが提供するコンポーネントです.いくつかのmarginなどの属性を使って位置を制御しました.個人的には、入力ボックスコンポーネントはまあまあで、ボタンコンポーネントのスタイルは普通だと思います.もしあなたが良い美工があれば、自分できれいなボタンを作ったほうがいいです.
htmlオブジェクトのネーミングにおいても,一貫した原則に従い,1つのオブジェクトを一意のIDで示す.要するに、この内容はweb開発経験のある人にとって、特別なところはありません.
 
入力ボックスを垂直に中央に配置するには、「divを垂直に配置する方法」を自分で探してください.解決策は同じです.
 
次に、ログインボタンがサーバとどのようにインタラクティブになるかを説明します.Web開発の理解によれば、いくつかの選択肢があります.
  • はフォーム(form)を定義し、ログインボタンをクリックするとバックグラウンドに提出します.バックグラウンド処理が完了すると、新しいページがフロントエンドに表示されます.
  • ログインボタンにclickメソッドをバインドします.クリックするときは、Ajaxを使ってバックグラウンドにデータを送信し、データを受け取った後、フロントエンドページを更新します.

    • 携帯電話のアプリでは、ページが更新されたり、白いページが大きくなったりすると、悪い体験になるに違いありません.だから、携帯電話のHTML 5開発では、formを使ってこのようなものを提出することは絶対にありません.私たちはAjaxしか使いません.
    公式の言い方によると、できるだけJQueryを使用しないでください.同時に、onclickのような方法も使用しないでください.代わりに、イベントをバインドする必要があります.
         
    document.getElementById("loginBtn").addEventListener('tap', function(){
       ；     ajax  。
});
    このイベントの名前は「tap」、つまり画面をクリックするイベントです.
     
    じゃあ、勉強好きな学生はきっといくつの事件が使えるかと聞くに違いない.ここを参照してください:ジェスチャーイベント.これはmuiが提供する特性です.この特性について言えば、muiというコンポーネントを使わないのは難しいです.結局、あなた自身がもう一つ実現すれば、多くのことがかかります.
     
    では、この事件のコードをどこに書けばいいですか?最初ですか、最後ですか.いいえ、違います.
    公式には、muiコンポーネントとページコンポーネントがすべてロードされた後に書くべきです.JQueryのように、muiにもreadyの方法があります.
         
    <script>
	mui.init();
	mui.plusReady(
		function() {
                                 。
		}
	);
</script>

     
    ここまで来ると、画面の部分はほぼ終わり、コード全体がこのようになっています.
         
    <html>
  <head>
    <meta charset="utf-8">
    <title>  </title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  

    <link rel="stylesheet" href="css/mui.min.css">  
    <script src="js/mui.min.js"></script>  
    <script src="js/app.js"></script>
  </head>
  <body>
    <div class="mui-bar mui-bar-tab" style="height:20px;line-height:20px;font-size:10px;text-align:center;">  
                    
    </div>  
    <div class="mui-content-padded" style="margin: 5px;">  
      <form class="mui-input-group">  
        <div class="mui-input-row">  
            <label>   </label>  
            <input type="text" id="username" placeholder="   ">  
        </div>  
        <div class="mui-input-row">  
            <label>  </label>  
            <input type="password" id="userpassword" placeholder="  ">  
        </div>  
     </form>  
    </div>  
    <div style="margin-top:20px;text-align: center;">  
        <button class="mui-btn mui-btn-primary" id="loginBtn">  </button>  
        &nbsp;&nbsp;<button class="mui-btn mui-btn-primary" id="regBtn">  </button>  
    </div>  
    <script>  
     mui.init();  
     mui.plusReady(  
        function() {  
           document.getElementById("loginBtn").addEventListener('tap', function(){  
                 alert("       ");
            }); 
        }  
      );  
    </script>
  </body>
</html>

     
    このとき、携帯電話をパソコンに接続してデバッグすると、最初のログイン画面が表示されます.ログインボタンをクリックすると、「ログインボタンをクリックした」というダイアログが表示されます.
     
    muiの場合、muiコンポーネントを使用しなくてもいいですが、muiなどの基本的なルールがあります.init,mui.plusReadyのような方法は、やはり使います.
    また、muiのレイアウト案には垂直中央の方式はなく(後で増やしてほしい)、方式はたくさんありますが、これをお勧めします:CSS Transformは、アスペクト比率の高いレイアウト要素を水平に垂直に中央に配置します。
     
    次に、ajaxを介してログインボタンがバックグラウンドとインタラクティブになるようにします.
    この内容はもう十分なので、次の編で皆さんに共有します.
        
     
     
    reactのwebストレージlocalStorage
    JavaScriptのクライアント検出