wap网页制作教程.docx

wap网页制作教程.docx

《wap网页制作教程.docx》由会员分享，可在线阅读，更多相关《wap网页制作教程.docx（16页珍藏版）》请在冰豆网上搜索。

wap网页制作教程

第一节：

　WAP的潜能

　　这些日子，我们常听到WAP技术，一种手机上网的技术。

从技术上讲，移动电话不可能和PC来竞争，移动电话的屏幕只能容下

很少的字符，它的带宽也是很受限制，而且输入也很笨拙。

那我为什么还要介绍它了，嘿嘿，这里有两个主要的我认为WAP一定有

成功的因素。

随处性:

　　只要你有手机，你到哪里都可以访问wap网站。

帐单机构:

　　在不久的将来，我们就能通过我们的手机来支付我们的一切费用，查询很多的信息。

只是我们的手机费用中又多了一项费

用"WAP服务费"。

　　这样我们就能用手机支付我们的商品费用，信用卡都不用了，它一定能够成为新消费方式。

第二节：

WAP基础

　　WAP（WirelessApplicationProtocol）v1.1是一种开放性规范,它试图规范移动电话访问信息和服务行业。

这个规范是由

WAPForum来开发的，一个民间组织。

1.2版本的WAP协议将会被认为是最后的WAP规范。

　　关于wap最基本的概念就是重复利用internet协议，这个协议必须很清楚地在现有的技术上轻松地调用wap服务。

　　WAP协议利用一种很像我们电脑网络的分层结构。

较低层次不太像我们常用的web应用，但是顶层还是我们的老朋友----HTTP。

数据一样是从服务器上发出，从服务器上接收，信息能够储存在服务器上，调用也可能用CGI,也可以用其它的方法，比如ASP.也就

是说只要你会ASP，那么你就可以在轻松地写出你的第一个WAP应用程序了。

　　当然，就手机的带宽和用户能力方面来看，手机需要不同（更严格）的设备，所以在目前的条件下HTML就不能适应WAP所能提

供的带宽。

　　WAPForum的定位是WML（WirelessMark-upLanguage）,一种xml格式的语言。

WML是精简的HTML。

　　WAPForum同时也指定了WMLScript,很像javascript，只是用于手机而已，它能够处理客户端的程序。

第三节：

WML

　　尽管我已经讲解了手机与服务器的通讯，但是真正的客户端不是手机。

一个软件（wapgateway）,实际上允当了这个角色。

它

将手机的请求转换为HTTP请求，同时也将服务器的回应返回给手机，WML文件此时就被WAPGateWay编译成二进制文件。

尽管有些

WAPgeteway能够将HTML直接转换为WML，但是也不要指望它们能任意地将HTML转换为我们在手机上能看懂的东东。

　　当然，仿真器就不需要WAPgateway来工作了，它会直接从服务器下载WML文件（或者直接在本地机上打开WML）,同时将它显示

在手机的屏幕上。

图一WAP结构

　　WAP仿真器

　　为了使用WAP服务，像吾等穷人买不起手机，就需要一个wap仿真器。

你可以去Nokiawebsite下载一个NokiaToolkit

1.2,同时你也得装上JavaVirtualMachine1.2.2，可以免费从SUN公司下载，这里是个例子。

　　WML结构

一个WML文档是由板块组成的，一个板块包含有许多的卡片。

在实际中，你可以把一个板块看成一个由许多有名字的标签组成的

HTML。

手机下载一个完整的板块，但是在一次只能显示一个卡片。

通过链接浏览不同的地方。

我们将会看到一个简单的WML文档，你得懂点最基本的XML。

xmlversion="1.0"?

>

DOCTYPEWMLPUBLIC"-//WAPFORUM//DTDWML1.1//EN""http:

//www.wapforum.org/DTD/wml_1.1.xml">

--rootelement-->

--卡片只能支持p和do块-->

Thisisthefirstcard.

Thisisthesecondcard.

一旦手机接收了这个块，它就会显示第一个卡片，当你按下左边的软键时，就会看到第二个卡片。

WML基本的语言

"p"element

作用与HTML一样,只是如果你想显示文字这个就是必须的。

"do"element

实际上每个WAP应用必须支持导航条。

do标签最主要的type属性的值就是accept,这个意味着当你按下软键一个新的选项会被加到列

表中来。

label属性指定显示的文字。

另外是一些选项：

go-导航到另外一个卡片或板块中去。

他需要href属性。

prev-导航到上一个卡片中去

refresh-刷新显示。

noop-无

Anchor

作用和HTML中的一样的。

在WML中Anchor链接的作用和do差不多，唯一的不同就是Anchor不以选项的形式显示。

Gotocard2

变量

WML结合变量的办法有一点不同于HTML和javascript。

WML的变量不仅可以被WMLScript来调用，还可以通过card直接用于WML文

档。

换句话说就是变量不仅可以由用户直接输入，同时也可以由setvar元素来设置。

当然变量能够被脚本来操作，但这个不是必须

的！

这个观点必须被更进一步的强调和阐明。

