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

前端人發表於2021-08-27
前端

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 。

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

相關文章