標籤：
這周因為部門接了個小的html5 app case,所以從事android開發的我就接下了這個項目。與其說是項目需要，其實更大部分是我自己想要做html5 app，因為我對這個全新的平台已經好奇很久了。蠢蠢欲動很久了，只不過之前沒有碰到項目練手而已。
好了，讓我們開始這篇博文的主要內容吧。說到html5相信大家都不陌生了，的確這個概念已經在國內火了一段時間，但是大家對於html5具體能夠幹什麼，到底在什麼地方我應該使用html5呢？然後html5相較之前的版本又多了什麼呢？且聽我慢慢到來吧，首先html5主要用於web端，因為html5本身就是一種從html慢慢進化過來的標記語言，只不過相較之前的版本html5多了一些被瀏覽器支援的強大標籤，所以我們可以使用更簡便、更高效的標籤實現更加複雜的功能。所以說到底就是國外的一些標準組織出於現實需要，在原有html版本基礎上面添加新的標籤，同時制定一套新的標準，然後各大瀏覽廠商按照這套準則支援響應的功能。那麼對於我們app開發人員，使用html5開發和使用原生的語言開發又有什麼優缺點呢？首先，我一直擔心體驗問題，因為畢竟是在手機瀏覽器裡面顯示一個.html頁面。沒有原生架構裡面提供的一些控制項陳列庫，同時沒有原生的一些sdk支援，這是不是意味著使用者就沒有原生app的體驗呢？隨著這個項目開發過程，我發現html5在開發app的方面，完全沒有問題。在使用者體驗方面幾乎可以做的差不多，而且html5開發出來的app不管什麼平颱風格一致，一套代碼，一次開發，你想想開發成本能夠降低多少呢？
首先在建立的html頁面如下代碼<meta charset="utf-8">下面，添加下面的代碼：<meta name="viewport" content="width=device-width,initable-scale=1,user-scalable=1">,這句代碼是什麼意思呢？我們看看viewport，這個標記是apple開發出來的，我們可以理解為：這個html頁面就代表了一個app頁面，這個頁面的寬度跟螢幕的寬度一樣，然後縮放比例是1，不允許使用者縮放。通過這句代碼我們達到當html頁面在手機瀏覽器裡面顯示的時候，它是以手機螢幕的尺寸去顯示的。然後我們就可以在這個html頁面做很多事情了，比如我們想要添加一個頁面title，我們應該怎麼做呢?首先在頁面裡面添加如下的jquery mobile架構的樣式檔案：
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
添加這三句應用之後，我們就可以在當前頁面的<body></body>標籤之間添加如下代碼：
<div data-role="page">
<div data-role="header">
<h1>登入</h1>
</div>
<div data-role="content">
</div>
</div>
相信你一定看得懂div標籤，但是data-role是什麼意思呢？這是jquery mobile架構裡面用於設定標籤角色的屬性，首先我們將最外層的div設定成page(就是整個頁面)，然後次外層有header,content這就分別對應頁面的標題和內容。你可以將上面的代碼敲到一個html裡面，然後放到伺服器上面通過手機瀏覽器訪問一下就知道了。當然，jquery mobile裡面還有很多其他標籤、屬性、事件，利用這些東西我們就可以實現很多具有可互動的頁面了。
我在學習過程中，最令我好奇的地方就是：前台html使用者輸入的資訊怎樣擷取到後台，同時封裝到http報文裡面發送到服務端，然後解析出來的資料又是怎樣傳回到html頁面進行現實的呢？相信如果有服務端開發經驗的哥們這個好奇點，會感到很好笑。這不就是通過form，提交表單，然後利用javascript從html提交的參數裡面提取我們需要的用到的資料嗎？是呀，如果弄懂了這點，我相信好多哥們就能更加自信的開發html5了。其實從一定程度上來說，開發html5就是在開發服務端web網站，只不過我們在開發過程中會用用戶端開發所需的一些設計思維，使用者體驗感吧了。說到這裡，我們就可以很容易明白，開發html5所應該具有的技術基礎了。我們可以使用：php,java,c#只要能夠接受使用者請求，給予使用者響應在理論上面都可以用來開發html5 app。
剛剛從原生用戶端轉過來的話，可能會對一些頁面配置很到很疑惑，因為頁面配置很大程度上找不到原生語言那種規律，有的時候很簡單的頁面邏輯，可能費很大勁才能搞出來。其次我們可能對響應服務端http請求，回應程式式也要有一定瞭解，這樣才能更好的解析資料、展示頁面。
好了，就講這麼多吧，技術細節大家可以在項目實戰裡面摸索。
學習html5 app項目開發
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