例如，你可能需要一个card来获得用户的名字，下一个card就显示"Hello,飞刀",我

们就可以这样"Hello,$（firstname）",有点像PHP,是不是，这个在传统的HTML中是不可能办到的！

既然变量的值能够在各个card之间保存，那么它们就经常被用于保存状态信息，支持一些复杂的交互式WAP服务。

这种方法的一个

问题就是当整个deck不得不重新引用时，这些状态可能与用户的浏览不能保持同步。

所以，一些事件和属性就被用来捕获这些事件

（onenterofrward和onenterbackward）.刷新则根据一些变量的值被用做更新card.

用户输入

当然，为了使你的页面变得更加的强大，变量就需要储存（接收）用户的标准输入。

这一切通过一些类似于HTML的元素来完成.

input-很像HTML,用户通过手机的键盘来输入。

你能够想像，这种输入就不像我们使用PC上的键盘一样实用，所以我们应当尽量

简化这种输入方式，有可能尽量使用select元素来供用户选择。

name属性是这个变量的名字，缺省值和大小的属性显然也是必须

的。

format为输入入口指定了一个输入面具。

其它的请查看其它资料，在这我就不一一讲述了！

select/option-用户选项的列表。

同样也很像HTML:

EyesWideShut

NottingHill

:

BuenaVistaSocialClub

multiple=true属性告诉用户代理（浏览器）多项选择是被允许的.onpick事件发生于一个选项被选择/被取消时.

Postfield-很像html中的hidden属性，它将不显示在屏幕中。

它能同时将name与value传送给服务器.

Fieldset-包含一大堆的信息强迫手机在一个屏幕中显示，当然这得看手机的能力了

其它的元素

img元素也同样被支持，但是你得使用一种特殊的图片格式，名叫WBMP.因为WAP手机拥有有限的内存和储存空间。

这种新的格式能

够让WAP设备快速的理解和生成图片。

Wirelessbitmaps的生成，可以通过下载一个Photoshop和PaintShopPro的插件就可以搞

定了。

最后大家要记住在你的服务器上设置正确的MIME类型，下面我列出了所有与WAP有关的MIME:

wmltext/vnd.wap.wml

wmlcapplication/vnd.wap.wmlc

wmlscapplication/vnd.wap.wmlscriptc

wmlscripttext/vnd.wap.wmlscript

wstext/vnd.wap.wmlscript

wscapplication/vnd.wap.wmlscriptc

wmlstext/vnd.wap.wmlscript

wbmpimage/vnd.wap.wbmp

一些传统的强调元素也被支持，比如:

em,i,b,small,strong等等,用法也和HTML一样。

BR也同样被支持，不过写法有点不同，毕竟

是XML嘛,要写成这样

最后我们来看看time对象和ontimer事件,time对象保存着至card被调用至今的时间，如果我们定了ontimer事件，那么ontimer事

件就会被激发.

还有很多我也懒得写了，希望对你们建设WML网页没有什么影响.

WAP的开发问题

很不幸的是，事情并不是我们想像的那么简单，不同的WAP手机总是有一些小的不同的地方，就像M$的Javascript与NS的不同一

样。

例如，NoKia7710这样第一部在挪威出售的WAP手机，就不能正确的支持POST方法。

另一个限制就是deck的大小的问题。

有些手机（Nokia7110）就是不支持超过1.4K的WML文档，WAP网关能够将你的WML文档压缩成更

小的二进制格式，但是你也不要希望奇迹出现。

这时不仅是Nokia7110支持的东东不能显示，一些强调标帜也被忽略了，另外

fieldset标帜也很轻松地被它忽略了，是不是很烦！

？

嘿嘿，当你在仿真器上做出很cool的页面，然后再到手机上一看，嘿嘿，砸

了手机是你的第一选择.

虽然NokiaToolkit1.2仿真器上支持cookies,但是第一批WAP手机就是不支持，这就意味着你将和你的ASP中的Session，说再

见，至少也是很长的一段时间在上一节中，我讲解了最基本的WAP和WML的概念，这一节我们就来看看ASP和WAP是如何结合的.

第四节：

另一种预订你电影票的方法

现在在奥斯陆，电影院提供了一种基于电话系统的来销售门票，这个系统是很复杂的，还必须给用户一些说明才能指导用户买票，

而且用户还必须在报纸上找到某种电影的代码，这个很烦，我们来介绍另一种方法。

这里这将给你展示一个简单的让手机用户订票的WAP应用：

一个肯定让人叫好的服务。

用户不必记住那些烦人的代码，他们能够直接

从菜单中选取电影和电影院，并且用户也不需要认证。

在这个例子中用户被要求在电影开始前40分钟交费，但是在真正的生活中，

用户同样可以通过手机来结帐.

此应用程序想像的条件是一个电影能够在同一时间在多个电影院上映，一个电影院不同的时间上演不同的电影。

这里我没有过多的考虑错误处理的问题，因为这不是本章节的重点，你喜欢你可以自己加上.

为了简单，我使用了Access97来做为数据库，当然真正的系统不会用它了，其它的数据库如SQLServer，也不必改动多少代码.

