龙空技术网

前端「移动端」常见知识点总结

前端代码女神 351

前言:

现时我们对“web前端移动端”可能比较关切,大家都需要剖析一些“web前端移动端”的相关知识。那么小编同时在网络上搜集了一些关于“web前端移动端””的相关文章,希望我们能喜欢,同学们快快来了解一下吧!

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 // 是否为iPhonebrowser.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 。

测试各种机型,无法兼容所有,最后去掉内容,只保留电话号码。

。。。。。

标签: #web前端移动端