诶，很有意思的点子——云适配

下面这段文字是早期摘取自云适配老总的访谈，其实这块作为一个业务，还有其他的方案，比如百度的site app免费服务。而且，site APP 说得很清楚，生成Web App。

不过，生成的原理是什么呢？我想到了两种，一种定制网站相应的css，靠这套css来切换；另外一种每次域名重定向到，百度那里，百度抓取数据，然后套到百度那里的css里。

互联网生态圈！

完成你的第一个适配
基本技能要求
新建网页模板
拖拽模块使用
模块数据采集
预览
发布
常用模块使用
其它页面模板
视频
代码嵌入

完成你的第一个适配

基本技能要求

CSS技能

基本的CSS语法。云适配使用与CSS兼容的less，参考视频：
http://edu.51cto.com/course/course_id-342.html

jQuery技能

基本的jQuery语法。参考视频：
http://edu.51cto.com/course/course_id-261.html

网页调试工具（chrome开发者工具）

打开Chrome浏览器，按F12调出开发者工具，参考视频：
chrome开发者工具视频介绍

新建网页模板

在用新增普通网站按钮创建网站后，点击开发按钮打开IDE开发主界面，在左上角找到页面模板栏，点击“+”按钮，进入到如下图对话框：

模板名称：模板名称为不多于20个字符的英文字母和数据组合，遵照CSS命名规范。
例如，我们将首页模板定义为：index

匹配规则：是用于匹配一个或者多个页面的规则，规定了当前页面模板能适配原PC网站的某个或者某一类页面。

例如： URL为 http://web.demo.yunshipei.com 和 http://web.demo.yunshipei.com/index.html
那么匹配这两个URL的正则表达式可以为：^/($|index.html)

注意：正则不能包含主域名部分，正则的语法为Reg Exp语法，详细使用请参见以下网址： http://www.regexlab.com/zh/regref.htm http://www.regexlab.com/zh/regref.htm

模块拖拽使用

页面模板创建完成后，可以按照我们的需要拖拽模块，模块在IDE左下角处，将需要的模块拖拽到手机模拟器中。下图以菜单模块为例：

左键单击手机模拟器中的menu-125模块，IDE右边栏会有模块属性的显示，这里可以编辑当前模块的属性。
其中各参数的含义如下图所示：

作为对比，以下是主题为d6（两列下拉）的选取界面：

模块数据采集

待模块拖拽选取完成后，选中任意模块，点击编辑按钮，进入“数据采集”Javascript代码编辑器，有模板的默认代码，默认代码即是该模块数据的JSON对象的格式。以下是以菜单模块为例：

默认代码只是作为参考，下面是menu模块（默认主题）的具体数据采集方法：

首先，进行数据搜寻，在谷歌浏览器中鼠标右击目标元素，选择审查元素，点击查看该目标元素在DOM中的位置：

其次，获取目标DOM标签，找到该目标选择路径。

最后，返回到IDE页面的数据编辑界面，在data.js中进行数据采集，JS采集的代码写法，如下图：

如果有不需要的属性，可以删去，以上代码可以写成如下图：

数据采集完成后，点击右上角编译预览按钮进行预览，预览后的效果如下图：

菜单menu未展开样式菜单menu展开后的样式

预览

点击右上角按钮，进入如下预览界面：

单击右上方的可以在浏览器中新的标签打开此页面，以方便调试。
单击右上方的会弹出该页面的二维码如下：

我们可以直接用移动设备扫描预览页面。

发布

发布的前提条件：已经在原网站所有网页正确的位置插入云适配那一行神奇的代码。

发布包含两模式：预览版和正式版，如图：

预览版：当用户用手机打开原网站时，不会直接进入云适配版，而是需要通过在相应的URL后加入“?_allmobilizedev=1”参数来访问云适配版。例如：http://web.demo.yunshipei.com/?_allmobilizedev=1。
正式版：当用户用手机打开原网站时，可直接进入云适配版。

常用模块使用

