• 網(wǎng)站制作淺析WAP2.0手機網(wǎng)站的開發(fā)

    2016-08-08    分類： 網(wǎng)站制作

    前一陣幫著學校開發(fā)了WAP2.0的手機版學校首頁。http://wap.chd.edu.cn

    從零基礎入門，總體來說上手還是挺容易的，現(xiàn)在就來寫一寫關于我在wap2.0開發(fā)中遇到的問題，一來記錄一下自己進行的第一個項目，二來也是給大家做一個參考，因為WAP2.0還算是比較新的東西，可參考的資料比較少。我在開發(fā)初期根本無從下手，無法找到大量的相關的準確資料，大多數(shù)在網(wǎng)上找到的都是一些不經(jīng)過實踐的copy文章，許多東西根本行不通。

    WAP網(wǎng)站分為WAP1.0和WAP2.0，現(xiàn)在比較主流的就是WAP2.0了。和WAP1.0相比，2.0在語法和習慣上更貼近于web頁面開發(fā)語言HTML。所以對于web設計師來說，開發(fā)WAP站點很容易上手，至于WAP1.0，目的是為了兼容比較舊的手機或者一些國產(chǎn)機，選用的WML語言，并且采用Deck（卡片）的方式來構建網(wǎng)站，需要重頭開始學。不過基本上08年后生產(chǎn)的手機，都可以解析WAP2.0的語言（XHTML-MP）。

    首先平臺的搭建選用的是 IIS6.0+.NET(c#)+XHTML(MP)+SQL2005,分別是服務器，后臺代碼語言，前臺頁面語言和數(shù)據(jù)庫。

    測試平臺可以選用手機終端或者web瀏覽器。WAP1.0的網(wǎng)站不支持用web瀏覽器訪問，不過可以用Opera瀏覽器來測試，Opera是我所知道的唯一一款可以直接訪問WAP1.0網(wǎng)站的瀏覽器。WAP2.0網(wǎng)站的優(yōu)點是手機端和web端都可以進行訪問。但在測試的時候，由于用手機訪問，必須要進行域名解析正式發(fā)布后，才可以訪問的到，所以一般都用web瀏覽器測試。不過需要注意一個很重要的問題：手機終端只支持非常非常非常簡單的Javascript腳本，所以千萬不可在搭建WAP2.0站運用過多的Javascript效果以及控件（因為控件的原理大多數(shù)是Javascript）。最棘手的一個問題就是，當你在web瀏覽器端測試時是正常的，但是用手機端來訪問時，就出現(xiàn)無法預計的錯誤，造成這種情況的原因大多數(shù)就是由于無法解析相關的Javascript。這時，我推薦大家一款模擬器，Openwave V7，這是一款模擬手機的終端，當你在模擬器上可以成功訪問到你所搭建的WAP網(wǎng)站時，就證明這個網(wǎng)站真正的手機端是可以訪問的了。

    下面我們來進入正題，構建WAP2.0時需要注意的地方。

      • 頁面語言的選擇 XHTML MP（eXtensible HyperText Markup Language Mobile Profile）
      1. 由于XHTML MP是XHTML的一個子集，所以必須嚴格遵守XHTML的語法。
      2. 標簽必須完全閉合。
      3. 標簽和屬性必須小寫。
      4. 屬性值必須包含在引號標記內。
      5. 不允許無屬性值存在。
      6. 標簽必須完全嵌套。
      • 頁面CSS的選擇WCSS（WAP CSS /WAP Cascading Style Sheet）
      1. WAP CSS: CSS2的一個簡化版本，增加了WAP特有的擴展?？梢院芎唵蔚母淖僗HTML MP頁面的布局和風格。

      • IIS管理器中添加MIME類型擴展

        1.MIME類型： application/vnd.wap.xhtml+xml、application/xhtml+xml 、text/html。

        2.動態(tài)生成MIME類型。獲得HTTP請求中的accept header信息。

        3.文件擴展名：.xhtml、.html、.htm

        正式開發(fā)：

        頁面

        必須包含, , 和 元素。

        [xhtml] view plaincopyprint?

      •   
      •   
      •   
      •   
      •   Hello world  
      •   
      •   
      •   

        Hello world

          
      •   
      •    

        • 注意：

        1.XML聲明和字符編碼：

           UTF-8/16編碼可省略。XML聲明也不是必須的，但如果忽略在許多WAP瀏覽器中出錯。

           雖然我們搭建的是中文網(wǎng)站，但我們也要聲明charset=utf-8而不是GB2312，原因是手機端的解析標準多樣，選擇utf-8的時候可以大限度確保手機端的兼容性，我在搭建網(wǎng)站的初期用charset=GB2312聲明時，用nokia測試頁面正常，但用htc測試時，卻是一片亂碼，仔細想了想原因后， 覺得問題出在charset上面，nokia是國行，應該是用gb2312解析，而htc是水貨，國外的編碼解析是utf-8，所以我把頁面改為charset=utf-8后，htc測試也恢復正常。

        2.必須有DOCTYPE聲明。在XML聲明和元素之間。

        3.、、、、<body>標簽要有，切完全閉合。 </p> <p><p>4.<p>元素，align屬性已經(jīng)去除，可以通過WAP CSS的text-align屬性來設置。<br />5.若使用<meta/>標簽，包含在<head>內<br />6.WAP瀏覽器如果不理解則忽略，比如添加作者：<meta name="author" content=“mark"/><br />7.Cache Control： </p> <p>  <meta/>標簽的一個應用是控制XHTML MP文件在Cache中的存在周期：<br />  <meta http-equiv="Cache-Control" content="no-cache"/><br />  <meta http-equiv="Cache-Control" content="max-age=0"/><br />  注意：與設備相關。一些使用不相的方法，一些沒有Cache機制。還有一些不支持<meta/>但識別Cache-Control:no-cache的<br />  HTTP頭。也可應用于圖片的緩存。 </p> <p>現(xiàn)在我給出一個WAP2.0網(wǎng)站的Default頁模板 </p> <p><p><p><p><p><b>[xhtml]</b> view plaincopyprint? </p> </p> <ol> <li> <?xml version="1.0">   </li> <li> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">   </li> <li> <html xmlns="http://www.w3.org/1999/xhtml">   </li> <li> <head>   </li> <li> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   </li> <li> <meta http-equiv="Cache-Control" content="no-cache"/>   </li> <li> <link rel="icon" href="some image url.png" mce_href="some image url.png"/>                  //icon圖標   </li> <li> <title>WAP模板  

      • /*Css Document*/  
      • 我的建議是不要用link的方式外部引入css樣式表，因為手機端在解析的時候無法很好的調入外部css文件。  
      •   
      •   
      •   

        Hello World

          
      •   
      •   

        •  

        我再給出一個WAP2.0網(wǎng)站的鏈接二級頁面，區(qū)別就是二級頁面在xml中就聲明UTF-8的編碼，而不需要charset屬性。

        [xhtml] view plaincopyprint?

        1.   
        2.   
        3.   
        4.   
        5.   二級頁面  
        6.   
        7.   
        8.   

          Hello World

            
        9.   
        10.   

         

        前臺頁面編輯好后，就要進行后臺代碼的編寫。因為我選用的后臺語言是.NET(C#)，所以支持一些方便的控件，例如Label，Button，但是復雜控件就不支持，比如LinkButton，手機端根本無法解析，所以具體情況還要在開發(fā)過程中自己實踐。

         

        接下來是發(fā)布，我用的是WinServer2003，IIS6.0，必須以新建網(wǎng)站的形式進行發(fā)布，并且添加一個獨立的應用程序池。切不可用虛擬目錄――>應用程序的方式進行發(fā)布，因為這樣是掛在主域名下的一個子目錄，而我們需求的是一個全新的具有二級域名的WAP網(wǎng)站（比如是http://wap.chd.edu.cn，而不是http://chd.edu.cn/wap)，這里就涉及到一個IP地址和域名解析的問題，就不具體講解了。另外在新建網(wǎng)站時有許多的權限問題，比如文件夾要具有IIS的訪問權限，要有WebServer的權限，這里可以參考我的另一篇文章。

        到這里WAP2.0網(wǎng)站的建設就基本入手。希望這篇文章可以給需要進行WAP2.0開發(fā)的人員作為一個參考。

        文章題目：網(wǎng)站制作淺析WAP2.0手機網(wǎng)站的開發(fā)
        分享URL：http://www.bm7419.com/news/39170.html

        網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有網(wǎng)站制作等

        廣告

        聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

        微信小程序開發(fā)