分類  >  Web前端 >

iPhone WebApp 開發技術要義總結(一)

tags:    時間:2013-12-10 00:51:46
iPhone WebApp 開發技術要點總結(一)

iPhone WebApp 開發技術要點總結

作者 :流螢飛舞

簡介

Apple iPhone 推出以後 ,以其動人的外觀、超強的性能和豐富的軟體資源吸引了眾多的擁躉

 者。iPhone  的原始出廠功能比較基本 ,僅能完成一般的電話、簡訊、時鐘、郵件、上網以及定位

 的較少的功能。然而 ,其基於 Apple Mac OS X  的操作系統 ,為用戶提供了編寫應用軟體的可能。

 目前僅在  AppStore  上架的軟體就已經達到近十萬個。可以形象的比喻 ,原始的  iPhone  像個剛

 買來的電腦 ,但眾多的第三方軟體使其可以完成幾乎任何你可以想象到的功能。 

    你的創意總是獨特的 ,或許那些收費的或免費的軟體不能滿足你的願望 ,您也想試圖編寫一些

 應用程序來實現你的需求。那麼 ,我可以告訴你 ,這點上 ,很難、也很容易。 

    難 :  Apple  公司為企圖開發 iPhone  應用軟體的公司和個人提供了開發所必須的軟體開發工

 具包  SDK (Software Develoment Kit ),然而 ,使用它 ,必須先向  Apple  註冊申請 ,開發的軟

 件要提交  Apple Store  審核 ,然後才能上架發布。雖然現在已經出現了盜版的  SDK ,可以免註冊

 在 MAC 或  Windows  環境下進行開發 ,但其開發環境搭建的複雜 ,以及基於  Object-C 相對較難

 的編程語言 ,也阻擋的很多愛好者試圖開發程序的腳步。 

    易 :  所幸的是 ,  Apple  為我們提供了另一條簡潔的開發途徑 ,也就是在基於  WebKit  的 Safari 

 上 ,用戶可以編寫自己所需的  WebApp ,也就是網路應用軟體。簡單的說 ,應用程序可嚴格編寫為

 伺服器上的  HTML、CSS  和  JavaScript  文件 ,實現大多數可以實現的功能需求。Web  開發和  SDK 

 開發是兩種截然不同、各有利弊的開發方式。 

    WebKit  是一種瀏覽器引擎 ,支撐著  iPhone  內的  Mobile Safari 瀏覽器背後的技術。WebKit 

 是一個開源項目 ,它優先支持  HTML  和  CSS  特性。實際上 ,WebKit  還支持尚未被其他瀏覽器采

 納的一些諸如  HTML5 規範  CSS  樣式。 

    iPhone 上的 Safari 支持的標準 : 

     ü  HTML 4.01 

     ü  XHTML 1.0 

     ü  CSS 2.1  以及部分  CSS 3 

     ü  JavaScript (ES3) 

     ü  DOM (Level 2) 

     ü  AJAX (XMLHttpRequest) 

    熟悉這些標準並且平常也堅持 Web Standards 實踐的朋友估計要笑出來了——就這些嗎 ?我

 們天天在用啊 ,還有必要專門寫文章來說明嗎 ?事實上 ,Safari 之前作為一款無 PC 版的瀏覽器 ,一

 直用戶數量就不高 ,因此對它的研究也就不多 ,然而 Safari 其實有不少自己的擴展 ,因此還是很值

 得研究的。既然我們是針對 iPhone 設置 ,其實就是針對 Safari 設計 ,無需考慮兼容其它瀏覽器 ,

 這時候為什麼不好好利用這些擴展增強自己的應用程序的可用性呢 ? 

    雖然目前  iPhone WebApp 開發已經有諸如  iUI、Canvas、Dashcode  等很好的開發工具 ,

 但了解掌握最基本的  html、javascript 、css  知識仍是十分必要的。本文竭力提供通俗易懂的內容 ,

 以大量的例子入手 ,突出特性 ,適合有一定  Web 開發基礎 ,並試圖開發  iPhone WebApp 開發

 的人士參考。 

 

