MobileApp设计和开发选编.ppt

谢谢 再见 移动框架的抉择 Kissy Mobile？ or… Hybrid (frame) Mobile App设计和开发 - Web App 开发实战 HTML5应用实例 Elements/Form/GeoLocation CSS3应用实例 Device API应用实例 基本包装/ScrollLayer/Shake! Hybrid (frame) Mobile App设计和开发 - Web App 开发实战-HTML5应用实例 Elements Hybrid (frame) Mobile App设计和开发 - Web App 开发实战-HTML5应用实例 Form Hybrid (frame) Mobile App设计和开发 - Web App 开发实战-HTML5应用实例 GeoLocation navigator.geolocation. getCurrentPosition successCallback errorCallback positionOptions watchPosition clearWatch Hybrid (frame) Mobile App设计和开发 - Web App Will come true on 开发实战-HTML5应用实例 GeoLocation Hybrid (frame) Mobile App设计和开发 - Web App Will come true on 开发实战-CSS3应用实例 Hybrid (frame) Mobile App设计和开发 - Web App selector/border-radius/gradient/box-shadow/transition/animation … 开发实战-Device API应用实例 本地化基本包装 Viewport Width initial-scale / maximum-scale user-scalable Capable WebClip icon Startup image Hybrid (frame) Mobile App设计和开发 - Web App 开发实战-Device API应用实例 本地化基本包装 Hybrid (frame) Mobile App设计和开发 - Web App 开发实战-Device API应用实例 ScrollLayer touchstart/touchmove/touchend e.touches //所有手指列表 e.targetTouches //当前Dom手指列表 e.changedTouches //当前事件手指列表 clientX / screenX / pageX target identifier … Hybrid (frame) Mobile App设计和开发 - Web App 开发实战-Device API应用实例 ScrollLayer Hybrid (frame) Mobile App设计和开发 - Web App 开发实战-Device API应用实例 Shake! ondevicemotion e. accelerationIncludingGravity X Y Z Hybrid (frame) Mobile App设计和开发 - Web App 开发实战-Device API应用实例 Shake! Hybrid (frame) Mobile App设计和开发 - Web App Mobile App设计和开发 Hybrid App 1.权衡利弊 2.WebView 3.双向通信技术解析 4.Hybrid App开发实战 Hybrid (frame) Hybrid (frame) 权衡利弊 Hybrid (frame) Hybrid (frame) Mobile App设计和开发 - Hybrid App Native vs. Web Native Web 权衡利弊 Native的优势： 速度 功能 表现 性能 Hybrid (frame) Hybrid (frame) Mobile App设计和开发 - Hybrid App Native 权衡利弊 Web的优势： 效率 成本（跨平台） 更新 复用 Hybrid (frame) Hybrid (frame) Mobile App设计和开发 - Hybrid App Web 权衡利弊 适合的才是最好的 Hybrid (frame) Mobile App设计和开发 - Hybrid App Web Hybrid (frame) WebView 它是Webkit在SDK中封装而成的一个组件 Java和JavaScript通过WebView的接口进行通信 Hybrid (fra