网站制作浅析WAP2.0手机网站的开发

2016-08-08    分类： 网站制作

前一阵帮着学校开发了WAP2.0的手机版学校首页。http://wap.chd.edu.cn

从零基础入门，总体来说上手还是挺容易的，现在就来写一写关于我在wap2.0开发中遇到的问题，一来记录一下自己进行的第一个项目，二来也是给大家做一个参考，因为WAP2.0还算是比较新的东西，可参考的资料比较少。我在开发初期根本无从下手，无法找到大量的相关的准确资料，大多数在网上找到的都是一些不经过实践的copy文章，许多东西根本行不通。

WAP网站分为WAP1.0和WAP2.0，现在比较主流的就是WAP2.0了。和WAP1.0相比，2.0在语法和习惯上更贴近于web页面开发语言HTML。所以对于web设计师来说，开发WAP站点很容易上手，至于WAP1.0，目的是为了兼容比较旧的手机或者一些国产机，选用的WML语言，并且采用Deck（卡片）的方式来构建网站，需要重头开始学。不过基本上08年后生产的手机，都可以解析WAP2.0的语言（XHTML-MP）。

首先平台的搭建选用的是 IIS6.0+.NET(c#)+XHTML(MP)+SQL2005,分别是服务器，后台代码语言，前台页面语言和数据库。

测试平台可以选用手机终端或者web浏览器。WAP1.0的网站不支持用web浏览器访问，不过可以用Opera浏览器来测试，Opera是我所知道的唯一一款可以直接访问WAP1.0网站的浏览器。WAP2.0网站的优点是手机端和web端都可以进行访问。但在测试的时候，由于用手机访问，必须要进行域名解析正式发布后，才可以访问的到，所以一般都用web浏览器测试。不过需要注意一个很重要的问题：手机终端只支持非常非常非常简单的Javascript脚本，所以千万不可在搭建WAP2.0站运用过多的Javascript效果以及控件（因为控件的原理大多数是Javascript）。最棘手的一个问题就是，当你在web浏览器端测试时是正常的，但是用手机端来访问时，就出现无法预计的错误，造成这种情况的原因大多数就是由于无法解析相关的Javascript。这时，我推荐大家一款模拟器，Openwave V7，这是一款模拟手机的终端，当你在模拟器上可以成功访问到你所搭建的WAP网站时，就证明这个网站真正的手机端是可以访问的了。

下面我们来进入正题，构建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特有的扩展。可以很简单的改变XHTML MP页面的布局和风格。

    • IIS管理器中添加MIME类型扩展

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

      2.动态生成MIME类型。获得HTTP请求中的accept header信息。

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

      正式开发：

      页面

      必须包含, , 和 元素。

      [xhtml] view plaincopyprint?

    •   
    •   
    •   
    •   
    •   Hello world  
    •   
    •   
    •   

      Hello world

        
    •   
    •    

      • 注意：

      1.XML声明和字符编码：

         UTF-8/16编码可省略。XML声明也不是必须的，但如果忽略在许多WAP浏览器中出错。

         虽然我们搭建的是中文网站，但我们也要声明charset=utf-8而不是GB2312，原因是手机端的解析标准多样，选择utf-8的时候可以大限度确保手机端的兼容性，我在搭建网站的初期用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属性已经去除，可以通过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>现在我给出一个WAP2.0网站的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网站的链接二级页面，区别就是二级页面在xml中就声明UTF-8的编码，而不需要charset属性。

      [xhtml] view plaincopyprint?

      1.   
      2.   
      3.   
      4.   
      5.   二级页面  
      6.   
      7.   
      8.   

        Hello World

          
      9.   
      10.   

       

      前台页面编辑好后，就要进行后台代码的编写。因为我选用的后台语言是.NET(C#)，所以支持一些方便的控件，例如Label，Button，但是复杂控件就不支持，比如LinkButton，手机端根本无法解析，所以具体情况还要在开发过程中自己实践。

       

      接下来是发布，我用的是WinServer2003，IIS6.0，必须以新建网站的形式进行发布，并且添加一个独立的应用程序池。切不可用虚拟目录――>应用程序的方式进行发布，因为这样是挂在主域名下的一个子目录，而我们需求的是一个全新的具有二级域名的WAP网站（比如是http://wap.chd.edu.cn，而不是http://chd.edu.cn/wap)，这里就涉及到一个IP地址和域名解析的问题，就不具体讲解了。另外在新建网站时有许多的权限问题，比如文件夹要具有IIS的访问权限，要有WebServer的权限，这里可以参考我的另一篇文章。

      到这里WAP2.0网站的建设就基本入手。希望这篇文章可以给需要进行WAP2.0开发的人员作为一个参考。

      文章题目：网站制作浅析WAP2.0手机网站的开发
      分享URL：https://www.cdcxhl.com/news/39170.html

      网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站制作等

      广告

      声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

      猜你还喜欢下面的内容

      微信小程序开发

      网站制作知识

      同城分类信息