入門

 1、首先要說的就是 viewport ,也就是可視區域。對於桌面瀏覽器 ,我們都很清楚 viewport

 是什麼 ,就是出去了所有工具欄、狀態欄、滾動條等等之後用於看網頁的區域 ,這是真正有效的區

 域。 

    對於傳統 Web 頁面直接在 iPhone上面顯示來說是很好的事情 ,因為如果傳統Web 頁面在 980

 寬度的桌面瀏覽器 viewport 中顯示正常的話 ,iPhone 上顯示也絕對正常。然而這對於 Web 應用

 程序來說則不是好事 ,因為我們需要按照 980 寬度來設計將來會以 320 寬度顯示的頁面 ,一個應該

 顯示為 320*80 的元素 ,必須設計為 980*245 ,這多麻煩 !因此我們需要改變 viewport。 

    實際上應該怎麼做呢 ?我們有幾個選擇 ,因此先讓我們看看到底我們能夠設置哪些屬性吧。我

 們可以操作的屬性有 4 個 : 

    · width - viewport 的寬度   (範圍從 200 到 10,000 ,默認為 980 像素 ) 

    ·  height - viewport 的高度  (範圍從 223 到 10,000 ) 

    · initial-scale -  初始的縮放比例   (範圍從>0到 10 ) 

    ·  minimum-scale -  允許用戶縮放到的最小比例 

    ·  maximum-scale -  允許用戶縮放到的最大比例 

    · user-scalable -  用戶是否可以手動縮放 

    這 6 個屬性 ,我們可以設置其中的一個或者多個 ,iPhone 會根據你設置的屬性自動推算其他屬

 性值 ,而非直接採用默認值。這點很重要 ,在完全不設置的時候有默認 viewport ,在你設置一個屬

 性后其它值是自動推算出來的 ,不再是默認的。 

    如果你把

 initial-scale=1 ,那

 么 width 和 height

 在豎屏時自動為

 320*356 (不是

 320*480 因為地址欄

 等都佔據空間 ),橫屏

 時自動為 480*208。 

    類似地 ,如果你僅

 僅設置了 width ,就

 會自動推算出

 initial-scale 以及

 height。例如你設置

 了 width=320 ,豎屏時 initial-scale 就是 1 ,橫屏時則變成 1.5 了。 

    那麼到底這些設置如何讓 Safari 知道 ?其實很簡單 ,就一個 meta ,形如 : 

    <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; 

 maximum-scale=1.0; user-scalable=0;"/> 

在設置了 initial-scale=1 之後 ,我們終於可以以 1:1 的比例進行頁面設計了。 

     關於 viewport ,還有一個很重要的概念是 :iphone 的 safari 瀏覽器完全沒有滾動條 ,而且不

 是簡單的     「隱藏滾動條」 ,是根本沒有這個功能。iphone 的 safari 瀏覽器實際上從一開始就完整顯

 示了這個網頁 ,然後用 viewport 查看其中的一部分。當你用手指拖動時 ,其實拖的不是頁面 ,而是

 viewport。 

     瀏覽器行為的改變不止是滾動條 ,交互事件也跟普通桌面不一樣。這在後面會進行詳細說明。 

      

     2、必須注意到 ,為了讓你的頁面更好地受到 Safari 的支持。必須 : 

     u 聲明正確的 doctype ; 

     u 避免使用 frameset ; 

     u 每一個獨立的資源文件 ,HTML、CSS、JavaScript、以及非流媒體的其他多媒體文件 ,

          限制在 10m 之內 ; 

     u 頂級入口的 JavaScript 執行時間限制為 5 秒 ,超時將自動終止 ; 

     u JavaScript 分配內存上限為 10m ; 

     u  同一時間最多在 Safari 內打開 8 個子窗口 (同時瀏覽的頁面 )。 

     Safari 本身還對圖片有如下的限制 : 

     u GIF (包括 GIF 動畫 )、PNG 與 TIFF 解壓后的體積小於 2m。意思是 ,原圖的長度乘以

          寬度再乘以每一個像素的位數 ,得出來的大小要小於 2m ; 

     u JPEG 解壓后最大的體積是 32m。解壓體積大於 2m 的 JPG 會被進行二次抽樣 ,最終顯

          示給用戶的是二次抽樣后的結果。顯示時實際上是降低了精度的 ,以提高程序的執行效率。 

     可以看出 iPhone 對 HTML 的支持與桌面端的 Safari 是類似的 ,只是加入了更多擴展功能而已。

 使用  HTML  作為框架 ,適當嵌入 javascript  ,靈活運用  CSS ,即可實現你編寫  iPhone  應用軟體

 的快樂夢想。 

      

     3、HTML  的基本結構。很多人對  HTML  已經很熟了。在此僅做一簡單複習。 

     <html> 

     <head> 

        <meta ……/ > 

        <link ……/ > 

        <title>……</title> 

        <script type="text/javascript" src="xxxx.js"></script> 

        <style type="text/css">……</style> 

     </head> 

     <script Language="JavaScript">……</script> 

     <body>……</body> 

     </html> 

      

     下面 ,側重  iPhone Safari  的特性 ,詳細介紹其各部分的內容。 

 

 