其它模块的使用与menu模块的使用相同，以下是几个重要模块数据采集的过程。

创建其它页面模板

接下来，我们来匹配其它页面（除首页外的页面），这里需要创建新的页面模板（起名规则遵照CSS规范）如下为我们所选测试网站对应新页面模板的页面信息：

PC页面URL地址	模板名称	匹配正则
ysp.com/about.html	About	^/about.html$
ysp.com/content.html	List	^/content

视频

整个流程的视频

嵌入代码

1、云适配代码的插入方法 —— 个人/企业网站的操作：

首先需要登录到云适配平台 platform.yunshipei.com登录进入平台，新建项目，点击项目后边的设置按钮

进入到如下界面：

这个当前项目在云适配IDE平台里，对应有一个自动生成的ID，即上图中的的SiteID。

选择“安装云适配”选项，进入到云适配代码安装示例界面，如下图：

云适配代码是一行Javascript代码，只需要将这行代码插入到当前网站对应的HTML页面的 < head > 标签中即可，比方说，一个网站的html代码为：

我们只需要将“安装云适配”选项里的Javascript代码复制，点击下图蓝色框中的“复制代码”

将这几行代码粘贴到HTML页面中的 < head > 标签里，最好放到 < head > 标签开标签下第一行。

如下图：

这样就完成了云适配代码在普通HTML页面中的嵌入！

注：如果是个人或者建站公司的开发者，需要做的有一下几点：

① 需要在已有的网站上添加代码，就得通过网站的空间运营商，获取到当前网站的FTP主机名、账号和密码。
② 通过FTP登录以后，把需要添加代码的网页下载到本地。
③ 再用本地编辑器通过上面查代码的方式，将云适配的代码插入到对应的页面中。
④ 最后将修改过的页面通过FTP账号上传到原来的网站中。

2、云适配代码的插入方法 —— 建站工具中的嵌入：

如果是用WordPress、phpcms等工具制作的网页，用下面的方法进行代码的嵌入：

WordPress安装云适配代码方法

首先从云适配IDE平台里获取安装代码，在后台文件中查找 wp-content/themes/head.php 文件，然后打开，将云适配代码复制粘贴到页面开头 < head >开标前后面,保存并更新文件。
phpcms安装云适配代码方法

首先从云适配IDE平台里获取安装代码，在配置phpcms环境时候的wwww文件夹下，找到路径为 phpcms\templates\default\content 的位置，里边有三个header相关文件，如下图：只需要将header以及header_page俩个文件中插入云适配代码即可。
然后进入phpcms的后台，在“我的面板”选项下点击“生成首页”，如下图：
Discuz安装云适配代码方法

首先从云适配IDE平台里获取安装代码，然后登录discuz 后台，找到路径 \template\default\common 里边有七个header相关文件，如下图中蓝色框内的htm文件进行修改：在header文件中直接将云适配代码插到页面的第一行，在header_common文件中将云适配代码插到 < head > 标签下第一行。
然后进入Discuz的后台，更新页面即可。
DeDecms安装云适配代码方法

首先从云适配IDE平台里获取安装代码，在www文件夹下找到DeDecms的对应路径 dedecms\templets\default 里边有多个index相关文件，如下图中红色框内的htm文件进行修改：插入代码的方法就是上边提到的直接加在 < head > 标签下第一行。然后进入DeDecms的后台，如下图中的步骤，更新页面即可。

跨屏云

企业与政府的门户网站、办公系统移动化最佳选择

云适配跨屏云帮助企业以及政府机构快速、安全、高效地将现有PC版网页应用适配成HTML5移动版本。网页应用指所有网页形式的应用，包括官网、门户、电商、论坛等网站，以及OA、CRM、ERP等办公系统。跨屏云根据用户设备，实时重新渲染网页应用的内容，使之以最佳的展示及交互方式呈现，帮助企业以及政府机构高效地将应用内容适配分发到各种设备终端上，让用户无论在任何设备/平台上都能享受到极致的使用体验，提高用户满意度和转化率。

14376410.73504