內(nèi)容簡介
介紹目前前端人員開發(fā)app的幾種方法,具體介紹hbuilder開發(fā)app该抒,一扇贊新的大門~
最開始js僅僅局限于網(wǎng)頁上一些效果怀跛,操作網(wǎng)頁內(nèi)容等拣宰,
但是nodejs把js帶入了后端,也就是服務(wù)器端放典,從此前端人員可以涉及后端逝变,前后通吃,
native.js(以及其他js奋构,稍候介紹)把js帶入了移動端壳影,從此前端人員前后移動通吃。
大家都很熟悉的bootstrap声怔,和現(xiàn)在剛出來的amazeui就是這種方法的代表态贤,
說的簡單點就是對移動端做了適配,是的布局樣式組件都適合移動端展示醋火,
我的個人網(wǎng)站(uikoo9.com)就是使用bootstrap3做的悠汽,手機(jī)瀏覽效果也很好箱吕。
缺陷:畢竟不是app,不管怎么樣也沒辦法取代app的便捷和功能強(qiáng)大柿冲。
比較有名的就是phonegap了茬高,國內(nèi)的是hbuilder,
大概的意思是html負(fù)責(zé)頁面內(nèi)容假抄,js負(fù)責(zé)效果以及調(diào)用原生app方法怎栽,ui框架負(fù)責(zé)樣式,
最后打包成apk或者ipa宿饱。
hbuilder(http://www.dcloud.io/)
不談phonegap熏瞄,不適用國內(nèi)國情,
是的谬以,你沒有看錯强饮,這是一個開發(fā)的ide,其實就是對eclipse進(jìn)行了深度定制为黎。
特點是快捷鍵比較多邮丰,支持移動app開發(fā)(h5+方式)。
h5+(http://www.html5plus.org/#home)
終于說到正題了铭乾,這個就是之前提到的打包技術(shù)剪廉,
可以說nodejs將js帶到后端,h5+將js帶到移動端炕檩。
上面說過的原理斗蒋,再次說一遍:
html負(fù)責(zé)頁面,也就是的內(nèi)容和框架捧书;
js負(fù)責(zé)調(diào)用方法吹泡,也就是調(diào)用一些移動端原生;
ui負(fù)責(zé)樣式经瓷,比較有名的bootstrap爆哑,amazeui,jquery mobile舆吮,mui
上面說的幾個ui揭朝,做下簡單比較,僅代表個人觀點色冀,
amazeui潭袱,功能和bootstrap重復(fù),官方解釋是對中文排版做了優(yōu)化锋恬,個人覺得有點多余屯换,bootstrap就很好。
bootstrap,適合移動端瀏覽網(wǎng)頁適配彤悔,移動端瀏覽效果不錯嘉抓,但是還是網(wǎng)頁。
jquery mobile晕窑,專門對移動端做定制抑片,看起來就像手機(jī)應(yīng)用一樣,js+css(300k)杨赤,國外的敞斋,不推薦,有坑疾牲。
mui植捎,這個是推薦的,比較了jqmobile和mui阳柔,顯然mui效果樣式好點鸥跟,估計也會有坑,但是支持國產(chǎn)吧盔沫。
不需要搭建ios和android的開發(fā)環(huán)境,只需要下載hbuilder(估計需要java環(huán)境支持)枫匾,
目前推薦mui架诞,效果不錯
通過js調(diào)用原生方法實現(xiàn)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
首頁
一些主體內(nèi)容在這里均驶。。
第一個
第二個
第三個
uikoo9.com
手機(jī)連接電腦枫虏,然后在hbuilder下運行——手機(jī)運行——在設(shè)備上運行妇穴,
就直接可以在手機(jī)上看效果了
在hbuilder中發(fā)型——app打包,然后交給云端去打包隶债,打包好后會自動下載腾它,例如
現(xiàn)在死讹,如果你會html+js+css瞒滴,那你只需要一個hbuilder就可以開發(fā)app了,通吃android和ios