下面这段文字是早期摘取自云适配老总的访谈,其实这块作为一个业务,还有其他的方案,比如百度的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 emplatesdefaultcontent 的位置,里边有三个header相关文件,如下图: 只需要将header以及header_page俩个文件中插入云适配代码即可。
然后进入phpcms的后台,在“我的面板”选项下点击“生成首页”,如下图: -
Discuz安装云适配代码方法
首先从云适配IDE平台里获取安装代码,然后登录discuz 后台,找到路径 emplatedefaultcommon 里边有七个header相关文件,如下图中蓝色框内的htm文件进行修改: 在header文件中直接将云适配代码插到页面的第一行, 在header_common文件中将云适配代码插到 < head > 标签下第一行。
然后进入Discuz的后台,更新页面即可。 -
DeDecms安装云适配代码方法
首先从云适配IDE平台里获取安装代码,在www文件夹下找到DeDecms的对应路径 dedecms empletsdefault 里边有多个index相关文件,如下图中红色框内的htm文件进行修改: 插入代码的方法就是上边提到的直接加在 < head > 标签下第一行。 然后进入DeDecms的后台,如下图中的步骤,更新页面即可。
跨屏云
企业与政府的门户网站、办公系统移动化最佳选择
云适配跨屏云帮助企业以及政府机构快速、安全、高效地将现有PC版网页应用适配成HTML5移动版本。网页应用指所有网页形式的应用,包括官网、门户、电商、论坛等网站,以及OA、CRM、ERP等办公系统。跨屏云根据用户设备,实时重新渲染网页应用的内容,使之以最佳的展示及交互方式呈现,帮助企业以及政府机构高效地将应用内容适配分发到各种设备终端上,让用户无论在任何设备/平台上都能享受到极致的使用体验,提高用户满意度和转化率。
14376410.73504跨屏云优势
-
一行代码 安装简便
安装云适配跨屏云,只需要在网页里面加入一行Javascript代码,几分钟便可完成。这是云适配全球独创发明的一行代码适配技术。
-
不涉及企业后端 安全可靠
云适配跨屏云是前端技术方案,只在用户浏览器端做网页的重新渲染不涉及任何后台的数据读写以及存储,把安全隐患降到最低。
-
支持海量并发 业务不中断
因为网页适配的运算发生在用户浏览器端,所以跨屏云可以承载海量并发。即使跨屏云出现异常,访客还可浏览原网页。
-
个性化平台 轻松定制
云适配独创的在线开发工具—跨屏云IDE,帮助企业开发人员随时通过所见即所得的方式在线调试网页样式,实现最佳的个性化跨屏展示效果。
-
云端加速 自动压缩图片
云端CDN 加速功能、等比例图片压缩技术、自动适配不同尺寸的屏幕在相同网络环境下,能瞬间打开访问网址。
-
开放开源 最强兼容适配
跨屏云使用Amaze UI – 中国首个HTML5跨屏前端框架,全球开发者都可为Amaze UI贡献代码,所以跨屏云拥有最强兼容适配性
公有跨屏云
快捷部署,在线适配并一键发布,同时享受云端优化加速;适合中小企业官网、媒体社区、电商平台等。
他们正在使用:私有跨屏云
内网部署,基于企业私有网络环境,构建专属跨屏云,方便企业统一运维;适合政企门户、企业级应用(如OA、ERP、CRM等)。
他们正在使用:客户价值
多屏合一,内容实时同步
云适配版网站,将保证网址与PC版网址一致,无需二次推广域名。用户使用任何主流屏幕终端触发访问需求,通过“跨屏云”服务即可秒速实现PC与移动端内容同步。
降低维护成本 操作简单
传统情况下,企业需要同时维护PC网站、手机网站(微网站)、苹果App、安卓App等,工作繁琐,成本巨大。现在,企业只需要维护一个跨屏云应用,即可满足以上所有场景。
多平台支持,迅速抢占营销入口
基于HTML5的跨平台特性,打开六大营销平台接口,连接微信、移动搜索、移动浏览器、微博、短信等多种营销平台;可自动适配5000多种智能设备屏幕,大幅增加用户分享的动力。
提高搜索引擎排名
跨屏云应用的统一网址可以把所有设备上用户点击权重累加起来,最大程度提高百度、Google等搜索引擎排名。