WAP2.0手机网站的开发

admin 建站 暂无评论 1,353 浏览

前一阵帮着学校开发了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

正式开发：

页面必须包含<html>, <head>, <title>和<body> 元素。

 

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.   <title>Hello world</title>
  6. </head>
  7. <body>
  8.   <p>Hello world</p>
  9. </body>
  10. </html>

 

注意：

1.XML声明和字符编码：<?xml version="1.0" encoding="UTF-8"?>

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声明和<html>元素之间。
3.<html>、<head>、<link>、<title>、<body>标签要有，切完全闭合。
4.<p>元素，align属性已经去除，可以通过WAP CSS的text-align属性来设置。
5.若使用<meta/>标签，包含在<head>内
6.WAP浏览器如果不理解则忽略，比如添加作者：<meta name="author" content=“mark"/>
7.Cache Control：
  <meta/>标签的一个应用是控制XHTML MP文件在Cache中的存在周期：
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Cache-Control" content="max-age=0"/>
注意：与设备相关。一些使用不相的方法，一些没有Cache机制。还有一些不支持<meta/>但识别Cache-Control:no-cache的
HTTP头。也可应用于图片的缓存。
现在我给出一个WAP2.0网站的Default页模板

 

[xhtml] view plaincopy

  1. <?xml version="1.0">
  2. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="Cache-Control" content="no-cache"/>
  7. <link rel="icon" href="some image url.png" mce_href="some image url.png"/>                  //icon图标
  8. <title>WAP模板</title>
  9. <mce:style type="text/css"><!--
  10. /*Css Document*/
  11. 我的建议是不要用link的方式外部引入css样式表，因为手机端在解析的时候无法很好的调入外部css文件。
  12. --></mce:style><style type="text/css" mce_bogus="1">/*Css Document*/
  13. 我的建议是不要用link的方式外部引入css样式表，因为手机端在解析的时候无法很好的调入外部css文件。</style>
  14. </head>
  15. <body>
  16.   <p>Hello World</p>
  17. </body>
  18. </html>

 

我再给出一个WAP2.0网站的链接二级页面，区别就是二级页面在xml中就声明UTF-8的编码，而不需要charset属性。

 

[xhtml] view plaincopy

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.   <title>二级页面</title>
  6. </head>
  7. <body>
  8.   <p>Hello World</p>
  9. </body>
  10. </html>

 

前台页面编辑好后，就要进行后台代码的编写。因为我选用的后台语言是.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开发的人员作为一个参考。

 

 

——by mark（我爱CSDN,转载请注明出处）

相关博文

WAP2.0手机网站的开发
赏
标签: