wap网页制作教程.docx

1、wap网页制作教程第一节：WAP的潜能这些日子，我们常听到WAP技术，一种手机上网的技术。从技术上讲，移动电话不可能和PC来竞争，移动电话的屏幕只能容下很少的字符，它的带宽也是很受限制，而且输入也很笨拙。那我为什么还要 介绍它了，嘿嘿，这里有两个主要的我认为WAP一定有成功的因素。随处性:只要你有手机，你到哪里都可以访问wap网站。 帐单机构: 在不久的将来，我们就能通过我们的手机来支付我们的一切费用，查询很多的信息。只是我们的手机费用中又多了一项费用WAP服务费。 这样我们就能用手机支付我们的商品费用，信用卡都不用了，它一定能够成为新消费方式。第二节：WAP基础WAP (Wireless A

2、pplication Protocol) v1.1是一种开放性规范,它试图规范移动电话访问信息和服务行业。这个规范是由WAP Forum来开发的，一个民间组织。1.2版本的WAP协议将会被认为是最后的WAP规范。关于wap最基本的概念就是重复利用internet协议，这个协议必须很清楚地在现有的技术上轻松地调用wap服务。WAP协议利用一种很像我们电脑网络的分层结构。较低层次不太像我们常用的web应用，但是顶层还是我们的老朋友-HTTP。数据一样是从服务器上发出，从服务器上接收，信息能够储存在服务器上，调用也可能用CGI,也可以用其它的方法，比如ASP.也就是说只要你会ASP，那么你就可以在轻

3、松地写出你的第一个WAP应用程序了。当然，就手机的带宽和用户能力方面来看，手机需要不同（更严格）的设备，所以在目前的条件下HTML就不能适应WAP所能提供的带宽。WAP Forum 的定位是WML (Wireless Mark-up Language),一种xml格式的语言。WML是精简的HTML。WAP Forum同时也指定了WMLScript,很像javascript，只是用于手机而已，它能够处理客户端的程序。第三节：WML尽管我已经讲解了手机与服务器的通讯，但是真正的客户端不是手机。一个软件（wap gateway),实际上允当了这个角色。它将手机的请求转换为HTTP请求，同时也将服务器

4、的回应返回给手机，WML文件此时就被WAP GateWay编译成二进制文件。尽管有些WAP geteway能够将HTML直接转换为WML，但是也不要指望它们能任意地将HTML转换为我们在手机上能看懂的东东。当然，仿真器就不需要WAP gateway来工作了，它会直接从服务器下载WML文件（或者直接在本地机上打开WML),同时将它显示在手机的屏幕上。图一WAP 结构WAP 仿真器为了使用WAP服务，像吾等穷人买不起手机，就需要一个wap 仿真器。你可以去Nokia website下载一个 Nokia Toolkit 1.2,同时你也得装上Java Virtual Machine 1.2.2，可以

5、免费从SUN公司下载，这里是个例子。WML 结构一个WML文档是由板块组成的，一个板块包含有许多的卡片。在实际中，你可以把一个板块看成一个由许多有名字的标签组成的HTML。 手机下载一个完整的板块，但是在一次只能显示一个卡片。通过链接浏览不同的地方。我们将会看到一个简单的WML文档，你得懂点最基本的XML。 This is the first card.This is the second card.一旦手机接收了这个块，它就会显示第一个卡片，当你按下左边的软键时，就会看到第二个卡片。WML基本的语言p element作用与HTML一样,只是如果你想显示文字这个就是必须的。do element

6、实际上每个WAP应用必须支持导航条。do标签最主要的type属性的值就是accept,这个意味着当你按下软键一个新的选项会被加到列表中来。label属性指定显示的文字。另外是一些选项：go - 导航到另外一个卡片或板块中去。他需要href 属性。 prev - 导航到上一个卡片中去 refresh - 刷新显示。 noop - 无 Anchor作用和HTML中的一样的。在WML中Anchor链接的作用和do差不多，唯一的不同就是Anchor不以选项的形式显示。Go to card 2变量WML结合变量的办法有一点不同于HTML和javascript。WML的变量不仅可以被WMLScript来调

7、用，还可以通过card直接用于WML文档。换句话说就是变量不仅可以由用户直接输入，同时也可以由setvar元素来设置。当然变量能够被脚本来操作，但这个不是必须的！这个观点必须被更进一步的强调和阐明。例如，你可能需要一个card来获得用户的名字，下一个card就显示Hello,飞刀,我们就可以这样Hello,$(firstname),有点像PHP,是不是，这个在传统的HTML中是不可能办到的！既然变量的值能够在各个card之间保存，那么它们就经常被用于保存状态信息，支持一些复杂的交互式WAP服务。这种方法的一个问题就是当整个deck不得不重新引用时，这些状态可能与用户的浏览不能保持同步。所以，一

8、些事件和属性就被用来捕获这些事件（onenterofrward 和 onenterbackward).刷新则根据一些变量的值被用做更新card.用户输入当然，为了使你的页面变得更加的强大，变量就需要储存（接收）用户的标准输入。这一切通过一些类似于HTML的元素来完成.input - 很像HTML,用户通过手机的键盘来输入。你能够想像，这种输入就不像我们使用PC上的键盘一样实用，所以我们应当尽量简化这种输入方式，有可能尽量使用select元素来供用户选择。name属性是这个变量的名字，缺省值和大小的属性显然也是必须的。format为输入入口指定了一个输入面具。其它的请查看其它资料，在这我就不一一

9、讲述了！ select/option - 用户选项的列表。同样也很像HTML: Eyes Wide ShutNotting Hill:Buena Vista Social Clubmultiple=true属性告诉用户代理（浏览器）多项选择是被允许的. onpick事件发生于一个选项被选择/被取消时. Postfield - 很像html中的hidden属性，它将不显示在屏幕中。它能同时将name与value传送给服务器. Fieldset - 包含一大堆的信息强迫手机在一个屏幕中显示，当然这得看手机的能力了 其它的元素img元素也同样被支持，但是你得使用一种特殊的图片格式，名叫WBMP.因为

10、WAP手机拥有有限的内存和储存空间。这种新的格式能够让WAP设备快速的理解和生成图片。Wireless bitmaps的生成，可以通过下载一个Photoshop和Paint Shop Pro的插件就可以搞定了。最后大家要记住在你的服务器上设置正确的MIME类型，下面我列出了所有与WAP有关的MIME:wml text/vnd.wap.wmlwmlc application/vnd.wap.wmlcwmlsc application/vnd.wap.wmlscriptcwmlscript text/vnd.wap.wmlscriptws text/vnd.wap.wmlscriptwsc app

11、lication/vnd.wap.wmlscriptcwmls text/vnd.wap.wmlscriptwbmp image/vnd.wap.wbmp一些传统的强调元素也被支持，比如:em,i,b,small,strong等等,用法也和HTML一样。BR也同样被支持，不过写法有点不同，毕竟是XML嘛,要写成这样最后我们来看看time对象和ontimer事件,time对象保存着至card被调用至今的时间，如果我们定了ontimer事件，那么ontimer事件就会被激发. 还有很多我也懒得写了，希望对你们建设WML网页没有什么影响.WAP 的开发问题很不幸的是，事情并不是我们想像的那么简单，不

12、同的WAP手机总是有一些小的不同的地方，就像M$的Javascript与NS的不同一样。例如，NoKia 7710这样第一部在挪威出售的WAP手机，就不能正确的支持POST方法。另一个限制就是deck的大小的问题。有些手机(Nokia 7110)就是不支持超过1.4K的WML文档，WAP网关能够将你的WML文档压缩成更小的二进制格式，但是你也不要希望奇迹出现。这时不仅是Nokia 7110支持的东东不能显示，一些强调标帜也被忽略了，另外fieldset标帜也很轻松地被它忽略了，是不是很烦！？嘿嘿，当你在仿真器上做出很cool的页面，然后再到手机上一看，嘿嘿，砸了手机是你的第一选择.虽然Noki

13、a Toolkit 1.2仿真器上支持cookies,但是第一批WAP手机就是不支持，这就意味着你将和你的ASP中的Session，说再见，至少也是很长的一段时间在上一节中，我讲解了最基本的WAP和WML的概念，这一节我们就来看看ASP和WAP是如何结合的.第四节：另一种预订你电影票的方法现在在奥斯陆，电影院提供了一种基于电话系统的来销售门票，这个系统是很复杂的，还必须给用户一些说明才能指导用户买票，而且用户还必须在报纸上找到某种电影的代码，这个很烦，我们来介绍另一种方法。 这里这将给你展示一个简单的让手机用户订票的WAP应用：一个肯定让人叫好的服务。用户不必记住那些烦人的代码，他们能够直接从

14、菜单中选取电影和电影院，并且用户也不需要认证。在这个例子中用户被要求在电影开始前40分钟交费，但是在真正的生活中，用户同样可以通过手机来结帐. 此应用程序想像的条件是一个电影能够在同一时间在多个电影院上映，一个电影院不同的时间上演不同的电影。 这里我没有过多的考虑错误处理的问题，因为这不是本章节的重点，你喜欢你可以自己加上. 为了简单，我使用了Access 97来做为数据库，当然真正的系统不会用它了，其它的数据库如SQL Server，也不必改动多少代码.数据库图表数据库图表.Movie 和Theater表是显然需要的。Show表用于追踪现在还有多少空位可以出售。怎样调试这个程序为了访问这个W

15、AP服务，你需要一个WAP仿真器，这个程序主要是在Nokia Toolkit 1.2上调试，详细情况请查看上一章节。选择电影在list表中选择一个电影:这里是代码:% send the right MIME typeResponse.ContentType = text/vnd.wap.wml 第一件事就是声明wml,仿真器如何不在正确的地方声明XML，它是不会接受WML的尽管Nokia 7110可以忽略这一点，但是不能保证其它的手机也行，所以你不得不做这事。同样你也得设置好MIME类型。在进入下一个card以前会有一个闪烁的屏幕来显示一个图片WBMP一种新的格式。这个事件是由timer属性决

