用 HTML5 新特性开发移动 App

蒋宇捷

Web 技术的发展

1993

1995

1996

1999

2005 2008

移动 App 分类

Web App

Hybrid App

Native App

移动 Web App 的巨大价值

• 云端升级• 跨平台• 代码复用• 结合强大的云运算能力• 绕过 Store

• HTML5 与移动 Web App• 下面要讲到的内容

移动设备有哪些重要的特性？

HTML5 Contact API

HTML5 Contact API

Contact API

Read/Find Update/Add(vCard) HTML5 Calendar API

HTML5 Contact API

// 执行一个通讯录搜索。获取“ name” 和“ emails” 属性。// 同时初始化过滤列表到包含“ yujie” 的联系人记录navigator.contacts.find(['name', 'emails'], success, error, {filter: ‘yujie'});

function success(contacts) { // 获取联系人对象后进行处理for(var i in contacts) { // 遍历所有的联系人 alert(contacts[i].name); // 弹出联系人的姓名}

} function error(err) { // 获取数据错误时进行处理

alert(err.code); // 弹出错误号}

HTML5 Messaging API

Mailto: SMS: MMS:

话筒 摄像头

• HTML Media Capture API

• The Media Capture API

HTML Media Capture API

HTML5 Vibration API

navigator.vibrate([2000, 1000, 1000]);

HTML5 System Information API

电池

CPU

AVCodes

存储

输入

输出

Device

2G/3G

WiFi

带宽

信号强度

iP

Mac

Network

亮度

声音

温度

气压

临近

Sensor

navigator.system.watch("Power",success,null,{lowThreshold:0.2});

function success(power) { navigator.system.get("OutputDevices", function(devices) { for(var i=0; i<devices.displays.length; i++) navigator.system.set("Display",{id: devices.displays[i].id, brightness: 0.5}); });}

HTML5 Device API

Device API

System Info API

Device 特性

Network 特性

Sensor 结果Calendar API

Contact API

Vibration API

Messaging API

Media Capture API

HTML5 DeviceOrientation Event

• Deviceorientation ：方向

• Devicemotion ：运动

Adobe 与 HTML5

HTML5Opera

Google

Apple

微软

IE only

微软 Flash

AdobeAdobe

Mozilla

CSS3 区域模块（ Region ）

• 故事线

• 区域样式

• 内容形状和环绕

CSS3 着色器（ Shaders ）

• 什么是着色器

• 着色器的特点

• 响应式网页设计

CSS3 媒介查询（ Media Queries ）

/* 宽度小于等于 980px 时 */@media screen and (max-width: 980px)

#head { width: 95%; } #content { width: 60%; } #sidebar { width: 30%; }}

/* 宽度小于等于 700px 时 */@media screen and (max-width: 700px)

#content { width: auto; float: none; } #sidebar { width: auto; float: none; }}

CSS3 媒介分页（ Paged Media ）

html { height: 100%; overflow: paged-x; }

Native App 和 Web App 的鸿沟？

地理位置定位

Geolocation API

音频视频

Audio & Video

震动

Vibration API

短信、彩信

Messaging API

数据库

IndexedDB

消息推送

Sever-Sent Event

摄像头 & 语音

Media Capture

API

本地文件读写

File & Writer API

陀螺仪重力感应DeviceOrientation

Event

图像处理

Filter Effect

通讯录、日历

Contact & Calendar

API

设备适配

Media Queries

页面布局

Region & Paged Media

多点触摸

Touch Event

HTML5 的移动浏览器支持

特性

Geolocation API

DeviceOrientation Event

System Info API ：Network

Media Capture API

Mobile Mini

• HTML5 不能做到的十件事• 规范还在讨论和完善中• 运行和渲染性能需要提高• 开发者的挑战• 开发模式需要摸索和积累

• 但是…

HTML5 的问题？

云加端的解决方案

云存储

云环境消息服

务

关系服务

Web App

开放API

缓存服务

开发者最好的时代

谢谢