Mobile App设计和开发课件.ppt

Mobile App;Profile;内容提要;现代移动互联网Modern Mobile Web (Mobile 2.0);现代移动互联网 - 过去;现代移动互联网 - 过去;现代移动互联网 - 过去;现代移动互联网 - 过去;现代移动互联网 - 过去;现代移动互联网 - 过去;现代移动互联网 - 现在;现代移动互联网 - 现在;现代移动互联网 - 现在;现代移动互联网 - 现在;现代移动互联网 - 未来;现代移动互联网 - 未来;现代移动互联网 - 未来;Mobile App设计和开发Design Development;Mobile App设计和开发;Mobile App设计和开发 - 三种模式;Mobile App设计和开发 - 三种模式;Web App HTML(5) +CSS(3) +JavaScript +Device API;Hybrid(frame) App {Native + Web} App Hybrid – Native与Web完全混合 Frame – 纯Native框架形式（PhoneGap）;Mobile App设计和开发;HTML5 Elements/Forms Offline App LocalStorage GeoLocation Video/Audio Canvas/WebGL Web Workers;CSS3 Selector Border Background Text effects Transition/Transform/Animation;Device API Touch Event MultiTouch(gesture) DeviceOrientation WebClip Viewport Status Bar/Startup Image;浏览器兼容概览 – iOS 4.3.3 Mobile Safari;浏览器兼容概览 – Android 2.2 Webkit;Hybrid (frame);移动框架的抉择 交互集成框架 Sencha Touch jQuery Mobile DHTMLX Touch/iUI/iWebkit(iOS)/… 纯JavaScript框架 Zepto.js 应用开发平台框架 PhoneGap;移动框架的抉择 Kissy Mobile？ or…;开发实战 HTML5应用实例 Elements/Form/GeoLocation CSS3应用实例 Device API应用实例 基本包装/ScrollLayer/Shake!;开发实战-HTML5应用实例 Elements;开发实战-HTML5应用实例 Form;开发实战-HTML5应用实例 GeoLocation navigator.geolocation. getCurrentPosition successCallback errorCallback positionOptions watchPosition clearWatch;开发实战-HTML5应用实例 GeoLocation;开发实战-CSS3应用实例 ;开发实战-Device API应用实例 本地化基本包装 Viewport Width initial-scale / maximum-scale user-scalable Capable WebClip icon Startup image;开发实战-Device API应用实例 本地化基本包装;开发实战-Device API应用实例 ScrollLayer touchstart/touchmove/touchend e.touches //所有手指列表 e.targetTouches //当前Dom手指列表 e.changedTouches //当前事件手指列表 clientX / screenX / pageX target identifier …;开发实战-Device API应用实例 ScrollLayer;开发实战-Device API应用实例 Shake! ondevicemotion e. accelerationIncludingGravity X Y Z;开发实战-Device API应用实例 Shake!;Mobile App设计和开发;权衡利弊;权衡利弊 Native的优势： 速度 功能 表现 性能;权衡利弊 Web的优势： 效率 成本（跨平台） 更新 复用;权衡利弊 适合的才是最好的;WebView 它是Webkit在SDK中封装而成的一个组件 Java和JavaScript通过WebView的接口进行通信;双向通信技术解析 Native调用Web loadUrl方法 webview.loadUrl(javascript: