首頁 > 開發者 > 手機程式開發

iOS平台快速發布HT for Web拓撲圖應用

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

      iOS平台一直是封閉的生態圈，iOS開發人員要繳納年費加入開發人員計劃才可進行iOS平台的APP開發測試，所開發的APP需要上傳到App Store經過蘋果審核以後才可對外發布。如果要開發企業內部應用，則要繳納更高的費用購買企業賬戶才可以。

      對於現在火如荼的HTML5應用，我們可以藉助PhoneGap對其打包，然後像原生APP一樣發布它們；或者要求使用者直接通過瀏覽器訪問。前一種方式的優點是使用者體驗好，使用者可以像使用原生APP那樣使用它們，缺點是發布很繁瑣，而且要等待蘋果審核。後一種方式則完全不用考慮發布的問題，但是使用者體驗比較差，畢竟讓使用者開啟瀏覽器，自行輸入網址對使用者操作水平要求較高。今天我們介紹另外一種方式，這種方式綜合了前面兩種方式的優點，特別適合部署企業內部應用。

      手邊有iPhone或iPad的同學可以先按照下面的方式實驗：

1、用iPhone或iPad上的Safari瀏覽器開啟連結：http://pattern.dk/sun/，點擊底部的發送按鈕


 

2、 點擊發送到主畫面



 3、確認添加



 4、查看主屏上新增加的APP表徵圖


 

      大家可以看到我們的主畫面上已經多了一個”APP”，如果細心最佳化，使用者完全無法區分這是一個原生應用還是HTML5應用，極大提升了使用者體驗。

      是不是很神奇？接下來我們以HT for Web的拓撲應用為例，試著實現這樣一個”高仿”的APP，先看一下我們的頁面在iPhone瀏覽器中的效果：


      為了使這個頁面看起來像原生APP，我們需要在HTML頁面中加入一些特殊標記：

<!--頁面縮放方式--><meta name="viewport" content="user-scalable=0, initial-scale=1.0”><!--是否全螢幕顯示-->?<meta name="apple-mobile-web-app-capable" content=“yes"><!--狀態列透明-->?<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">?<!--啟動畫面-->?<!-- 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的設定可以參考蘋果的官方文檔，寫的非常棒。

      其它meta標籤的用法也有很好的參考文檔，推薦大家仔細閱讀：

      1、配置Web應用程式

      2、支援的Meta標籤 

      還有一個細節需要注意，如果頁面中的資源(JS指令碼，圖片等)非常多，每次開啟重新載入也會影響到使用者體驗，這時我們可以將一些資源緩衝起來：

<!--指定緩衝控制檔案--><html manifest="cache.manifest">

      這個檔案的內容如下：

CACHE MANIFESTCACHE:ht.jsres/girl_iphone5.pngres/girl_iphone6.pngres/1.pngres/2.pngres/icon.png
      在這個檔案中，我們緩衝ht.js和一堆圖片檔案，這些資源只會載入一次，第二次開啟頁面時不會重複從網路載入，所以顯示非常快，這樣我們的頁面看起來就非常像一個原生應用了！

      緩衝的用法也有兩篇很好的文檔：

      1、HTML5離線緩衝

      2、在用戶端儲存資料

  最後上一段操作視頻，看一下最終效果，優酷連結：http://v.youku.com/v_show/id_XOTUyODA1NjQ0.html?firsttime=0&from=y1.4-2

 

iOS平台快速發布HT for Web拓撲圖應用

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More