WAP2.0手机网站的开发

前一阵帮着学校开发了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声明和字符编码:<?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页模板

       

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

       

      前台页面编辑好后,就要进行后台代码的编写。因为我选用的后台语言是.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,转载请注明出处)

       

        • 0
          点赞
        • 10
          收藏
          觉得还不错? 一键收藏
        • 15
          评论
        评论 15
        添加红包

        请填写红包祝福语或标题

        红包个数最小为10个

        红包金额最低5元

        当前余额3.43前往充值 >
        需支付:10.00
        成就一亿技术人!
        领取后你会自动成为博主和红包主的粉丝 规则
        hope_wisdom
        发出的红包
        实付
        使用余额支付
        点击重新获取
        扫码支付
        钱包余额 0

        抵扣说明:

        1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
        2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

        余额充值