16、定的，这里我们设置的时间为5秒.ontimer事件引发后将带你去另一个card.(wmbp的Photoshop插件可以从网上免费下载).%Do while not rsMovies.eofresponse.write( & rsMovies(title) & & vbcrlf)rsMovies.MoveNextloop %这一部分是本文的焦点。从数据库中读出需要的数据显示出来，作为一个asp程序员，这个没有什么特别的，但是就是这个简单的程序现在被用于一种全新的服务器就显得不一样了。这也使得我更加认为在基于WML的商业站的网络编程asp更胜于Java servlet. Next表单的提交也可以通

17、过软开关函数(do 和 anchor)来完成。在这里，我是通过简单的内嵌链接来完成的，因为我觉得这样能够使用户感觉直观和友好。Postfields大至和HTML中的hidden差不多，但是wml的变量不像html中的那样需要在javascript中传送，它可以直接写在wml中，这一点上一节已经讲解了.在这里的传递的方法是get,post方法在WAP的规范也是被支持的，仿真器也能识别它，但是很不幸，在Nokia 7110中，这个post不被支持，所以你没得选择.选择电影院和上映时间这部分代码让用户来选择看什么时间的电影，所有的记录根据前一页所选的电影来决定。在这里来选择电影院和上映时间.movi

18、e_id = Request(movie)sqlQuery = SELECT title FROM movie WHERE Movie_id = & movie_id set rsMovie = conn.Execute(sqlQuery)movie_title = rsMovie(title):sqlQuery = SELECT name, time, show_id FROM Show, Theater &_WHERE show.movie_id = & movie_id &_ AND theater.theater_id = show.theater_idset rsShows = co

19、nn.Execute(SQLquery)如果你仔细研究了这个代码，你就会想用Session来保存电影信息，再在这页进行查询更简单。同样很不幸，Session是需要cookies的支持,虽说在WAP规范中也是被支持的，但是在Nokia 7110中也是不被支持,这就是说现在我们还不能把session用在WAP服务中。 下面有一些有趣的事情:%Do while not rsShows.eofresponse.write( & Left(rsShows(name),cutter) & ( & rsShows(time) & ) & &vbcrlf)rsShows.MoveNextloop %如果你对c

20、utter变量感到疑惑，那么就有一些事让你哭笑不得Dim cutterif InStr(Request.ServerVariables(HTTP_USER_AGENT), Nokia7110) thencutter = 12else cutter = 7end if这段代码根据不同的设备来显示选项。我们有充足的理由的这样做，Nokia Toolit 1.2仿真器喜欢把砍掉我的的选项到只有几个字符，而我们要显示电影名字和上映时间，所以我们就不得不减少电影名字的字符。在真的手机中不会出现这种问题，所以我们就必须先判断设备的类型.一旦我有机会（飞刀我很穷，没有钱，这是仅仅是遥远的梦想.)在真的Nok

21、ia 7110上测试我的代码，我们会立即感到我们有比我们想像更大的屏幕。实际上,有些电影院的名字很古怪，而且这些长名字会占用很大屏幕空间，我们没有必要浪费这些显示空间,尽量把这些名字简化。票下一步就是让用户选择需要的票数.这部分的代码很像其它的部分。我将从数据库中查询相同的数据，因为Session不能在真正的WAP手机中使用，所以我必须对有些内容进行确认，看看是否还有座位出售.SQLquery = SELECT * FROM show WHERE Show_id = & show_id set rsShow = conn.Execute(SQLquery):seats = rsShow(fre

22、e_seats):if seats = 0 thenResponse.write(Sorry, no more seats)rsShow.closeset rsShow = nothingResponse.write()Response.endelseif seats 6 then book up to 6 tickets or max availablemax_seats=6else max_seats = seatsend ifend if% at %dim ii = 1Do while i = max_seats response.write( & i & ticket(s) & &vb

23、crlf)i = i 1loop %储存票数现在我们已经有了所有需要的数据了，我们得把它们保存起来:tickets = Request(ticket) :free_seats = rsShow(free_seats):free_seats = free_seats - tickets:SQLUpdate = UPDATE Show &_SET Show.free_seats= & free_seats & &_ WHERE Show_ID= & show_idconn.Execute(SQLupdate)SQLquery = SELECT max(Booking_ID) as bookingn

24、umber FROM bookingSet rsBooking = conn.execute(SQLquery)maxbookid = rsBooking(bookingnumber) 1SQLinsert = INSERT INTO Booking ( show_id, booked_seats ) & _VALUES ( & show_id & , & tickets & )conn.Execute(SQLinsert) %You have booked ticket(s) for The show will take place at ()Your reference number is 下面是显示:Figure 4:完成交易.交易已经完成了，电影院可以坐着电影院门口收钱了.结论WAP现在才刚刚走出它的第一步，然而它是最近几年内最有革命性的IT发展之一。在这篇文章中我介绍了怎样用asp写WAP应用程序,并对你们提出了一些警告，希望对你们以后的发展有用。多媒体技术依然不能太多的用于WAP,但是它的可移动性却是重要的，也为商家提供了不少的商机。