ASP.NET開發(fā)WAP2.0 - XHTML MP 頁面

命運之輪 2011-05-12

展開全文

本文來源于: 從此學習網(wǎng) 原文: http://www./item/asp.net,wap,xhtml

摘要：目前大多數(shù)手機已經(jīng)不僅僅支持WAP1.0(WML)，而是支持WAP2.0（XHTML MP）了，甚至有些手機不久就要支持HTML5了。本文演示如何用ASP.NET 開發(fā)WAP2.0頁面，查閱了一些資料，整理分享給大家，希望大家能以后能少走彎路。手機瀏覽器作為一個人機交互界面，而且手機又有隨時隨地能使用的優(yōu)勢，我們在這方面是可以大有作為的。

XHTML MP簡介
WAP2.0有一套規(guī)范，XHTML MP是其中用于瀏覽器顯示的規(guī)范，底層可以使用HTTP傳輸，它也是XHTML的一個子集，詳細參考如下鏈接：

XHTML Mobile Profile

DOCTYPE設(shè)置
XHTML MP有自己的DOCTYPE，如下

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www./tech/DTD/xhtml-mobile11.dtd">
可以把它在Master文件里設(shè)置，以便在所有內(nèi)容頁里自動使用，而不是每個頁面重復的設(shè)置。

配置瀏覽器文件
在ASP.NET 項目里右鍵添加App_Browsers文件夾，再在里面添加一個mobile.browser文件，如下

代碼
<browsers> <browser id="NewBrowser" parentID="Default"> <identification> <header name="Accept" match="application/xhtml\+xml; profile|application/vnd\.wap\.xhtml\+xml" /> </identification> <capabilities> <capability name="preferredRenderingMime" value="application/vnd.wap.xhtml+xml" /> <capability name="preferredRenderingType" value="xhtml-mp" /> </capabilities> <controlAdapters markupTextWriterType="System.Web.UI.XhtmlTextWriter" /> </browser></browsers>

這個瀏覽器配置文件的意思，如果HTTP請求的Accept頭里包含xhtml mp的MIME類型，則在給客戶端返回Response的時候使用application/vnd.wap.xhtml+xml的ContentType，且RenderType使用XHTML-MP類型，Render的時候強制使用XhtmlTextWriter。

瀏覽器配置文件是ASP.NET 2.0新增的機制，代替以前在WebConfig里配置的BrowserCaps節(jié)點。

WebConfig配置
因為我們開發(fā)的網(wǎng)頁是面向手機的，手機的功能比較弱，有的甚至不支持Cookie等，而且只支持簡單的控件，所以我們把Cookie和ViewState等禁掉，如下

代碼
<?xml version="1.0"?><configuration> <system.web> <compilation debug="false" /> <authentication mode="None" /> <xhtmlConformance mode="Strict" /> <pages enableViewState="false" /> <sessionState cookieless="true"/> </system.web></configuration>

啟用頁面壓縮來減少流量傳輸
有些手機瀏覽器支持Gzip等頁面壓縮算法，我們應(yīng)該檢測出來這種情況，并讓這種手機節(jié)省流量。可以在Global.asax里寫一段代碼支持，該方法來源于網(wǎng)絡(luò)，引用如下，原始鏈接參考文末的參考鏈接

