「移動端」前端常見知識點總結

2021 年 8 月 27 日
筆記
html5

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, //蘋果、Google內核 
  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、發簡訊

想要實現在網頁上點擊快捷發送簡訊功能，此時Android和ios寫法相同，但是結果卻不同。

<a href="sms:10010?body=TD">發送簡訊TD到10010</a>

Android手機：點擊之後直接就可以把 TD 作為內容，直接發送到10010。

ios手機：點擊之後電話號碼變成 10010?body=TD 。

測試各種機型，無法兼容所有，最後去掉內容，只保留電話號碼。

Tags: html5