移动互联网发展趋势.pptVIP

移动互联网发展行业(教育)15423移动APP主流移动端开发技术

4H5的到来让移动互联网开发不再是神话Part主流移动端开发技术纯原生开发基于原生的跨端开发基于HTML5的跨端开发技术●IOS：Objective-C,Swift●Android：Java，C/C++●完全不同的技术框架，学习难度大，研发成本高●Xamarin（C#）●Titanium（JavaScript）●只是统一了编程语言，还是需要学习原生编程知识，维护多个版本●Cordova（PhoneGap）●Appcan、dCloud●只需要Web编程经验，真正做到一次开发多端运行H5APP技术优势1真正跨端，一次开发多端运行,页面展现能力强，HTML5+CSS3技术简单，标准化程度高，学习成本低只需要Web编程经验，有广泛的开发者基础32H5APP发展过程中存在的问题难以实现流畅的页面转场、侧滑等动画效果页面渲染慢闪白明显复杂的JS组件运行效率差早期硬件设备能力差，难以满足流畅的用户交互体验iPhone3G（CPU：620MHZ，RAM：256MB）早期如何解决性能问题WebNative重混模式多WebView：实现流畅的多页加载和转场动画NativeUI组件：侧滑、日期、走马灯……我们把这种依赖NativeUI的混合框架称为“重混”NativeWeb重混随着时代的发展，性能已不再是瓶颈H5已经可以支持复杂应用，并拥有良好的运行性能01硬件设备移动设备硬件能力02无线网络技术无线网络技术2G/3G/4G03浏览器技术浏览器技术HTML504手机性能大幅提升输入您的文字内容输入您的文字内容微信强势成为新的移动终端微信苹果IOS轻混模式2011年1月，腾讯推出了微信；2012年8月，微信公众平台上线。2017年1月，小程序上线。移动应用=iOSApp+AndroidApp+微信App安卓APP重混报废“轻混”成为H5App开发的必然选择界面交互接口技术●纯Web技术●Native技术构建高效移动互联网开发框架

5H5开源轻混型移动互联网开发框架介绍PartH5App框架结构H5App由网页和外壳两部分组成。网页主要负责界面的显示和交互；而外壳会内置一个浏览器来提供网页的运行环境，并且会通过插件为网页提供扩展的原生调用能力。外壳浏览器+插件网页HTML5JavaScriptCSS3设备信息通讯录语音拍照地理位置网络支付分享Native框架的选择业界最主流的开源移动跨端框架HTML+Native插件开放的插件体系轻混的框架结构H5页面框架SPA单页应用模式多页应用MPA（MultiPageApplication）页面资源http://xxx/page1.w页面资源http://xxx/page2.wURL跳转整页刷新页面资源http://xxx/shell.w#page1.html页面资源http://xxx/shell.w#page2.htmlAJAX局部刷新http://xxx/shell.w（外壳页面）JS库、CSS库…单页应用SPA（SinglePageApplication）JS库、CSS库…JS库、CSS库…Web组件Web组件HTML片段JavaScript代码事件绑定JS动态创建HTMLnewButton({text:ClickMe!,handler:doClick,container:document.getElementById(container)});虚拟DOM，延迟渲染varMyButton=React.createClass({doClick:function(event){...},render:function(){return(buttononClick={this.doClick}ClickMe!/button);}});React.render(MyButton/,document.getElementById(container));静态描述buttontype=buttononclick=“doClickClickme!/button越多越慢性能提升这才是最快的Web组件Web组件HTML片