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

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

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

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

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

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

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

下面我們來進(jìn)入正題，構(gòu)建WAP2.0時需要注意的地方。

    • 頁面語言的選擇 XHTML MP（eXtensible HyperText Markup Language Mobile Profile）
    1. 由于XHTML MP是XHTML的一個子集，所以必須嚴(yán)格遵守XHTML的語法。
    2. 標(biāo)簽必須完全閉合。
    3. 標(biāo)簽和屬性必須小寫。
    4. 屬性值必須包含在引號標(biāo)記內(nèi)。
    5. 不允許無屬性值存在。
    6. 標(biāo)簽必須完全嵌套。
    • 頁面CSS的選擇WCSS（WAP CSS /WAP Cascading Style Sheet）
    1. WAP CSS: CSS2的一個簡化版本，增加了WAP特有的擴(kuò)展。可以很簡單的改變XHTML MP頁面的布局和風(fēng)格。

    • IIS管理器中添加MIME類型擴(kuò)展

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

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

      3.文件擴(kuò)展名：.xhtml、.html、.htm

      正式開發(fā)：

      頁面

      必須包含, , 和 元素。

      [xhtml] view plaincopyprint?

    •   
    •   
    •   
    •   
    •   Hello world  
    •   
    •   
    •   

      Hello world

        
    •   
    •    

      • 注意：

      1.XML聲明和字符編碼：

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

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

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

      3.、、、、<body>標(biāo)簽要有，切完全閉合。 </p> <p><p>4.<p>元素，align屬性已經(jīng)去除，可以通過WAP CSS的text-align屬性來設(shè)置。<br />5.若使用<meta/>標(biāo)簽，包含在<head>內(nèi)<br />6.WAP瀏覽器如果不理解則忽略，比如添加作者：<meta name="author" content=“mark"/><br />7.Cache Control： </p> <p>  <meta/>標(biāo)簽的一個應(yīng)用是控制XHTML MP文件在Cache中的存在周期：<br />  <meta http-equiv="Cache-Control" content="no-cache"/><br />  <meta http-equiv="Cache-Control" content="max-age=0"/><br />  注意：與設(shè)備相關(guān)。一些使用不相的方法，一些沒有Cache機(jī)制。還有一些不支持<meta/>但識別Cache-Control:no-cache的<br />  HTTP頭。也可應(yīng)用于圖片的緩存。 </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圖標(biāo)   </li> <li> <title>WAP模板  

    • /*Css Document*/  
    • 我的建議是不要用link的方式外部引入css樣式表，因為手機(jī)端在解析的時候無法很好的調(diào)入外部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.   

       

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

       

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

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

      名稱欄目：網(wǎng)站制作淺析WAP2.0手機(jī)網(wǎng)站的開發(fā)
      當(dāng)前網(wǎng)址：http://www.muchs.cn/news20/39170.html

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

      廣告

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

      綿陽服務(wù)器托管