iOS平臺一直是封閉的生態(tài)圈,iOS開(kāi)發(fā)者要繳納年費加入開(kāi)發(fā)者計劃才可進(jìn)行iOS平臺的APP開(kāi)發(fā)測試,所開(kāi)發(fā)的APP需要上傳到App Store經(jīng)過(guò)蘋(píng)果審核以后才可對外發(fā)布。如果要開(kāi)發(fā)企業(yè)內部應用,則要繳納更高的費用購買(mǎi)企業(yè)賬戶(hù)才可以。
對于現在火如荼的HTML5應用,我們可以借助PhoneGap對其打包,然后像原生APP一樣發(fā)布它們;或者要求用戶(hù)直接通過(guò)瀏覽器訪(fǎng)問(wèn)。前一種方式的優(yōu)點(diǎn)是用戶(hù)體驗好,用戶(hù)可以像使用原生APP那樣使用它們,缺點(diǎn)是發(fā)布很繁瑣,而且要等待蘋(píng)果審核。后一種方式則完全不用考慮發(fā)布的問(wèn)題,但是用戶(hù)體驗比較差,畢竟讓用戶(hù)打開(kāi)瀏覽器,自行輸入網(wǎng)址對用戶(hù)操作水平要求較高。今天我們通過(guò)采用Hightopo的HT for Web組件,介紹另外一種方式,這種方式綜合了前面兩種方式的優(yōu)點(diǎn),特別適合部署企業(yè)內部應用。
手邊有iPhone或iPad的同學(xué)可以先按照下面的方式實(shí)驗:
1、用iPhone或iPad上的Safari瀏覽器打開(kāi)鏈接:http://pattern.dk/sun/,點(diǎn)擊底部的發(fā)送按鈕
2、 點(diǎn)擊發(fā)送到主屏幕
3、確認添加
4、查看主屏上新增加的APP圖標
大家可以看到我們的主屏幕上已經(jīng)多了一個(gè)”APP”,如果細心優(yōu)化,用戶(hù)完全無(wú)法區分這是一個(gè)原生應用還是HTML5應用,極大提升了用戶(hù)體驗。
是不是很神奇?接下來(lái)我們以HT for Web的拓撲應用為例,試著(zhù)實(shí)現這樣一個(gè)”高仿”的APP,先看一下我們的頁(yè)面在iPhone瀏覽器中的效果:
為了使這個(gè)頁(yè)面看起來(lái)像原生APP,我們需要在HTML頁(yè)面中加入一些特殊標記:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!--頁(yè)面縮放方式--><meta name="viewport" content="user-scalable=0, initial-scale=1.0”><!--是否全屏顯示--><meta name="apple-mobile-web-app-capable" content=“yes"><!--狀態(tài)欄透明--><meta name="apple-mobile-web-app-status-bar-style" content=“black-translucent"><!--APP在主屏上顯示的名字--><meta name="apple-mobile-web-app-title" content="ht" />?<!--App在主屏上顯示的圖標--><link rel="apple-touch-icon" href="res/icon.png"><!--啟動(dòng)畫(huà)面--><!-- iPhone5--><link rel="apple-touch-startup-image" href="res/girl_iphone5.png">?<!-- iPhone6--><link rel="apple-touch-startup-image" href="res/girl_iphone6.png" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" /> |
viewport的設置可以參考蘋(píng)果的官方文檔,寫(xiě)的非常棒。
其它meta標簽的用法也有很好的參考文檔,推薦大家仔細閱讀:
還有一個(gè)細節需要注意,如果頁(yè)面中的資源(JS腳本,圖片等)非常多,每次打開(kāi)重新加載也會(huì )影響到用戶(hù)體驗,這時(shí)我們可以將一些資源緩存起來(lái):
這個(gè)文件的內容如下:
在這個(gè)文件中,我們緩存ht.js和一堆圖片文件,這些資源只會(huì )加載一次,第二次打開(kāi)頁(yè)面時(shí)不會(huì )重復從網(wǎng)絡(luò )加載,所以顯示非???,這樣我們的頁(yè)面看起來(lái)就非常像一個(gè)原生應用了!
緩存的用法也有兩篇很好的文檔:
最后上一段操作視頻,看一下最終效果,優(yōu)酷鏈接://v.youku.com/v_show/id_XOTUyODA1NjQ0.html?firsttime=0&from=y1.4-2
聯(lián)系客服