数据库图表

数据库图表

.Movie和Theater表是显然需要的。

Show表用于追踪现在还有多少空位可以出售。

怎样调试这个程序

为了访问这个WAP服务，你需要一个WAP仿真器，这个程序主要是在NokiaToolkit1.2上调试，详细情况请查看上一章节。

选择电影

在list表中选择一个电影:

这里是代码:

--#includefile="conn.asp"--><%

'sendtherightMIMEtype

Response.ContentType="text/vnd.wap.wml"

第一件事就是声明wml,仿真器如何不在正确的地方声明XML，它是不会接受WML的尽管Nokia7110可以忽略这一点，但是不能保证

其它的手机也行，所以你不得不做这事。

同样你也得设置好MIME类型。

xmlversion="1.0"?

>

DOCTYPEwmlPUBLIC"-//WAPFORUM//DTDWML1.1//EN""http:

//www.wapforum.org/DTD/wml_1.1.xml">

在进入下一个card以前会有一个闪烁的屏幕来显示一个图片WBMP一种新的格式。

这个事件是由timer属性决定的，这里我们设置的

时间为5秒.ontimer事件引发后将带你去另一个card.（wmbp的Photoshop插件可以从网上免费下载）.

<%

sqlQuery="SELECT[Movie_ID],[title]FROMMovie"

setrsMovies=conn.Execute（SQLquery）

:

%>

<%

DowhilenotrsMovies.eof

response.write（""&rsMovies（"title"）&""&vbcrlf）

rsMovies.MoveNext

loop%>

这一部分是本文的焦点。

从数据库中读出需要的数据显示出来，作为一个asp程序员，这个没有什么特别的，但是就是这个简单的程

序现在被用于一种全新的服务器就显得不一样了。

这也使得我更加认为在基于WML的商业站的网络编程asp更胜于Javaservlet.

">Next

表单的提交也可以通过软开关函数（do和anchor）来完成。

在这里，我是通过简单的内嵌链接来完成的，因为我觉得这样能够使用

户感觉直观和友好。

Postfields大至和HTML中的hidden差不多，但是wml的变量不像html中的那样需要在javascript中传送，它

可以直接写在wml中，这一点上一节已经讲解了.在这里的传递的方法是get,post方法在WAP的规范也是被支持的，仿真器也能识别

它，但是很不幸，在Nokia7110中，这个post不被支持，所以你没得选择.

选择电影院和上映时间

这部分代码让用户来选择看什么时间的电影，所有的记录根据前一页所选的电影来决定。

在这里来选择电影院和上映时间.

movie_id=Request（"movie"）

sqlQuery="SELECTtitleFROMmovieWHEREMovie_id="&movie_id

setrsMovie=conn.Execute（sqlQuery）

movie_title=rsMovie（"title"）

:

sqlQuery="SELECT[name],[time],[show_id]FROMShow,Theater"&_

"WHEREshow.movie_id="&movie_id&_

"ANDtheater.theater_id=show.theater_id"

setrsShows=conn.Execute（SQLquery）

如果你仔细研究了这个代码，你就会想用Session来保存电影信息，再在这页进行查询更简单。

同样很不幸，Session是需要

cookies的支持,虽说在WAP规范中也是被支持的，但是在Nokia7110中也是不被支持,这就是说现在我们还不能把session用在WAP

服务中。

下面有一些有趣的事情:

<%

DowhilenotrsShows.eof

response.write（""&Left（rsShows（"name"）,cutter）&"（"&

rsShows（"time"）&"）"&""&vbcrlf）

rsShows.MoveNext

loop%>

如果你对cutter变量感到疑惑，那么就有一些事让你哭笑不得

Dimcutter

ifInStr（Request.ServerVariables（"HTTP_USER_AGENT"）,"Nokia7110"）then

cutter=12

else

cutter=7

endif

这段代码根据不同的设备来显示选项。

我们有充足的理由的这样做，NokiaToolit1.2仿真器喜欢把砍掉我的的选项到只有几个字

符，而我们要显示电影名字和上映时间，所以我们就不得不减少电影名字的字符。

在真的手机中不会出现这种问题，所以我们就必

须先判断设备的类型.

一旦我有机会（飞刀我很穷，没有钱，这是仅仅是遥远的梦想.......）在真的Nokia7110上测试我的代码，我们会立即感到我们

有比我们想像更大的屏幕。

实际上,有些电影院的名字很古怪，而且这些长名字会占用很大屏幕空间，我们没有必要浪费这些显示空

间,尽量把这些名字简化。

票

下一步就是让用户选择需要的票数.这部分的代码很像其它的部分。

我将从数据库中查询相同的数据，因为Session不能在真正的

WAP手机中使用，所以我必须对有些内容进行确认，看看是否还有座位出售.

SQLquery="SELECT*FROMshowWHEREShow_id="&show_id

setrsShow=conn.Execute（SQLquery）

:

seats=rsShow（"free_seats"）

:

ifseats=0then

Response.write（"Sorry,nomoreseats"）

rsShow.close

setrsShow=nothing

Response.write（"