框架


     基於  WebKit  的 iPhone Safari ,有一些與電腦上的 Safari ,特別是與  IE(Internet Explorer)

 不同之處 ,以下的說明中會特別註明。 

    1、頭<head>部分 : 

    ①<meta> 

    定義網頁語言 :(如果使用了擴展字元 ,請選用 gb18030 ) 

    <meta http-equiv="Content-Type " content="text/html; charset=gb2312 "/ > 

    定義用戶界面 ,寬度為設備寬度 (等同於 320 像素 ),並不可縮放 ) 

    <meta name = "viewport " content = "width = device-width, user -scalable = no "/ > 

    定義顯示的數字串 ,不被自動識別為電話號碼。否則會自動轉換為撥號超鏈接。 

    <meta name="format-detection" content="telephone=no" /> 

    定義開發者 

    <meta name="Author" contect="LSi "/ > 

    ②<link> 

    web app 可以像原生應用一樣 ,在 home 界面里上添加一個快捷方式圖標 

    <link rel="apple -touch-icon" href="icon.png" /> 

    這是針對單個頁面的 ,如果你把圖片命名為                 「apple-touch-icon.png」 ,放在網站的某個目錄

裡面 ,該目錄下所有頁面都會獲得添加圖標的功能…… 

    圖標的要求是尺寸 57×57 ,png 格式 ,不用畫蛇添足的去做圓角漸變或玻璃反光效果 ,iphone

系統會把圖片自動裁剪和渲染成統一的風格…… 

    ③<title> 

    定義可被搜索的網頁關鍵詞 

    <title>擇吉老黃曆</title> 

    ④<script> 

    定義外部 javascript  文件 

    <script type="text/javascript" src="xxxx.js "></script> 

    ⑤<style> 

    定義所用的 CSS (層疊樣式表 Cascading Style Sheet ) 

    <style type="text/css">……</style> 

    iPhone Safari 支持的 CSS3 的很多新特性。靈活運用  CSS ,不僅可以簡化程序 ,而且可以輕鬆

實現很多特殊的效果。這一點 ,會在後面詳細說明。 

     

    2、JavaScript 部分 

     <script Language="JavaScript ">……</script> 

    這部分是程序實現各種功能的關鍵。一般包括 : 

     n  變數定義  
 n  自定義函數 

       

      簡單示例 : 

      <script Language="JavaScript "> 

            var MsgArr=new Array() 

            var pPot =pMin=0; pMax =9 

            var wAddr= "http://bbs.weiphone.com/?u=61542 " 

       

      function pSetup(s) 

      { 

            return (s<pMax) ? true : false 

      } 

      </script> 

      

     當外部 js  文件與內嵌 javascript  段存在變數或函數衝突時 ,按載入順序 ,以最後的定義為準。 

     Javascript  段亦可放在  <body> 段之後 ,可實現先載入  <body> ,  后載入  <javscript>。但

必須注意 ,由於是順序載入 ,<body> 段不能引用後面的變數或函數 ,但可以向後調用。 

      

     3、<body>部分 

     這是程序界面的主要部分。程序的顯示、交互一般都放到這個段。 

     簡單示例 : 

