前一阵帮着学校开发了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）
-
由于XHTML MP是XHTML的一个子集，所以必须严格遵守XHTML的语法。
-
标签必须完全闭合。
-
标签和属性必须小写。
-
属性值必须包含在引号标记内。
-
不允许无属性值存在。
-
标签必须完全嵌套。
-
页面CSS的选择WCSS（WAP CSS /WAP Cascading Style Sheet）
-
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
正式开发：
页面必须包含, , </span><span>和</span><span><body> </span><span>元素。</span>
</p>
<p>
<span style="font-family:monospace;"><span style="white-space:pre-wrap;">
<div class="dp-highlighter bg_xhtml">
<div class="bar">
<div class="tools">
<b>[xhtml]</b> view plaincopyprint?
</div>
</div>
<ol class="dp-xml">
<li class="alt">
<span><span class="tag"><?</span><span class="tag-name">xml</span><span> </span><span class="attribute">version</span><span>=</span><span class="attribute-value">"1.0"</span><span> </span><span class="attribute">encoding</span><span>=</span><span class="attribute-value">"UTF-8"</span><span class="tag">?></span><span> </span></span>
</li>
<li>
<span><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"</span><span class="tag">></span><span> </span></span>
</li>
<li class="alt">
<span></span><span class="tag"><</span><span class="tag-name">html</span><span> </span><span class="attribute">xmlns</span><span>=</span><span class="attribute-value">"http://www.w3.org/1999/xhtml"</span><span class="tag">></span><span> </span></span>
</li>
<li>
<span></span><span class="tag"><</span><span class="tag-name">head</span><span class="tag">></span><span> </span></span>
</li>
<li class="alt">
<span> </span><span class="tag"><</span><span class="tag-name">title</span><span class="tag">></span><span>Hello world</span><span class="tag"></</span><span class="tag-name">title</span><span class="tag">></span><span> </span></span>
</li>
<li>
<span></span><span class="tag"></</span><span class="tag-name">head</span><span class="tag">></span><span> </span></span>
</li>
<li class="alt">
<span></span><span class="tag"><</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span>
</li>
<li>
<span> </span><span class="tag"><</span><span class="tag-name">p</span><span class="tag">></span><span>Hello world</span><span class="tag"></</span><span class="tag-name">p</span><span class="tag">></span><span> </span></span>
</li>
<li class="alt">
<span></span><span class="tag"></</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span>
</li>
<li>
<span></span><span class="tag"></</span><span class="tag-name">html</span><span class="tag">></span><span> </span></span>
</li>
</ol>
</div>
<textarea style="display:none;" class="xhtml" rows="15" cols="50" name="code"><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>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>标签要有，切完全闭合。
</div>
<div>
<div>
4.<p>元素，align属性已经去除，可以通过WAP CSS的text-align属性来设置。<br />
5.若使用<meta/>标签，包含在<head>内<br />
6.WAP浏览器如果不理解则忽略，比如添加作者：<meta name="author" content=“mark"/><br />
7.Cache Control：
</div>
<div>
<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头。也可应用于图片的缓存。
</div>
<div>
现在我给出一个WAP2.0网站的Default页模板
</div>
<div>
<p>
<div class="dp-highlighter bg_xhtml">
<div class="bar">
<div class="tools">
<b>[xhtml]</b> view plaincopyprint?
</div>
</div>
<ol class="dp-xml">
<li class="alt">
<span><span class="tag"><?</span><span class="tag-name">xml</span><span> </span><span class="attribute">version</span><span>=</span><span class="attribute-value">"1.0"</span><span class="tag">></span><span> </span></span>
</li>
<li>
<span><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"</span><span class="tag">></span><span> </span></span>
</li>
<li class="alt">
<span></span><span class="tag"><</span><span class="tag-name">html</span><span> </span><span class="attribute">xmlns</span><span>=</span><span class="attribute-value">"http://www.w3.org/1999/xhtml"</span><span class="tag">></span><span> </span></span>
</li>
<li>
<span></span><span class="tag"><</span><span class="tag-name">head</span><span class="tag">></span><span> </span></span>
</li>
<li class="alt">
<span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">http-equiv</span><span>=</span><span class="attribute-value">"Content-Type"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"text/html; charset=utf-8"</span><span> </span><span class="tag">/></span><span> </span></span>
</li>
<li>
<span></span><span class="tag"><</span><span class="tag-name">meta</span><span> </span><span class="attribute">http-equiv</span><span>=</span><span class="attribute-value">"Cache-Control"</span><span> </span><span class="attribute">content</span><span>=</span><span class="attribute-value">"no-cache"</span><span class="tag">/></span><span> </span></span>
</li>
<li class="alt">
<span></span><span class="tag"><</span><span class="tag-name">link</span><span> </span><span class="attribute">rel</span><span>=</span><span class="attribute-value">"icon"</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"some image url.png"</span><span> </span><span class="attribute">mce_href</span><span>=</span><span class="attribute-value">"some image url.png"</span><span class="tag">/></span><span> //icon图标 </span></span>
</li>
<li>
<span></span><span class="tag"><</span><span class="tag-name">title</span><span class="tag">></span><span>WAP模板</span><span class="tag"></</span><span class="tag-name">title</span><span class="tag">></span><span> </span></span>
</li>
<li class="alt">
<span></span><span class="tag"><</span><span class="tag-name">mce:style</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text/css"</span><span class="tag">></span><span><!-- </span></span>
</li>
<li>
<span>/*Css Document*/ </span>
</li>
<li class="alt">
<span>我的建议是不要用link的方式外部引入css样式表，因为手机端在解析的时候无法很好的调入外部css文件。 </span>
</li>
<li>
<span>--</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">mce:style</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">style</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text/css"</span><span> </span><span class="attribute">mce_bogus</span><span>=</span><span class="attribute-value">"1"</span><span class="tag">></span><span>/*Css Document*/ </span></span>
</li>
<li class="alt">
<span>我的建议是不要用link的方式外部引入css样式表，因为手机端在解析的时候无法很好的调入外部css文件。</span><span class="tag"></</span><span class="tag-name">style</span><span class="tag">></span><span> </span></span>
</li>
<li>
<span></span><span class="tag"></</span><span class="tag-name">head</span><span class="tag">></span><span> </span></span>
</li>
<li class="alt">
<span></span><span class="tag"><</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span>
</li>
<li>
<span> </span><span class="tag"><</span><span class="tag-name">p</span><span class="tag">></span><span>Hello World</span><span class="tag"></</span><span class="tag-name">p</span><span class="tag">></span><span> </span></span>
</li>
<li class="alt">
<span></span><span class="tag"></</span><span class="tag-name">body</span><span class="tag">></span><span> </span></span>
</li>
<li>
<span></span><span class="tag"></</span><span class="tag-name">html</span><span class="tag">></span><span> </span></span>
</li>
</ol>
</div>
<textarea style="display:none;" class="xhtml" rows="15" cols="50" name="code"><?xml version="1.0">
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache"/>
<link rel="icon" href="some image url.png" mce_href="some image url.png"/> //icon图标
<title>WAP模板
Hello World
我再给出一个WAP2.0网站的链接二级页面，区别就是二级页面在xml中就声明UTF-8的编码，而不需要charset属性。
[xhtml] view plaincopyprint?
-
xml version="1.0" encoding="UTF-8"?>
-
>
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<title>二级页面title>
-
head>
-
<body>
-
<p>Hello Worldp>
-
body>
-
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开发的人员作为一个参考。
文章由西安网站建设公司 收集整理 www.xadzwl.com 西安网络公司知名品牌
您当前位置：首页>建站知识
品牌网站建设