
先搞懂WML到底是什么——用大白话讲清楚
WML全称“无线标记语言”(Wireless Markup Language),你可以把它理解成“功能机时代的HTML”。早个十几年,诺基亚、摩托罗拉那些功能机上网,靠的就是WML——屏幕小(比如128×160像素)、带宽低(GPRS每秒几KB),HTML太复杂加载不了,WML就简化到只剩核心功能:文本、链接、简单交互。比如你小时候用诺基亚上的“3G门户”,那些只有文字和小蓝链接的页面,就是WML写的。
和HTML比,WML有两个明显特点:一是基于XML(所以标签必须闭合,比如
要对应
),二是用“卡片(Card)”组织内容——一个WML文件可以包含多个Card,就像翻页一样,比如第一页是“登录”,第二页是“个人中心”,点链接就能切换。举个直观的例子:HTML里一个页面是一个.html
文件,WML里一个文件能装好几个“小页面”,省得频繁加载新文件,适合慢网。
我朋友最开始问我:“现在都用HTML5了,学WML还有用吗?”其实还真有——比如做复古手机主题、模拟功能机游戏,或者研究移动web发展史,WML都是基础。而且WML语法简单,学起来快,能帮你理解“移动端适配”的核心逻辑:怎么在有限资源下呈现有用内容。
3个WML简单例子,新手跟着抄就能用
我整理了3个新手最常用的WML例子,都是我朋友当初搭页面时用过的,跟着抄就能跑起来,每一行都给你解释清楚。
例子1:显示基础文本——Hello WML!
先写个最简单的页面,显示两行文字,居中对齐。代码如下:
Hello WML!
这是我的第一个WML页面~
每一行的作用:
:XML声明,告诉浏览器这是XML格式的文件,必须放开头,编码选UTF-8(避免中文乱码);
:WML的DTD(文档类型定义),告诉浏览器“这是WML 1.1版本的文件”,不用改,直接抄;
:WML文件的根标签,所有内容都要包在里面;
:定义一个“卡片”,id
是卡片的唯一标识(后面跳转用),title
是页面标题(显示在功能机顶部);
:段落标签,align="center"
让内容居中——功能机屏幕小,居中看起来更舒服;
:换行,和HTML一样;
、
、
闭合标签(XML要求标签必须成对出现,漏了会报错)。 我朋友第一次写这个例子时,把
写成了
(XML里自闭合标签要加斜杠),结果用模拟器打开时文字挤在一起,后来查了W3C的XML规范才改对——你抄的时候别漏了斜杠,不然换行没用。
例子2:链接跳转——从首页到关于页
接下来写个带链接的页面,点文字就能跳转到另一个“卡片”。代码如下:
<!-
首页卡片 >
欢迎来到我的WML页面!
<!-
关于页卡片 >
这是关于页面~
重点看:
#about
是跳转到当前文件中id="about"
的卡片,和HTML里的锚点链接一样。返回首页用,原理相同。
这里有个小技巧:WML里的链接默认是“下划线+蓝色”(和HTML一样),但功能机屏幕小,你可以加title
属性提示用户,比如,点链接前会弹出提示——我朋友做复古应用时加了这个,用户反馈“更清楚点什么”。
例子3:简单表单——收集用户名字
最后写个带输入框的表单,提交后显示问候语。这是WML里最常用的交互功能,比如早期的“短信订阅”页面。代码如下:
<!-
输入卡片 >
请输入你的名字:
<!-
输入框:类型是文本,名字是username,最多输10个字 >
<!-
确认按钮:type="accept"是“确认”,label是按钮文字 >
<!-
跳转到问候卡片,传递username变量 >
<!-
问候卡片 >
你好,$(username)!
欢迎来到WML的世界~
关键部分解释:
:文本输入框,name
是变量名(后面要用到),maxlength
限制最多输入10个字符;
:“确认”按钮(功能机上的“OK”键对应这个动作),label
是按钮显示的文字;
:点击按钮后跳转到id="greeting"
的卡片;
:把输入的username
变量传递给下一个卡片——WML里变量不会自动传递,必须显式写这行,不然$(username)
会是空的; $(username)
:引用变量的值,比如输入“张三”,这里就会显示“你好,张三!”。 我朋友第一次写这个表单时,漏了,结果提交后显示“你好,!”,查了半天才发现问题——这行是“变量传递的钥匙”,千万别漏。
编辑+测试WML的笨办法,我亲测过不用装复杂软件
写WML不用学复杂工具,我摸出的笨办法就俩:用常用编辑器写代码,用在线工具或模拟器测试,新手也能快速上手。
第一步:用这些编辑器写代码,不用装新软件
WML是文本文件,随便一个文本编辑器都能写,我推荐3个:
我朋友最开始用记事本,写了20行代码就漏了3个闭合标签,后来换成VS Code(装了个“XML Tools”插件),直接自动补全,省心多了。你要是用VS Code,记得把文件后缀存成.wml
——比如“hello.wml”,不然编辑器不会识别为WML文件。
第二步:测试WML的2个笨办法,不用买旧手机
写好代码要测试,总不能找个诺基亚功能机吧?我用了俩办法,都靠谱:
办法1:用在线WML测试工具
直接搜“WML Online Test Tool”,能找到好几个免费工具(比如“WML Test”“WAP Emulator Online”)。用法超简单:把WML代码贴进去,点“运行”,立刻能看到功能机上的效果——比如例子1会显示居中的“Hello WML!”,和真手机一样。
我最爱的是这种工具,不用装软件,有网就能用,而且能实时修改代码实时看效果。比如你改了
,点下“运行”就能看到文字左对齐,比模拟器快10倍。
办法2:装功能机模拟器
要是想更真实,可以装个功能机模拟器,比如:
我装过Nokia PC Suite,模拟诺基亚5300的效果,和真手机几乎一样——就是安装麻烦点,要找旧版本(新版本不支持WAP了)。要是你想做复古应用,追求真实感,可以试试这个。
测试时的3个注意事项,我踩过的坑告诉你
不管用哪种办法测试,这3点一定要注意,不然容易掉坑:
.wml
比如“form.wml”,不然浏览器/模拟器不认——我之前存成“form.txt”,模拟器直接提示“文件类型不支持”; AddType text/vnd.wap.wml .wml
,Nginx里加types { text/vnd.wap.wml wml; }
。要是用在线工具,不用管这个,工具会自动处理。最后给你整理了个常用WML标签表,存下来用到的时候翻:
标签 | 作用 | 例子 |
---|---|---|
WML根标签,所有内容包在里面 | … | |
页面中的“卡片”,一个文件可包含多个 | … | |
段落标签,组织文本 |
Hello! |
|
链接标签,跳转卡片或其他页面 | 去关于页 | |
输入框,收集用户信息 |
你要是按这些例子和方法试了,欢迎回来留言告诉我——是顺利跑起来了,还是遇到了什么问题?我朋友当初用在线工具测试时,遇到过“编码错误”,后来把代码转成UTF-8就好了,你要是碰到类似问题,我可以帮你参谋参谋~
你在WML里写输入框的时候,肯定遇过这种情况——明明在第一个卡片填了名字,点提交跳到第二个卡片,结果显示“你好,!”,空着个位置特尴尬。这不是你写错了输入框,是WML的“脾气”:它不像HTML那样,表单提交会自动把输入的内容带过去,WML得你自己“手把手”把变量递过去,用的就是标签。
比如你第一个卡片的输入框name是“username”,点提交按钮的时候,按钮对应的标签里有个(就是跳转的动作),你得在里面加一行。这里的name要和输入框的name一模一样,value里的$(username)就是把输入框里的内容“抓”出来,跟着跳转一起传到下一个卡片。就像你给别人递文件,得把文件装进信封再递,就是那个“信封”,没它内容就丢在路上了。我之前帮朋友调代码,他就是漏了这行,结果折腾半小时才发现——合着输入的内容根本没传过去,能显示才怪呢。所以不管你写什么表单,只要要传变量,这行绝对不能省,不然白写输入框了。
WML和HTML的核心区别是什么?
WML是功能机时代的简化标记语言,和HTML的核心区别有两点:一是WML基于XML,所有标签必须闭合(比如
要对应
);二是WML用“卡片(Card)”组织内容,一个WML文件可包含多个Card(类似多个小页面),点击链接切换卡片,适合功能机慢网环境;而HTML通常一个文件对应一个页面,标签规则更灵活。
现在都用HTML5了,学WML还有必要吗?
有需求的场景下仍有必要:比如制作复古手机主题、模拟功能机游戏、研究移动web发展史时,WML是基础; WML语法简单,能帮你快速理解“移动端有限资源下的内容适配”逻辑,对学习现代移动端开发也有辅助作用。
编辑WML代码需要专门的软件吗?
不需要,常用文本编辑器就能写:比如Windows记事本、VS Code(可装XML Tools插件补全标签)、Sublime Text,保存文件时注意后缀为.wml,编码选UTF-8避免乱码即可。
没有功能机,怎么测试WML页面?
两种简单方法:一是用在线WML测试工具(如WML Test、WAP Emulator Online),直接贴代码看功能机效果;二是装功能机模拟器(如Nokia PC Suite的WAP Browser、WAMP Simulator),模拟真实功能机的上网体验。
WML里输入的内容怎么传递到下一个卡片?
需要用标签显式传递变量:比如输入框name为“username”,点击按钮跳转时,在标签内加,这样下一个卡片就能用$(username)引用输入的内容,不写这行变量会为空。