「移动端」前端常见知识点总结
「移动端」前端常见知识点总结，如常见的获取位置、摇一摇功能、判断手机类型、检查浏览器版本信息、手机拍照功能、发送短信等等
1、获取位置
HTML5地理位置API，允许js程序向浏览器询问用户的真实信息，移动端使用GPS获取的位置，非常精准。但是地理位置API的浏览器访问前总是会询问是否同意，如果同意的话就会获取到位置，否则获取不到。
geolocation对象获取位置的方法：
- getCurrentPosition – 获取一次位置信息。
- watchPosition – 监听当前位置，位置改变之后就会执行函数
- clearWatch – 清除 watchPosition
具体获取用户位置代码如下：
navigator.geolocation.getCurrentPosition(success=>{ console.log(success.coords)//包含位置的经纬度、速度、海拔、经纬度精度、海拔精度信息 },fail=>{ console.log(fail)//获取失败的原因 },{ //可增加的4个配置参数 enableHighAccuracy:true,//高精度 timeout:5000,//超时时间,以ms为单位 maximumAge:24*60*60*1000,//位置缓存时间,以ms为单位 })
位置获取成功后返回的 success.coords 的属性及意义如下：
- coords.latitude – 纬度
- coords.longitude – 经度
- coords.altitude – 海拔
- coords.speed – 速度
- coords.accuracy – 经纬度精度
- coords.altitudeAccuracy – 海拔精度
- coords.heading – 方向，从正北开始的弧度数
具体详细内容，请点击《HTML5(二)——获取用户位置》。
2、摇一摇
微信活动页面经常有“摇一摇，拿好礼”，还有拼多多摇现金，摇一摇功能也非常常见。HTML5 提供的 devicemotion 事件封装了设备的运动传感器，提供设备的加速度，还提供设备自转速率。对设备运动状态进行判断，就可以实现“摇一摇”效果。
devicemotion 监听手机加速度变化的事件：
- acceleration – 加速度
- accelerationIncludingGravity – 重力加速度
- rotationRate – 旋转速度
- interval – 获取的时间间隔
摇一摇代码示例：
var shake_threshold = 4000; //放一移动的干扰，设置一个临界值 /* 使用之前先检查浏览器是否支持 */ if(window.DeviceMotionEvent){ /* 添加事件 */ window.addEventListener(\'devicemotion\',function(eventData){ var acceleration =eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); if ((curTime-last_update)> 10) { var diffTime = curTime -last_update; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000; if (speed > SHAKE_THRESHOLD) { alert("摇一摇成功了！"); // Do something } } }) }
3、判断手机类型
var type=""; if (/android/i.test(navigator.userAgent)){ type="android"; } if (/ipad|iphone|mac/i.test(navigator.userAgent)){ type="ios"; }
4、检查浏览器类型
var browser={ versions : function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf(\'Trident\') > -1, //IE内核 presto: u.indexOf(\'Presto\') > -1, //opera内核 webKit: u.indexOf(\'AppleWebKit\') > -1, //苹果、谷歌内核 gecko: u.indexOf(\'Gecko\') > -1 && u.indexOf(\'KHTML\') == -1, //火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf(\'Android\') > -1 || u.indexOf(\'Linux\') > -1, //android终端或者uc浏览器 iPhone: u.indexOf(\'iPhone\') > -1 || u.indexOf(\'Mac\') > -1, //是否为iPhone或者QQ HD浏览器 iPad: u.indexOf(\'iPad\') > -1, //是否iPad webApp: u.indexOf(\'Safari\') == -1 //是否web应该程序，没有头部与底部 }; }(), language:(navigator.browserLanguage || navigator.language).toLowerCase() } browser.language // 语言 browser.versions.mobile // 是否为移动终端 browser.versions.ios // ios终端 browser.versions.android // android终端 browser.versions.iPhone // 是否为iPhone browser.versions.iPad // 是否iPad
移动端浏览器也有很多，制作广告插件的同学，天天面对的是不同浏览器屏蔽广告，所以需要研究每个浏览类型。写插件的时候经常需要根据不同浏览器单独处理某些元素。
5、拍照
由于调用摄像头有使用权限，只能在本地运行，线上运行需要使用 https 域名才可以使用。网页内调用摄像头拍照。目前浏览器提供了API能够直接访问用户媒体设备（摄像头、麦克风）。
navigator.mediaDevices.getUserMedia
作用：为用户直接提供直接连接摄像头、麦克风的硬件设备接口。
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream){ // 获取成功 } catch(function(error){ //获取失败 }
constraints 为音频和视频指定参数 ，如：
{ audio:true , video:true } // 在获得的媒体中同时包含音频与视频
{
audio: true,
video: { width: 1280, height: 720 } // 获得指定了大小的视频
}
6、打电话
网页信息中基本都有联系电话号码，联系我们等按钮，在移动端经常需要加入拨打电话功能，这样用户只要点击一下就可以拨打电话了。
使用代码如下：
<a href="tel:phonenumber">报警!</a>
以下两种方法亲测无效：
- <a href=”wtai://wp//mc;10086″>拨打10086 </a>
- <a href=”dc:5040*0077″>拨打热线</a>
7、发短信
想要实现在网页上点击快捷发送短信功能，此时安卓和ios写法相同，但是结果却不同。
<a href="sms:10010?body=TD">发送短信TD到10010</a>
安卓手机：点击之后直接就可以把 TD 作为内容，直接发送到10010。
ios手机：点击之后电话号码变成 10010?body=TD 。
测试各种机型，无法兼容所有，最后去掉内容，只保留电话号码。