前一阵帮着学校开发了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手机网站的开发
标签: