<轉載>H5是如何來作移動端的開發的

內容簡介

介紹目前前端人員開發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（www.dcloud.io/）

不談phonegap，不適用國內國情，

是的，你沒有看錯，這是一個開發的ide，其實就是對eclipse進行了深度定製。

特色是快捷鍵比較多，支持移動app開發（h5+方式）。

h5+（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

[html]view plaincopy

hello world

function helloworld(){

alert("hello world!")

}

document.addEventListener('plusready', function(){

alert("welcome to Html5plus!");

});

body部分，普通的頁面

[html]view plaincopy

首頁

一些主體內容在這裏。。

第一個

第二個

第三個

uikoo9.com

調試

手機鏈接電腦，而後在hbuilder下運行——手機運行——在設備上運行，

就直接能夠在手機上看效果了

效果

打包

在hbuilder中髮型——app打包，而後交給雲端去打包，打包好後會自動下載，例如

心動了嗎？

如今，若是你會html+js+css，那你只須要一個hbuilder就能夠開發app了，通吃android和ios