Hybrid-App-走向“轻混”-剖析-WeX5-开源高性能-H5-App-开发框架课件

1、Hybrid App 走向“轻混”剖析 WeX5 开源高性能 H5 App 开发框架目录从“重混”到“轻混”1构建高性能H5 App跨端框架2WeX5可视化快速开发工具3目录从“重混”到“轻混”1构建高性能H5 App跨端框架2WeX5可视化快速开发工具3苹果和谷歌开启了移动应用新时代2007年6月，乔布斯发布第一代iPhone。2008年10月，Google发布第一部Android智能手机。一个应用两套实现Hybrid App混合应用应运而生Web成为Hybrid App的首选技术技术简单、支持广泛、开发者众多、更擅长“炫”的页面Hybrid App = Web + Native但是在Hyb

2、rid App技术发展的早期，Web的运行性能成为主要瓶颈！iPhone3G（CPU：620MHZ， RAM：256MB）为解决性能问题Hybrid App走向“重混”Web不够，Native来凑多WebView：实现流畅的多页加载和转场动画Native UI组件：菜单、日期、走马灯重混“重混”的优缺点优点：提升了运行性能增强了交互体验缺点：Web和Native技术交叉混杂需要同时掌握Web和Native技术，学习难度增加一个页面有Web组件也有Native组件，编程调试困难随着时代的发展，性能不再是瓶颈H5已经可以支持复杂应用，并拥有良好的运行性能无线网络技术浏览器技术移动设备硬件能力大幅提

3、升又一个伟大的公司重新定义了移动应用2011年1月，腾讯推出了微信；2012年8月，微信公众平台上线。移动应用 = iPhone App + Android App + 微信 App“重混”框架废了“轻混”成为Hybrid App的必然选择H5 APP = “轻混”的Hybrid App纯Web技术Native 技术界面交互设备接口目录1构建高性能H5 App跨端框架2WeX5可视化快速开发工具3从“重混”到“轻混”H5 App框架结构H5 App由网页和外壳两部分组成。网页主要负责界面的显示和交互；而外壳会内置一个浏览器来提供网页的运行环境，并且会通过插件为网页提供扩展的原生调用能力。外壳浏

4、览器+插件网页HTML5JavaScriptCSS3设备信息通讯录语音拍照地理位置网络支付分享Native框架的选择Cordova（PhoneGap） 业界最主流的开源移动跨端框架 HTML + CSS + JS + 原生插件 开放式的原生插件框架 “干净”的轻混合跨端框架H5页面框架的选择多页应用MPA（Multi Page Application）页面资源http:/xxx/page1.w页面资源http:/xxx/page2.wURL跳转整页刷新公用资源（JS、CSS等）公用资源（JS、CSS等）页面资源http:/xxx/shell.w #page1.html页面资源http:/xxx

5、/shell.w #page2.htmlAJAXDHTML局部刷新http:/xxx/shell.w（外壳页面）公用资源（JS、CSS等）SPA单页应用单页应用SPA（Single Page Application）单页应用的核心问题：页面隔离外壳页面元素ID隔离设计时用属性xid替代id，运行时动态生成id。生成规则：xid + 页面实例标识 = id访问方法：this.getElementByXid(xid)、p(xid)CSS样式隔离每个页面都有一个同名的css样式文件，只作用于当前页面。技术实现：编译时为页面文件中每个元素的class属性和样式文件中的样式选择器都添加一个“页面标识”，

6、使局部样式文件中定义的样式只能作用于class包含“页面标识”的HTML元素。Javascript隔离RequireJSHTMLCSSJavascript页面片段元素ID冲突样式定义冲突变量函数冲突HTMLCSSJavascript页面片段元素ID冲突样式定义冲突变量函数冲突HTMLCSSJavascript页面片段元素ID冲突样式定义冲突变量函数冲突HTMLCSSJavascript页面片段元素ID冲突样式定义冲突变量函数冲突HTMLCSSJavascript页面片段元素ID冲突样式定义冲突变量函数冲突RequireJS模块隔离define定义模块require加载模块资源按需动态加载Jav

7、ascript、CSS、TXTtest.js define(, function() return hello: function() alert(Hello World！); );require(test, function(test) test.hello(););页面管理外壳Shell负责管理所有的页面justep.Shell.loadPage(url, params)justep.Shell.showPage(url, params)justep.Shell.closePage()卸载页面防止内存泄漏卸载HTML片段释放组件对象路由管理支持前进、后退基于HTML5 History AP

8、I实现http:/xxx/shell.w#page1.htmlWeX5整体技术架构移动设备AJAXWebSocketsocket.ioJSON移动App（安卓、苹果） 、微信App、网页AppXPage（页面框架）XComponents（组件框架）jQueryHTML5客户端服务端XBaaS（后端服务）数据服务支付地图第三方服务JAVA.NETPHPNode.jsXData（数据绑定）RequireJSCSS3JavascriptCordova（安卓、苹果）Native API（统一原生API）WeChat（微信）Bootstrap（统一样式库）目录1构建高性能H5 App跨端框架2WeX5可

9、视化快速开发工具3从“重混”到“轻混”我们的产品WeX5WeX5是基于HTML5的开源跨端可视化快速开发工具上百个页面组件可视化页面设计模板化快速开发编码、调试、发布一体化集成开发环境无需原生开发经验永久免费运行框架全部开源Apache开源协议商业友好时尚的扁平化样式风格响应式布局自适应分辨率内置触摸滑动等手势操作页面极速加载操作流畅媲美原生的交互体验完整原生设备能力支持支付、地图、分享、消息开源免费极致体验快速开发多端运行Android AppIOS AppWeChat(微信) AppHTML5完全可视化设计所见即所得，拖拽式页面设计，简单易学轻松设计复杂页面上百个页面组件，各种布局任意组合强大的组件封装拖拽组件、设置属性即可完成复杂技术能力开放式组件框架所有组件全部开源，开放式框架，可自定义扩展组件应用模板向导快速生成内置丰富的可扩展应用模板，常见功能快速向导生成极客编程智能提示、代码模板、支持Emmet极客编程调试无死角模拟调试、真机调试，全部开源，调试无死角向导式快捷打包发布1、选择发布模式2、选择应用资源3、设置名称版本4、设置发布证书5、设置图标图片6、