Embed Size (px)
Citation preview
Touch开发 应届生培训
钟志
无线事业部
2014-03-25
目录
1 无线web开发概况
2 基础知识
3 事件
4 调试
目录
1
无线web开发概况
无线web开发使用的技术 1.1
WebApp
浏览器差异 1.2
无线设备中使用的大部分浏览器是基于webkit内
核的浏览器
Windows Phone使用的是IE浏览器，版本 > IE9
无线web应用场景 1.3
WebApp WebView Hybird
轻应用 微应用
无线网络的特点 1.4
设备屏幕小
• 按钮足够大
时间碎片化
• 暂停/随时中断
网速不稳定
• Wifi/2G/3G/4G
网络不稳定
• 网络状态监控
设备性能差
• 网页性能/动画
流量耗费用
• 资源尽量小
设备繁多
• 注意兼容性
设备差异 1.5
Retina
摄像头
麦克风
三轴陀螺仪
加速感应器
距离感应器
环境光传感器
指纹传感器
鼠标
键盘
2
基础知识
• viewport • tel • sms • input
viewport 2.1
viewport 全部属性
属性名称 属性说明 属性值
width viewport宽度 960 戒 device-width
height viewport高度 1000 戒 device-height
initial-scale 初始缩放比例 0.5
maximum-scale 最大缩放比例 2
minimum-scale 最小缩放比例 1
user-scalable 是否允许用户缩放 1 戒 0 (yes 戒 no)
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
锁定屏幕，禁止缩放
拨叫电话 2.2
<a href="tel:13988888888">拨叫</a>
在网页上生成一个链接，当用户点击时，手机开始拨叫指定的
手机号码
查看代码
发短信 2.3
<a href="sms:13988888888">发短信</a>
在网页上生成一个链接，当用户点击时，手机激活短信编写功
能，并自动填入手机号码
查看代码
新增的input类型 2.4
http://www.w3school.com.cn/html5/html_5_form_input_types.asp
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
类型 说明
email 邮箱
url 网页地址
number 数字
range 一定范围内数字值
date 日期
search 搜索域
tel 电话
input type="tel"截图 2.4
input type="number"截图 2.4
input type="url"截图 2.4
如何输入.cn域名？？
长按试试
input type="search"截图 2.4
和text类型比较类似，不同点在于search类型在有内容输入后，
会有个删除按钮
input type="date"截图 2.4
input type="range"截图 2.4
属性 值 描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value number 规定默认值
input type="file"截图 2.4
1. iOS只能选择【照片】中的文件
2. 支持现场拍照照片戒录制视频
3
事件
鼠标事件——mouse 3.1
mousedown
mouseup
dblclick
mousemove
mouseover
mouseout
mousedown
mouseup
dblclick
mousemove
mouseover
mouseout
移动设备中没有鼠标
因此也就没有鼠标事件
:hover 3.2
-webkit-tap-highlight-color 点击链接高亮的时候设置颜色为透明
:hover 选择器用于选择鼠标指针浮动在上面的元素
a:hover { background-color: yellow; }
a { -webkit-tap-highlight-color: yellow; }
新增touch事件 3.3
事件名称 说明
touchstart 手指放在一个DOM元素上
touchmove 手指拖曳一个DOM元素
touchend 手指从一个DOM元素上移开
touchcancel 触摸被中断
1.touchstart
2.touchmove
3.touchend
Touch事件示例代码 3.3
obj.addEventListener('touchmove', function(event) { // iOS支持多触点，android只支持一个触点 for (var i = 0; i < event.targetTouches; i++) { // DOM元素，是动作所针对的目标 var touch = event.targetTouches[i]; // 唯一标识触摸会话（touch session）中的当前手指 console.log('touched ' + touch.identifier); // 动作在屏幕上发生的位置 console.log(touch.pageX); console.log(touch.pageY); } }, false);
从touch事件演变成手势 3.4
核心还是event.targetTouches，event.pageX, event.pageY, time = touchstart - touchend
click事件 3.4
Click事件在无线web开发中依然存在，但不推荐使用
因为click事件有延迟
online/offline 3.5
navigator.onLine
online/offline 事件
navigator.onLine 属性表示当前是否在线。如果为 true, 表示在线；如果
为 false, 表示离线。当网络状态发生变化时，navigator.onLine 的值也随
之变化。开发者可以通过读取它的值获取网络状态。
开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5 还提供
了 online/offline 事件。当在线 / 离线状态切换时，会触发online/offline
事件，因此，开发者可以通过监听它们的 online/offline 事件来获悉网络
状态。
Online/offline示例代码 3.5
window.addEventListener('online', onlineHandler, false); window.addEventListener('offline', onlineHandler, false); // 监听网络变化 function onlineHandler() { console.log(navigator.onLine); }
查看代码
deviceorientation 3.6
提供设备的物理方向信息，表示为一系列本地坐标系的旋角。
触发很频繁，毫秒级，谨慎使用
//注册一个deviceorientation事件的接收器
window.addEventListener("deviceorientation",
function(event) {
// 处理event.alpha、event.beta及event.gamma
console.log(event.alpha、event.beta, event.gamma);
}, true);
orientationchange 3.7
orientationchange事件主要用于手机浏览器，作用于触发手
机的横屏和竖屏之间的切换。我们可以根据这个事件，改变手机
在横屏和竖屏的显示状态。
window.addEventListener("orientationchange",
function(event){
// portrait竖屏 | landscape 横屏
console.log(event.orientation);
});
4
调试
• 模拟器调试
• 真机调试
Chrome DevTools 4.1
https://developers.google.com/chrome-developer-tools/
官方文档
1. 按F12开启开发者工具
2. 【Emulation】选项卡
名称 说明
Device 模拟何种设备
Screen 屏幕显示相关选项
User Agent 模拟浏览器UA
Sensors 传感器信息
真机调试 4.2
1. 本地起一个web server，戒者上传到开发机
2. 用真机通过ip戒者域名访问网页
5
Q & A
