zoukankan      html  css  js  c++  java
  • 蛙蛙推荐:使用ASP.NET开发WAP2.0(XHTML MP)页面

    摘要:目前大多数手机已经不仅仅支持WAP1.0(WML),而是支持WAP2.0(XHTML MP)了,甚至有些手机不久就要支持HTML5了。本文演示如何用ASP.NET 开发WAP2.0页面,查阅了一些资料,整理分享给大家,希望大家能以后能少走弯路。手机浏览器作为一个人机交互界面,而且手机又有随时随地能使用的优势,我们在这方面是可以大有作为的。

    XHTML MP简介

    WAP2.0有一套规范,XHTML MP是其中用于浏览器显示的规范,底层可以使用HTTP传输,它也是XHTML的一个子集,详细参考如下链接:

    XHTML Mobile Profile

    DOCTYPE设置

    XHTML MP有自己的DOCTYPE,如下

    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"
    "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd"
    >


    可以把它在Master文件里设置,以便在所有内容页里自动使用,而不是每个页面重复的设置。

    配置浏览器文件

    在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节点。

    WebConfig配置

    因为我们开发的网页是面向手机的,手机的功能比较弱,有的甚至不支持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等页面压缩算法,我们应该检测出来这种情况,并让这种手机节省流量。可以在Global.asax里写一段代码支持,该方法来源于网络,引用如下,原始链接参考文末的参考链接

    代码
    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.1
    Host: 114.249.124.57
    Accept: 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.wbmp
    Accept-Charset: ISO-8859-1,UTF-8,US-ASCII,UTF-16BE,windows-1252,UTF-16LE,GB2312,windows-1250
    Accept-Language: zh-CN,zh;q=0.5
    Accept-Encoding: gzip,deflate
    Content-length: 0
    Via: 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.32
    X-Source-ID: BJGGSN06BMT-CSK
    X-Nokia-CONNECTION_MODE: TCP
    X-Up-Bear-Type: GPRS/EDGE
    X-Nokia-gateway-id: NWG/4.1/Build4.1.04
    Connection: close

    HTTP/1.1 200 OK
    Server: Microsoft-IIS/5.1
    Date: Sat, 10 Jul 2010 12:26:43 GMT
    X-Powered-By: ASP.NET
    Connection: close
    X-AspNet-Version: 2.0.50727
    Cache-Control: private
    Content-Type: text/html; charset=utf-8
    Content-Length: 2180

    可以看到这时候给客户端返回的Content-Type是text/html,而且Content-Length很长,是2180,而配置浏览器文件以及启用压缩之后,则如下

    代码
    GET /mobileoaweb/?t=25345&t=36045&t=26421 HTTP/1.1
    Host: 114.249.124.57
    Accept: 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.wbmp
    Accept-Charset: ISO-8859-1,UTF-8,US-ASCII,UTF-16BE,windows-1252,UTF-16LE,GB2312,windows-1250
    Accept-Language: zh-CN,zh;q=0.5
    Accept-Encoding: gzip,deflate
    Cookie: jid=M4GKS9T0hh!-849429530
    Content-length: 0
    Via: 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.123
    X-Source-ID: BJGGSN06BMT-CSK
    X-Nokia-CONNECTION_MODE: TCP
    X-Up-Bear-Type: GPRS/EDGE
    X-Nokia-gateway-id: NWG/4.1/Build4.1.04
    Connection: close

    HTTP/1.1 200 OK
    Server: Microsoft-IIS/5.1
    Date: Sat, 10 Jul 2010 14:33:48 GMT
    X-Powered-By: ASP.NET
    Connection: close
    X-AspNet-Version: 2.0.50727
    Content-Encoding: deflate
    Cache-Control: private
    Content-Type: application/vnd.wap.xhtml+xml; charset=utf-8
    Content-Length: 1295

    看到变化了吧。

    样式的考虑

    WAP2.0里规定了WAP CSS规范,和普通的HTML 的CSS差不多,支持支持的属性少一些,但像font-weight,background-color,color这些都是支持的,而margin这些经我测试在黑莓8310浏览器上是不支持的。我们开发的页面是给手机用的,所以也就不要用花里胡哨的样式以及很复杂的布局了,样式上一般就用加粗和颜色来区分不同重要程度就行了,布局上一般就是单纵栏的布局,css文件最好使用独立的文件,这样手机浏览器第一次访问后可以缓存起来,另外样式表定义的话死后尽量用伪类,不要用ID,这样可以少定义一些样式,减少网络流量,而且伪类的名字尽量短一些,以减少HTML页面的尺寸。

    控件的使用

    尽量使用简单的控件,如链接,图片,输入框,按钮等基本的控件,如果要显示数据列表,最好自己用Repeter控件自己控制输出,可以防止生成不必要的代码。表格也尽量少用,尤其是嵌套表格,虽然支持,但会影响客户端解析速度。不建议用<p>来实现段落,<p>默认margin不为0,而且css样式无法把它设为0,所以在设计页面的时候就尽量用<br />和<hr />吧。

    参考链接

    Enabling Gzip and Deflate HTTP Compression in ASP.NET pages
    XHTML MP MIME 类型与文件扩展
    Visual Studio 和 ASP.NET 中的 XHTML 标准
    ASP.NET 2.0 / XHTML-MP Examples
    XHTML Mobile Profile

  • 相关阅读:
    SQL注入实验-2021.01.24
    数据库的搭建与基本语句2021-01-24
    Linux
    磁盘配置
    在Vmware中Centos下的Hadoop环境搭建
    Linux系统(CentOS)-2021.1.19
    中间件,JavaScript,PHP及burpSuite暴力破解实验-2021.1.16
    html,css学习笔记-2021.1.15
    第一周学习视频(二)
    第一周学习视频(一)
  • 原文地址:https://www.cnblogs.com/onlytiancai/p/1775056.html
Copyright © 2011-2022 走看看