摘要：前端开发通常需要开发多套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

建议继续学习：

1. 自动化测试中Python与C/C++的混合使用    (阅读：3819)
2. 自动化运维之企业实际案例分析    (阅读：3645)
3. 自动化测试之惑    (阅读：2543)
4. Linux大棚版gtest官网教程译文    (阅读：2527)
5. 让前端工作更快、更智能:利用StaticPage自动化工作流    (阅读：2527)
6. linux下搭建pxe自动化安装环境    (阅读：2471)
7. Perl 自动化之网页处理 WordPress 自动登陆查看    (阅读：2206)
8. 系统自动化配置和管理工具 SaltStack    (阅读：1654)
9. 如何设计软件模块的自动化测试？    (阅读：1546)
10. 环境为王-论贴吧环境解决方案    (阅读：1392)