代碼
void Application_PreRequestHandlerExecute(object sender, EventArgs e) { HttpApplication app = sender as HttpApplication; string acceptEncoding = app.Request.Headers["Accept-Encoding"]; Stream prevUncompressedStream = app.Response.Filter; if (!(app.Context.CurrentHandler is Page || app.Context.CurrentHandler.GetType().Name == "SyncSessionlessHandler") || app.Request["HTTP_X_MICROSOFTAJAX"] != null) return; if (acceptEncoding == null || acceptEncoding.Length == 0) return; acceptEncoding = acceptEncoding.ToLower(); if (acceptEncoding.Contains("deflate") || acceptEncoding == "*") { // defalte app.Response.Filter = new DeflateStream(prevUncompressedStream, CompressionMode.Compress); app.Response.AppendHeader("Content-Encoding", "deflate"); } else if (acceptEncoding.Contains("gzip")) { // gzip app.Response.Filter = new GZipStream(prevUncompressedStream, CompressionMode.Compress); app.Response.AppendHeader("Content-Encoding", "gzip"); }}在沒有啟用壓縮和配置瀏覽器文件之前，手機訪問頁面抓包如下

代碼
GET /mobileoaweb/?t=25345 HTTP/1.1Host: 114.249.124.57Accept: text/html, application/xhtml+xml, application/vnd.wap.xhtml+xml, application/vnd.wap.wmlc, application/vnd.wap.wmlscriptc, text/vnd.wap.wml, text/vnd.sun.j2me.app-descriptor, */*, text/x-vcard, text/x-vcalendar, image/gif, image/vnd.wap.wbmpAccept-Charset: ISO-8859-1,UTF-8,US-ASCII,UTF-16BE,windows-1252,UTF-16LE,GB2312,windows-1250Accept-Language: zh-CN,zh;q=0.5Accept-Encoding: gzip,deflateContent-length: 0Via: WTP/1.1 BJBJ-PS-WAP2-GW07.bj2.monternet.com (Nokia WAP Gateway 4.1 CD1/ECD13_D/4.1.04)X-Forwarded-For: 10.140.248.32X-Source-ID: BJGGSN06BMT-CSKX-Nokia-CONNECTION_MODE: TCPX-Up-Bear-Type: GPRS/EDGEX-Nokia-gateway-id: NWG/4.1/Build4.1.04Connection: closeHTTP/1.1 200 OKServer: Microsoft-IIS/5.1Date: Sat, 10 Jul 2010 12:26:43 GMTX-Powered-By: ASP.NETConnection: closeX-AspNet-Version: 2.0.50727Cache-Control: privateContent-Type: text/html; charset=utf-8Content-Length: 2180可以看到這時候給客戶端返回的Content-Type是text/html，而且Content-Length很長，是2180，而配置瀏覽器文件以及啟用壓縮之后，則如下

代碼
GET /mobileoaweb/?t=25345&t=36045&t=26421 HTTP/1.1Host: 114.249.124.57Accept: text/html, application/xhtml+xml, application/vnd.wap.xhtml+xml, application/vnd.wap.wmlc, application/vnd.wap.wmlscriptc, text/vnd.wap.wml, text/vnd.sun.j2me.app-descriptor, */*, text/x-vcard, text/x-vcalendar, image/gif, image/vnd.wap.wbmpAccept-Charset: ISO-8859-1,UTF-8,US-ASCII,UTF-16BE,windows-1252,UTF-16LE,GB2312,windows-1250Accept-Language: zh-CN,zh;q=0.5Accept-Encoding: gzip,deflateCookie: jid=M4GKS9T0hh!-849429530Content-length: 0Via: WTP/1.1 BJBJ-PS-WAP2-GW18.bj2.monternet.com (Nokia WAP Gateway 4.1 CD1/ECD13_D/4.1.04)X-Forwarded-For: 10.140.83.123X-Source-ID: BJGGSN06BMT-CSKX-Nokia-CONNECTION_MODE: TCPX-Up-Bear-Type: GPRS/EDGEX-Nokia-gateway-id: NWG/4.1/Build4.1.04Connection: closeHTTP/1.1 200 OKServer: Microsoft-IIS/5.1Date: Sat, 10 Jul 2010 14:33:48 GMTX-Powered-By: ASP.NETConnection: closeX-AspNet-Version: 2.0.50727Content-Encoding: deflateCache-Control: privateContent-Type: application/vnd.wap.xhtml+xml; charset=utf-8Content-Length: 1295看到變化了吧。

樣式的考慮
WAP2.0里規(guī)定了WAP CSS規(guī)范，和普通的HTML 的CSS差不多，支持支持的屬性少一些，但像font-weight，background-color，color這些都是支持的，而margin這些經(jīng)我測試在黑莓8310瀏覽器上是不支持的。我們開發(fā)的頁面是給手機用的，所以也就不要用花里胡哨的樣式以及很復雜的布局了，樣式上一般就用加粗和顏色來區(qū)分不同重要程度就行了，布局上一般就是單縱欄的布局，css文件最好使用獨立的文件，這樣手機瀏覽器第一次訪問后可以緩存起來，另外樣式表定義的話死后盡量用偽類，不要用ID，這樣可以少定義一些樣式，減少網(wǎng)絡(luò)流量，而且偽類的名字盡量短一些，以減少HTML頁面的尺寸。

控件的使用
盡量使用簡單的控件，如鏈接，圖片，輸入框，按鈕等基本的控件，如果要顯示數(shù)據(jù)列表，最好自己用Repeter控件自己控制輸出，可以防止生成不必要的代碼。表格也盡量少用，尤其是嵌套表格，雖然支持，但會影響客戶端解析速度。不建議用<p>來實現(xiàn)段落，<p>默認margin不為0，而且css樣式無法把它設(shè)為0，所以在設(shè)計頁面的時候就盡量用<br />和<hr />吧。

從此學習網(wǎng) http://www.