摘要:目前大多數(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,如下
配置瀏覽器文件
在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é)省流量??梢栽贕lobal.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ā)的頁面是給手機用的,所以也就不要用花里胡哨的樣式以及很復(fù)雜的布局了,樣式上一般就用加粗和顏色來區(qū)分不同重要程度就行了,布局上一般就是單縱欄的布局,css文件最好使用獨立的文件,這樣手機瀏覽器第一次訪問后可以緩存起來,另外樣式表定義的話死后盡量用偽類,不要用ID,這樣可以少定義一些樣式,減少網(wǎng)絡(luò)流量,而且偽類的名字盡量短一些,以減少HTML頁面的尺寸。
控件的使用
盡量使用簡單的控件,如鏈接,圖片,輸入框,按鈕等基本的控件,如果要顯示數(shù)據(jù)列表,最好自己用Repeter控件自己控制輸出,可以防止生成不必要的代碼。表格也盡量少用,尤其是嵌套表格,雖然支持,但會影響客戶端解析速度。不建議用<p>來實現(xiàn)段落,<p>默認margin不為0,而且css樣式無法把它設(shè)為0,所以在設(shè)計頁面的時候就盡量用<br />和<hr />吧。