小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

分享

!!!! iOS平臺快速發(fā)布HTML5拓撲應用

 看見就非常 2015-09-18

      iOS平臺一直是封閉的生態(tài)圈,iOS開發(fā)者要繳納年費加入開發(fā)者計劃才可進行iOS平臺的APP開發(fā)測試,所開發(fā)的APP需要上傳到App Store經(jīng)過蘋果審核以后才可對外發(fā)布。如果要開發(fā)企業(yè)內(nèi)部應用,則要繳納更高的費用購買企業(yè)賬戶才可以。

 

      對于現(xiàn)在火如荼的HTML5應用,我們可以借助PhoneGap對其打包,然后像原生APP一樣發(fā)布它們;或者要求用戶直接通過瀏覽器訪問。前一種方式的優(yōu)點是用戶體驗好,用戶可以像使用原生APP那樣使用它們,缺點是發(fā)布很繁瑣,而且要等待蘋果審核。后一種方式則完全不用考慮發(fā)布的問題,但是用戶體驗比較差,畢竟讓用戶打開瀏覽器,自行輸入網(wǎng)址對用戶操作水平要求較高。今天我們通過采用HightopoHT for Web組件,介紹另外一種方式,這種方式綜合了前面兩種方式的優(yōu)點,特別適合部署企業(yè)內(nèi)部應用。

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

 

1、用iPhone或iPad上的Safari瀏覽器打開鏈接:http:///sun/,點擊底部的發(fā)送按鈕


 

2、 點擊發(fā)送到主屏幕



 3、確認添加



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


 

      大家可以看到我們的主屏幕上已經(jīng)多了一個”APP”,如果細心優(yōu)化,用戶完全無法區(qū)分這是一個原生應用還是HTML5應用,極大提升了用戶體驗。

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


 

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--頁面縮放方式-->
<meta name="viewport" content="user-scalable=0initial-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">
<!--啟動畫面-->
<!-- 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標簽

 

      還有一個細節(jié)需要注意,如果頁面中的資源(JS腳本,圖片等)非常多,每次打開重新加載也會影響到用戶體驗,這時我們可以將一些資源緩存起來:

1
2
<!--指定緩存控制文件-->
<html manifest="cache.manifest">

       

      這個文件的內(nèi)容如下:

 

1
2
3
4
5
6
7
8
9
CACHE MANIFEST
CACHE:
ht.js
res/girl_iphone5.png
res/girl_iphone6.png
res/1.png
res/2.png
res/icon.png

      在這個文件中,我們緩存ht.js和一堆圖片文件,這些資源只會加載一次,第二次打開頁面時不會重復從網(wǎng)絡加載,所以顯示非???,這樣我們的頁面看起來就非常像一個原生應用了!

        緩存的用法也有兩篇很好的文檔:

        1、HTML5離線緩存

        2、在客戶端存儲數(shù)據(jù)


    最后上一段操作視頻,看一下最終效果,優(yōu)酷鏈接:http://v.youku.com/v_show/id_XOTUyODA1NjQ0.html?firsttime=0&from=y1.4-2

 


 


    本站是提供個人知識管理的網(wǎng)絡存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權內(nèi)容,請點擊一鍵舉報。
    轉藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多