<body style="margin: 0; font -size: 12pt; font -family: Trebuchet MS; color: #FFFFFF" 

            ontouchmove="event.preventDefault()" onload="tImg.style.visibility='visible' " > 

      <img id="tImg" class="sImg" src="TestFile.png" onerror="pError()" /> 

       <table id="layerT" style=" position  absolute; width: 320px; height: 480px "> 

            <tr><th id="TitleBar" colspan="2" height="48px">                 </th></tr> 

            <script Language="JavaScript"> 

                  for (i=0; i<=pMax; i++) 

                  { 

                        document.write("<tr ontouchend ='DispImg(" + i +")' style='border-top: 

 1px solid #CCC'><td id='M" + i + "'></td><td width='12' > ></td></tr>"); 

                  } 

            </script> 

            <tr><td id="ToolBar" colspan="2" height="42px">                  </td></tr> 

       </table> 

       <div id="layerH" style="position: absolute; width: 320px; height: 480px; left: 0px; top: 

 0px; background -color: RGBA(0,0,0,0.3); z-index: 1; visibility:hidden"> 

            <div id="layerM" style=" -webkit-border-radius:12px; border:2px solid #FFF; 

   -webkit-box-shadow: 0px 2px 4px #888; 

               position: absolute; left: 24px; top: 106px; 

               width: 256px; height: 268px; padding -left: 8px; padding-right: 8px; 

               color: #FFFFFF; text-shadow: 1px 1px 1px #000; text -align: center; 

               background-color: RGBA(32,48,96,0.9); 

               background-image:url('BG-Msg.png'); background-repeat:no-repeat; 

               z-index: 1; visibility: hidden; "> 

          <p><span style="font -size: 16pt; font -weight: bold">使用說明</span></p> 

          <hr noshade size="1"> 

          <div id="HelpText" style="height: 120px">說明文字</div> 

          <hr noshade size="1"> 

          <form name="formV" method="POST"> 

               <input type="button" class="sButton" value="確認" name="B1" 

                    onclick=" layerH.style.visibility='hidden'" / > 

          </form> 

          </div> 

      </div> 

</body> 

 

    簡要說明 : 

    ontouchmove="event.preventDefault()"           //鎖定 viewport ,任何屏幕操作不移動用戶界

面 (彈出鍵盤除外 )。 

    onload="tImg.style.visibility='visible'"  // <body>載入完成後 ,顯示該圖片。 

    onerror="pError()"   //圖片載入錯誤時 ,執行錯誤處理過程。(特別說明 :在  IE  中 ,只有圖

片文件不存在 ,才返回錯誤 ;而在  iPhone Safari  中 ,圖片文件不存在 ,或格式不正確 ,均返回錯

誤。因此這種方式 ,只能用來判斷圖片文件是否存在。) 

    position: absolute; width: 320px; height: 480px     //設定該容器絕對定位位置 ,正好為完全

的 viewport  尺寸。(特別說明 :除非參數值為 0 ,建議數值參數均帶上單位。) 

    id="TitleBar"    //定義單元標誌 ,其後可以使用 :TitleBar .innerText = "標題文字"  或 

TitleBar .innerHTML = "<b>標題文字</b>"  來重置該單元內容。不同的是 innerText 是純文本

內容 ,而 innerHTML 可以使用規範的 html 格式。 

    width: 256px; height: 268px; padding -left: 8px; padding-right: 8px;    //由於設定了容器

的  padding 值 ,所以 ,該容器的寬度實際是 :256 + 8 + 8 = 272 px。 

    z-index: 1 //設定該層的順序。層號越大越靠上 ;若有相同層號 ,按程序中定義順序 ,後邊的靠

上 ;設定為  -1 會不顯示 ,但為顯示方便 ,避免層設定混亂 ,隱藏某層一般使用 :visibility: hidden。 

 


 

屬性  

1、字體 

    ①font-family   字體名稱 (iPhone  自帶字體參見右表 ) 

    ②font-size:  字型大小參數 (一般標題使用  18 pt ,正文使用  12pt ,按鈕使用 14pt,工具條使用 

12px ) 

    ③font-style:  斜體字的名稱 (italic ) 

    ④font-weight:  字體粗細 (取值範圍從數字 100~900 ,瀏覽器默認的字體粗細為 400 ,默認

加粗  bold 為 700。另外可以通過參數 lighter 和 bolder 使得字體在原有基礎上顯得更細或更粗些。) 

    ⑤text-transform :文字大小寫 

    uppercase :所有文字大寫顯示 

    lowercase :所有文字小寫顯示 

    capitalize :每個單詞的頭字母大寫顯示 

    none :不繼承母體的文字變形參數。 

    ⑥text-decoration :文字修飾 

    underline :為文字加下劃線 

    overline :為文字加上劃線 

    line-through :為文字加刪除線 

    blink :使文字閃爍 

    none :不顯示上述任何效果。 

    ⑦text-align  :文本水平對齊 

    left :左對齊 

    right :右對齊 

    center :居中對齊 

   justify  :相對左右對齊 

    但需要注意的是 ,text-alight 是塊級屬性 ,只能用於<p>、<blockquqte>、<ul>、<h1>~<h6>

等標識符里。 

    ⑧vertical-align  :文本垂直對齊 

    top :頂對齊 

    bottom :底對齊 

    text-top :相對文本頂對齊 

    text-bottom :相對文本底對齊 

    baseline :基準線對齊 

    middle :中心對齊 

    sub :以下標的形式顯示 

    super :以上標的形式顯示 ) 

    ⑨text-shadow: 1px 1px 1px #000 :文字陰影。(參數分別為 :水平 X 方向偏移量 ;垂直 Y

