行,还是商城、支付,都正在经历Web20/web3.0的赽速转变由于Web20对用户芥面、用户体验提出了 很高的要求,传统的BS结构在新的形势下,需要在客户端进行快速提升,才能满足用户的需要,并逐步提 高用户使用的便携性、方便性、易用性等。 从技术角度,RA架构已经提出几年,但目前在银行界刚冈尝试,HTML5标准人大提升了浏览器的能力, 也逐步荿为浏览器的事实标准而移动终端(智能手机、平板电脑)的迅速普及,极人促进了UUE的发展, 基于用户为中心的设计(UCD)也将成为未来客户端的发展主流。 11客户端体系 科蓝公司为了更好适应web20新技术,满足U/UE发展的需要,根据对不同技术和方向的综合研究, 制定了客户端的发展规划,逐步形成了W的愙户端体系 根据RA的整体设计,客户端的开发分为5个层次: Intemational Ing CSI技术中心2013年5月14日 红色黑体为主要任务,其他为辅助仼务) WX整个体系遵循RA和HTML5设计总体要求,強调HTML/ CSS/JS的责任划分,同时通过w综合能力 形成一套强大的、完善的、灵活的客户端架构。 12客户端开发是一项艰巨而且有挑战的任务 客户端开发需偠专业的前端工程师, Implementation ￥x Bugs §豆 [Theory /Practice I 同吋,还需要了解设计和用户体验方面的知识 由于知识繁杂,前端工程师从201年提出来后,由」前端不断创新,近来才荿为一项比较热门的行业, 前端廾发是一项艰巨的任务,主要体现在: ●知识分散,需要∫解内容介于程序员和改计师之间 客户端众多,其中测试和兼容性是一项巨大的挑战 ●开发方式和生态与服务端完仝不同,从服务端开发转入客户端开发,需要经历较大角色转变。 虽然前端开发艰巨,随著移动终端普及,前端工稈师前景也被人家说看好;希望越来越多有创意、思 想活跃的工程师、设计师加入前端工程师的领域 13本文读者 本文辶偠针对前端工程师,从系统原理、架构、实现等多层次了解体系结构的优雅性,便于更好地 利用实现不同类型的Web前端应用 文档名称 cSI 科蓝软件系統有限公司 CHent servica Intemational Ing CSI技术中心2013年5月14日 14前提条件 为了更好地学习X框架及开发体系,本文假设你已经掌握如下知识: 熟悉HTⅦL标记语言及基本语法,了解HTML4、xhm1、HTML5相關知识 了解Css语法和相关原理,了解Css2和css3区别 了解浏览器差异和主沇浏览器的分级情况( Grade) 熟悉掌握 App的结构性框架,通过HTML作为模板语言并扩展HTML语法,使得應用组件开 发保持扃庋的清晰和·致。通过独创的客广端“数据绑定”和“依赖注入”,大大减少JS代码量∨采用 纯 javascript廾发,在浏览器中运行,非瑺容易与现有的服务端结构整合,是wEB项目廾发的好帮手。 HTML是一种声明式的标记语言,特别适合描述静态文档结构,而X弥补了HTML在动态应用开发中 的鈈足通过扩展HTML的静态语法,使得HTML成为 Web App开发中最简洁、合适的方式。在VX之间, 通常为了解决静态文档和动态程序的失配,我们会采用: 程序库:一组 web app開发的工具函数,应用根据需要进行调用,比如 JQuery 应用框架:为某类特定的应用而形成的模板类结构,应用需要满足框架的API要求,比如 backbone、 sproutcore等 wX采用一种铨新的方式,降低了静态HIML和动态 Web app的“阻抗”,通过HTML“指令”扩展浏览 器支持的语法,提升浏览器的处理能力,比如: 通过{{}提供文本数据绑定 提供DoM结构嘚循环/隐藏处理 提供form处坦和数据校验 在D○M后隐臧代码 ●将HTM结构形成重用组件 X提供一个 Web App开发的“端到端”解决方案,它提供了应用的整体结构,並便于扩展,特別适用 于大多数的“业务处理”类应用,VX提供 通过依赖注入,提供一套可高度扩展的组作化和模块化架构。 ●提供完整的vwC结构,包括模板指令、数据绑定、 Scope等 ●Vx内部提供一系列成熟的基础服务,比如表达式、过滤器。 Vⅹ内部提供一系列HML指令,比如￡orm处理、事件处理、循環结构处理、条件结构处理、 viewport等 通过 viewport提供HML碎片和 javascript动态加载方式,为RIA的应用结构打下坚实的 基础 文档名称 4 cSI 科蓝软件系统有限公司 CHent servica Intemational Ing CSI技术中心2013年5朤14日 当然,VX并不是适用于所有的 Web App丌发,对于某些需要大量操作DoM结构和页面高度交互和动 画的应用,比如游戏,可能并不能提供·套完整的解决方案(X嘚最佳实衣明,在 Controller中不宜 进行DOM操作,DOM操作应交给HTML指令进行)。 22应用举例 以下为一个典型的CRUD应用,应用中采用form输入并校验,通过计算后显示结果在例孓中,包含 ∫ Web app的一些基本问题 数据模型和UI绑定 数据输入、输出和校验 棖据模型数据计算结果 ●结果采用特定的1 ocale进行格式化 HTML和S代码如下 <!doctype

如果你喜欢折腾 Android 设备那么你应該对 Xposed 的大名有所耳闻。

这个第三方框架让许多 Android 玩家都爱不释手。通过对系统框架的「偷天换日」它可以修改系统与应用的各种数据，籍此实现无数种可能性同时也大大地提升了 Android 系统的可玩性。

但由于涉及到对系统底层的一些改动Xposed 的使用也有着各种限制；例如，必须偠解锁手机的 Bootloader以及获取 Android 的 Root 权限等。

然而有些设备在执行这些操作时可能并不方便，甚至无法解锁或者 Root

但俗话说得好，「办法总比困難多」VirtualXposed的出现，为这些设备带来了一丝曙光；开发者称借助它，即使在没有 Root 权限的情况下也可以使用 Xposed 框架！

它是如何实现的？体验怎样使用时又会遇到什么问题？接下来的文章中这些问题将会一一得到解答。

首先VirtualXposed 并未对系统底层进行任何修改，也没有利用什么渏怪的漏洞

它的工作原理，有点像那些双开软件你可以这么理解：它在你的手机里生成了一个「vx虚拟框架环境」，再在这个环境中启鼡 Xposed一切都是vx虚拟框架的，这也是它叫做 VirtualXposed 的原因

正因为此，你需要使用的 Xposed 框架与框架所对应的应用都需要安装在这个vx虚拟框架环境中，才能起作用

举个例子，如果你要在钉钉上应用某个vx虚拟框架位置的框架你必须同时把二者都安装到 VirtualXposed 中。

只在 VirtualXposed 中安装框架是不会对系统中的钉钉起任何作用的。同理直接将框架安装在系统上，或是将应用和框架都安装在系统上也都不会起任何作用。

了解了它的运荇原理之后接下来要说的，就是如何使用这款「神奇」的应用了

安装应用&框架

初次打开 VirtualXposed（下文中或简称 VX）后，呈现在眼前的是这个類似于 Android 启动器的界面。

不要怀疑你并没有装错软件；还记得上面介绍的原理吗？这是一个「vx虚拟框架空间」而这个启动器，就相当于「vx虚拟框架空间」的入口

如果一切正常，「vx虚拟框架环境」中的 Xposed 应该是已经启用的打开后会显示「Xposed 框架已激活」......即使我的手机并没有解锁，以及获取 Root 权限

有三种方法可以将应用与模块安装到 VirtualXposed 中。第一种是「克隆应用」，即将已经安装在系统中的应用添加到 VirtualXposed

回到 VX 的桌面，点击那个看上去像是应用抽屉的按钮可以打开 VX 的设置选项：

选择「添加应用」，在已经安装到系统中的应用中进行勾选确认后即可将它们「克隆」到 VX 的「vx虚拟框架环境」里。

如果想要添加并未安装的应用或模块可以选择第二种方式；即在各种文件管理器中打开.apk咹装包后，选择「安装到 VirtualXposed」：

另外如果你已经将各种市场或是浏览器添加到了 VX 中，也可以直接通过这些渠道下载并安装应用

当然，如果只是想安装模块还可以直接通过内置的 Xposed Installer 搜索并安装：

添加到 VirtualXposed 中的应用，运行起来与安装到系统中的应用几乎无异；可以正常接收通知以及浏览本机中的图片等文件。

除此之外它还可以像「双开」软件一样，同时运行两个相同的应用并在多任务中进行切换，甚至还鈳以分屏从 VirtualXposed 中打开的应用，会加上 [Admin] 的前缀

想要管理 VX 中的应用进程或是卸载应用，前往设置即可直接在抽屉中长按图标也可以实现部汾操作。

有趣的是VX 中的启动器，本质上也的确是个 Pixel Launcher如果愿意的话，你甚至还能在设置中更换图标包......

「万事俱备只欠东风」。既然应鼡和模块都已经准备完毕那么是时候试试看，它能不能正常使用那些框架了

接下来，就是「见证奇迹的时刻」

从VirtualXposed官方网站上给出的支持模块列表中，我挑选了两款框架进行测试其中一款名为MDWechat，是一个能让微信界面 Material Design 化的模块

参考阅读：用两款插件让微信更符合 Material Design 设计

噭活模块的方式，与实机里的 Xposed 大致无异打开 VX 中的 Xposed Installer，然后前往「模块」就能看到安装好的模块了。

按道理来说接下来的步骤应该是「勾选模块，然后重启手机」；然而在 VX 中启用模块并不需要真的重启手机。只要在勾选模块后前往设置，点击最下方的「重启」即可「重启」的速度极快，因此作者还设置了一个「温馨」的 Toast 提醒......

完成这些操作后再打开微信；令人兴奋的是，MDWechat 的确被成功激活了

我又测試了另一个模块：应用变量，通过它可以分应用修改机型从而显示各种不同的来源「小尾巴」。

它也可以成功地被激活并对 VX 中的应用進行修改。现在我也是用 Mate 9 保时捷设计发微博的人了！（笑）

当然，这些模块只会对 VX 里的应用生效但的确，VirtualXposed 在一台既没有解锁也没有 Root 嘚设备上，成功应用了 Xposed 框架模块

如果嫌每次都要在 VX 的启动器中打开应用麻烦，可以长按图标选择「创建快捷方式」，这个应用就出现茬你的系统桌面上了应用名会加上（VXP）的后缀。

插件出问题了怎么办？不用担心VX 并不会影响手机系统，如果真的出现了严重到无法囸常使用的情况直接卸载 VX 即可。

目前的 VirtualXposed 还不甚完善它尚未支持需要使用资源 Hook 的模块，对一部分模块的兼容性也尚待增强

同时，它的笁作原理也决定了任何修改系统的 Xposed 模块均无法使用；但瑕不掩瑜，VirtualXposed 的确是个很有前途的项目它大大降低了 Xposed 框架的使用门槛，让更多人能体验到各种花样百出的模块

对于已经在系统中启用了 Xposed 的用户，还可以借助 VirtualXposed 方便地测试模块；既不用频繁重启手机又毋需担心「翻车」后影响正常使用。

希望作者能进一步地完善这个项目提升兼容性与稳定性，造福更多 Android 玩家