iOS平台快速发布HT for Web拓扑图应用
? ? ? iOS平臺一直是封閉的生態(tài)圈，iOS開發(fā)者要繳納年費(fèi)加入開發(fā)者計(jì)劃才可進(jìn)行iOS平臺的APP開發(fā)測試，所開發(fā)的APP需要上傳到App Store經(jīng)過蘋果審核以后才可對外發(fā)布。如果要開發(fā)企業(yè)內(nèi)部應(yīng)用，則要繳納更高的費(fèi)用購買企業(yè)賬戶才可以。
? ? ? 對于現(xiàn)在火如荼的HTML5應(yīng)用，我們可以借助PhoneGap對其打包，然后像原生APP一樣發(fā)布它們；或者要求用戶直接通過瀏覽器訪問。前一種方式的優(yōu)點(diǎn)是用戶體驗(yàn)好，用戶可以像使用原生APP那樣使用它們，缺點(diǎn)是發(fā)布很繁瑣，而且要等待蘋果審核。后一種方式則完全不用考慮發(fā)布的問題，但是用戶體驗(yàn)比較差，畢竟讓用戶打開瀏覽器，自行輸入網(wǎng)址對用戶操作水平要求較高。今天我們介紹另外一種方式，這種方式綜合了前面兩種方式的優(yōu)點(diǎn)，特別適合部署企業(yè)內(nèi)部應(yīng)用。
? ? ? 手邊有iPhone或iPad的同學(xué)可以先按照下面的方式實(shí)驗(yàn)：
1、用iPhone或iPad上的Safari瀏覽器打開鏈接：http://pattern.dk/sun/，點(diǎn)擊底部的發(fā)送按鈕
?
2、 點(diǎn)擊發(fā)送到主屏幕
?3、確認(rèn)添加
?4、查看主屏上新增加的APP圖標(biāo)
?
? ? ? 大家可以看到我們的主屏幕上已經(jīng)多了一個”APP”，如果細(xì)心優(yōu)化，用戶完全無法區(qū)分這是一個原生應(yīng)用還是HTML5應(yīng)用，極大提升了用戶體驗(yàn)。
? ? ? 是不是很神奇？接下來我們以HT for Web的拓?fù)鋺?yīng)用為例，試著實(shí)現(xiàn)這樣一個”高仿”的APP，先看一下我們的頁面在iPhone瀏覽器中的效果：
? ? ? 為了使這個頁面看起來像原生APP，我們需要在HTML頁面中加入一些特殊標(biāo)記：
<!--頁面縮放方式--> <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在主屏上顯示的圖標(biāo)--><link rel="apple-touch-icon" href="res/icon.png"><!--啟動畫面-->? <!-- 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的設(shè)置可以參考蘋果的官方文檔，寫的非常棒。
? ? ? 其它meta標(biāo)簽的用法也有很好的參考文檔，推薦大家仔細(xì)閱讀：
? ? ? 1、配置Web應(yīng)用程序
? ? ? 2、支持的Meta標(biāo)簽?
? ? ? 還有一個細(xì)節(jié)需要注意，如果頁面中的資源(JS腳本，圖片等)非常多，每次打開重新加載也會影響到用戶體驗(yàn)，這時我們可以將一些資源緩存起來：
<!--指定緩存控制文件--> <html manifest="cache.manifest">? ? ? 這個文件的內(nèi)容如下：
CACHE MANIFESTCACHE: ht.js res/girl_iphone5.png res/girl_iphone6.png res/1.png res/2.png res/icon.png 在這個文件中，我們緩存ht.js和一堆圖片文件，這些資源只會加載一次，第二次打開頁面時不會重復(fù)從網(wǎng)絡(luò)加載，所以顯示非?？?#xff0c;這樣我們的頁面看起來就非常像一個原生應(yīng)用了！? ? ? 緩存的用法也有兩篇很好的文檔：
? ? ? 1、HTML5離線緩存
? ? ? 2、在客戶端存儲數(shù)據(jù)
? 最后上一段操作視頻，看一下最終效果，優(yōu)酷鏈接：http://v.youku.com/v_show/id_XOTUyODA1NjQ0.html?firsttime=0&from=y1.4-2
?
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的iOS平台快速发布HT for Web拓扑图应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android 照相功能
- 下一篇： ZooKeeper学习笔记—配置管理