方向偏移量 ;高斯模糊半徑值 ;陰影顏色值 ) 

     

    2、顏色 

    ①color :顏色屬性 (顏色參數取值範圍 :  以 RGB 值表示 ;以 16 進位 (hex )的色彩值表示 ;

以默認顏色的英文名稱表示 ,注意大小寫 !) 

    例如 : 

    color  #0080FF                  (可以使用#abc 縮寫來表示#aabbcc) 

    color  RGBA(00,33,66,0.5)       (Red:0 Green:33 Blue:66 opacity:50%) 

    color  red                      (顏色代碼保留字 ,參見下表) 

    Black="#000000"      Green="#008000"      Gray="#808080"      White="#FFFFFF"  
 □                    □                     □                   □ 

    Silver="#C0C0C0"     Lime="#00FF00"       Yellow="#FFFF00"    Olive="#808000"  
 □                    □                     □                   □  
 □ Fuchsia="#FF00FF"  □ Maroon="#800000" □ Red="#FF0000"        □ Purple="#800080" 

    Aqua="#00FFFF        Teal="#008080"       Blue="#0000FF"      Navy="#000080"  
 □                    □                     □                   □ 

     

    ②background-color :背景顏色 

    參數取值和顏色屬性一樣。 

     

    3、背景 

    ①background-image: url(URL) 

    URL 就是背景圖片的存放路徑。如果用               「none」來代替背景圖片的存放路徑 ,將什麼也不顯示 

    ②background-repeat :背景圖片重複 (默認的是水平、垂直兩個方向上平鋪 ) 

    no-repeat :不重複平鋪背景圖片 

    repeat-x :只在水平方向上平鋪 

    repeat-y :只在垂直方向上平鋪 

    ③background-position :背景定位 (用於控制背景圖片在網頁中顯示的位置。其參數為帶長

度單位的數字參數 ,其取值範圍 : 

    top :相對前景對象頂對齊 

    bottom :相對前景對象底對齊 

    left :相對前景對象左對齊 

    right :相對前景對象右對齊 

    center :相對前景對象中心對齊 

    比例關係 

    參數中的 center 如果用於另外一個參數的前面 ,表示水平居中 ;如果用於另外一個參數的後面 ,

表示垂直居中。 ) 

     

    4、容器  
  ①margin 邊框空白。位於 BOX 模型的最外層 ,包括四項屬性。格式分別如下 : 

    margin-top :頂部空白距離 

    margin-right :右邊空白距離 

    margin-bottom :底部空白距離 

    margin-left :左邊空白距離 

    如果使用上述屬性的簡化方式 margin ,可以在其後連續加上四個帶長度單位的數字 ,來分別表

示 margin-top、margin-right、margin-bottom、margin-left ,每個數字中間要用空格分隔。 

    ②border 對象邊框。位於邊框空白和對象空隙之間 ,包括了七項屬性。格式分別如下 : 

    border-top :頂邊框寬度 

    border-right :右邊框寬度 

    border-bottom :底邊框寬度 

    border-left :左邊框寬度 

    border-width :所有邊框寬度 

    border-color :邊框顏色 

    border-style :邊框樣式參數 

    其中 border-width 可以一次性設置所有的邊框寬度 ,border-color 同時設置四面邊框的顏色

時 ,可以連續寫上四種顏色 ,並用空格分隔。上述連續設置的邊框都是按 border-top、border-right、

border-bottom、border-left 的順序。 

    Border-style 相對別的屬性而言稍稍複雜些 ,因為它還包括了多個邊框樣式的參數 : 

    none :無邊框。 

    dotted :邊框為點線。 

    dashed :邊框為長短線。 

    solid :邊框為實線。 

    double :邊框為雙線。 

    groove :根據 color 屬性顯示不同效果的 3D 邊框 

    ridge :根據 color 屬性顯示不同效果的 3D 邊框 

    inset :根據 color 屬性顯示不同效果的 3D 邊框 

    outset :根據 color 屬性顯示不同效果的 3D 邊框 

    ③padding 對象間隙。位於對象邊框和對象之間 ,包括了四項屬性。基本格式如下 : 

    padding-top :頂部間隙 

    padding-right :右邊間隙 

    padding-bottom :底部間隙 

    padding-left :左邊間隙 

    和 margin 類似 ,padding 也可以一次性設置所有的對象間隙。 

    ④background: url(..), url(..), url(..), url(..)  多重背景。

 

由www.J2meGame.com精心收集。

推薦閱讀文章

Bookmark the permalink ,來源:互聯網