摘要：前端开发通常需要开发多套web页面代码，从而为不同的移动终端浏览器开发不同的web页面，例如低端手机需使用wml，高端手机则支持html和javascript等。本文介绍了一种跨平台web页面自动化生成技术，该技术利用php设计了一个中间层（CC-lib），可以屏蔽底层的web展示语言的差异，程序运行时动态生成各个UI组件的wml/xhtml/html代码，从而可以有效降低前端开发人员的页面开发维护成本。
关键词：浏览器兼容，跨平台，无线，web前端，自动化生成，CC-lib
技术领域：无线，web前端
一、背景
在无线领域，通常要为不同的机型，使用不同的编程语言（wml/xhtml/html）编写网页，往往存在下面几个问题：
（1）维护3份代码，开发效率低、维护成本高。
（2）应用开发人员需要关注不同平台的语言差异，调试、自测繁琐。
（3）业务展现逻辑代码和wml/xhtml/html的标签容易混杂在php模板页面里，使代码编写不便，可读性差。
二、技术实现原理
本文介绍一种名为CC-lib的web页面自动化生成工具（实际是一个php实现的组件库），它通过设计实现一个php中间层，来屏蔽底层平台的编程语言差异。
CC-lib形成一套php下的组件库：如panel,form等可视组件或控件；模板开发人员基于这个库来编写PHP程序；
实现编写一套php代码，可分别生成3套(wml/xhtml/html)模板（运行时生成不同的语法标签）。
解决了html标签与程序代码逻辑混杂在一起的问题。
三、CC-lib的设计
1，CC-lib支持的平台
（1）低端手机：wml，古老的手机、低端山寨机
（2）普通手机：xhtml，各种大中小屏的手机
（3）高端手机：html，如iphone/android
2，CC-lib的特点
（1）在组件库的底层内部，在程序运行时自动生成对应的wml或xhtml或html标签来输出，最终形成网页。
（2）组件库底层来决定使用特定平台的哪些特定标签来绘制组件，上层应用开发人员可以不关心底层实现细节。
（3）一些xhtml支持，但是wml不支持的特性，例如左右布局、颜色、锚点等，可以通过底层来进行模糊容错处理。
（4）可支持全局的样式、风格的统一，换肤方便。
（5）是独立的php库，可以单独使用。
（6）新的需求，可以通过增加新的UI组件来扩展。例如iphone手机上的一些动画特效。
（7）采用类似jquery的链式的代码风格：$cc->class_name(‘head_title’)->html(‘hello’)->render();
3，CC-lib的整体设计
CC-lib设计一套公共的接口，不同平台(wml/xhtml/html)下分别使用不同的子类去实现这些接口。例如：CCForm接口，分别由3个平台下的CCFormWML类、CCFormXHTML类、CCFormHTML类实现。
CCIPanel面板接口是CC-lib的核心API接口。CCIPanel是最基础的元素，它代表一个网页区域，xhtml版中采用div或span实现，其它的元素都继承自这个类。
可以往面板中添加各种网页元素，如图片、链接、文本、子面板、表单等。
四，CC-lib需处理的一些兼容性问题
不同平台间的细小差异是很多的，下面列出常见的几点：
1，块状元素与行内元素在不同平台下的不同展现。例如：xhtml下可以使用div/span来分别模拟块状元素和行内元素，然而wml平台下没有div和span元素，只能使用br来模拟。
2，左右布局的支持。xhtml下可以支持使用table来做左右两列布局，而wml下则无法支持，只能进行退化处理。
3，form表单的差异。 wml的表单是用anchor+go标签来做的，一个提交按钮一个anchor+go;而xhtml里，表单是用form实现的，一个form里可以直接有多个提交按钮，且多个按钮间是可以共用一批hidden等input表单参数的。
五、CC-lib使用实例
下面是基于CC-lib编写的一个简单页面代码，运行之后将生成使用wml标签来编写的web页面。
六、小结
CC-lib可以用于实现wml/xhtml/html等平台的兼容性处理，当不同平台版本之间的产品功能差异不大时，可以实现一套代码同时为多个平台浏览器进行web页面展示。
by yangzuncheng
