原文鏈接 http://blog.csdn.net/uikoo9/article/details/43451377
內容簡介
介紹目前前端人員開發app的幾種方法，具體介紹hbuilder開發app，一扇贊新的大門~
無所不能的js
最開始js僅僅局限於網頁上一些效果，操作網頁內容等，
但是nodejs把js帶入了后端，也就是服務器端，從此前端人員可以涉及后端，前后通吃，
native.js（以及其他js，稍候介紹）把js帶入了移動端，從此前端人員前后移動通吃。
前端涉及app的兩種方式
適應移動端的網頁
大家都很熟悉的bootstrap，和現在剛出來的amazeui就是這種方法的代表，
說的簡單點就是對移動端做了適配，是的布局樣式組件都適合移動端展示，
我的個人網站（uikoo9.com）就是使用bootstrap3做的，手機瀏覽效果也很好。
缺陷：畢竟不是app，不管怎么樣也沒辦法取代app的便捷和功能強大。
js+html+css+打包技術
比較有名的就是phonegap了，國內的是hbuilder，
大概的意思是html負責頁面內容，js負責效果以及調用原生app方法，ui框架負責樣式，
最后打包成apk或者ipa。
hbuilder（http://www.dcloud.io/）
不談phonegap，不適用國內國情，
是的，你沒有看錯，這是一個開發的ide，其實就是對eclipse進行了深度定制。
特點是快捷鍵比較多，支持移動app開發（h5+方式）。
h5+（http://www.html5plus.org/#home）
終於說到正題了，這個就是之前提到的打包技術，
可以說nodejs將js帶到后端，h5+將js帶到移動端。
原理
上面說過的原理，再次說一遍：
html負責頁面，也就是的內容和框架；
js負責調用方法，也就是調用一些移動端原生；
ui負責樣式，比較有名的bootstrap，amazeui，jQuery mobile，mui
ui比較
上面說的幾個ui，做下簡單比較，僅代表個人觀點，
amazeui，功能和bootstrap重復，官方解釋是對中文排版做了優化，個人覺得有點多余，bootstrap就很好。
bootstrap，適合移動端瀏覽網頁適配，移動端瀏覽效果不錯，但是還是網頁。
jquery mobile，專門對移動端做定制，看起來就像手機應用一樣，js+css（300k），國外的，不推薦，有坑。
mui，這個是推薦的，比較了jqmobile和mui，顯然mui效果樣式好點，估計也會有坑，但是支持國產吧。
前端搞app
搭建開發環境
不需要搭建iOS和Android的開發環境，只需要下載hbuilder（估計需要Java環境支持），
選定ui
目前推薦mui，效果不錯
寫事件
通過js調用原生方法實現app效果
寫業務邏輯
如題
代碼和圖片（簡單示例）
文字說再多感覺也不是很大，下面來代碼和圖片，
文件結構：
你沒有看錯，僅僅需要一個html頁面，加一些js，css，這個例子使用的jquery mobile
頁面代碼：
head部分，僅僅引入一些必須的js和css
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
- <title>hello world</title>
- <link rel="stylesheet" href="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"/>
- <script src="http://cdn.staticfile.org/jquery/2.0.1/jquery.js"></script>
- <script src="js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
- <script type="text/javascript">
- function helloworld(){
- alert("hello world!")
- }
- document.addEventListener('plusready', function(){
- alert("welcome to Html5plus!");
- });
- </script>
- </head>
body部分，普通的頁面
- <body>
- <div data-role="page">
- <div data-role="header">
- <h1>首頁</h1>
- </div>
- <div role="main" class="ui-content">
- <p>一些主體內容在這里。。</p>
- <form>
- <fieldset data-role="controlgroup">
- <label>
- <input type="radio" name="radio-choice-v-2" value="one" checked="checked">第一個
- </label>
- <label>
- <input type="radio" name="radio-choice-v-2" value="two">第二個
- </label>
- <label>
- <input type="radio" name="radio-choice-v-2" value="three">第三個
- </label>
- </fieldset>
- </form>
- </div>
- <div data-role="footer">
- <h4>uikoo9.com</h4>
- </div>
- </div>
- </body>
調試
手機連接電腦，然后在hbuilder下運行——手機運行——在設備上運行，
就直接可以在手機上看效果了
效果
打包
在hbuilder中發型——app打包，然后交給雲端去打包，打包好后會自動下載，例如
心動了嗎？
現在，如果你會html+js+css，那你只需要一個hbuilder就可以開發app了，通吃android和ios