手機屏幕經常使用api

時間 2019-12-04

標籤手機屏幕經常使用 api 简体版

原文原文鏈接

在平常開發中老是和各類 API 打交道，咱們名爲前端工程師實爲 API 調用工程師。這篇文章我就分享 8 個有趣的 API，你若經過閱讀這篇文章對前端增長一點點的樂趣，對我來講也是一種鼓勵。css

這幾個 API 使用得當的話，能夠提升你應用的友好性。這些 API 的示例代碼我已放在 github 上，感興趣的能夠 clone 代碼到本地運行。望給個 star 支持一下。 API 也能夠如此有趣先看效果圖：html

監聽屏幕旋轉變化接口: orientationchange 定義：這個 API 能夠將你手機是否橫屏的狀況暴露給須要知道的人知道。使用： screenOrientation: function(){ let self = this; let orientation = screen.orientation || screen.mozOrientation || screen.msOrientation; window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { self.angle = orientation.angle; }); }, 複製代碼

orientation.angle 值屏幕方向前端

0 豎屏git

90 向左橫屏github

-90/270 向右橫屏web

180 倒屏api

經過這個 API 咱們在橫屏和豎屏的時候能夠添加一些動做或者是樣式的改變。promise

若是隻是樣式的改變也能夠經過媒體查詢來監聽： /* 豎屏 / @media screen and (orientation: portrait) { // some css code } / 橫屏 */ @media screen and (orientation: landscape) { // some css code } 複製代碼2. 電池狀態：navigator.getBattery() 定義：這個 API 能夠將你手機電池狀態的狀況暴露給須要知道的人知道。瀏覽器

這個 api 返回的是一個 promise 對象，會給出一個 BatteryManager 對象，對象中包含了如下信息：微信

key 描述備註

charging 是否在充電可讀屬性

chargingTime 若在充電，還需充電時間可讀屬性

dischargingTime 剩餘電量可讀屬性

level 剩餘電量百分數可讀屬性

onchargingchange 監聽充電狀態的改變可監聽事件

onchargingtimechange 監聽充電時間的改變可監聽事件

ondischargingtimechange 監聽電池可用時間的改變可監聽事件

onlevelchange 監聽剩餘電量百分數的改變可監聽事件

使用： getBatteryInfo: function(){ let self = this; if(navigator.getBattery){ navigator.getBattery().then(function(battery) { // 判斷是否在充電 self.batteryInfo = battery.charging ? 在充電 : 剩餘 ${battery.level * 100}% : 沒充電 : 剩餘 ${battery.level * 100}%; // 電池充電狀態改變事件 battery.addEventListener('chargingchange', function(){ self.batteryInfo = battery.charging ? 在充電 : 剩餘 ${battery.level * 100}% : 沒充電 : 剩餘 ${battery.level * 100}%; }); }); }else{ self.batteryInfo = '不支持電池狀態接口'; } }, 複製代碼3. 讓你的手機震動: window.navigator.vibrate(200) 定義：這個 API 可讓你的手機按你的想法震動。使用：震動效果會在不少遊戲使用。好比歡樂鬥地主中，地主打完王炸後手機都會有震動的效果，以此來表達地主嘚瑟的心情也非常合理。示例代碼以下： vibrateFun: function(){ let self = this; if( navigator.vibrate ){ navigator.vibrate([500, 500, 500, 500, 500, 500, 500, 500, 500, 500]); }else{ self.vibrateInfo = "您的設備不支持震動"; } }, 複製代碼4. 當前語言：navigator.language 定義：這個 API 能夠告訴你當前應該使用什麼語言。

若是你須要和我同樣作多語言適配，這個 API 或許能夠給你提供一個不錯的思路。

使用：

不一樣瀏覽器返回的值稍微有點差別。你能夠經過如下封裝好的方法來消除這種差別： function getThisLang(){ const langList = ['cn','hk','tw','en','fr']; const langListLen = langList.length; const thisLang = (navigator.language || navigator.browserLanguage).toLowerCase(); for( let i = 0; i < langListLen; i++ ){ let lang = langList[i]; if(thisLang.includes(lang)){ return lang }else { return 'en' } } } 複製代碼不一樣的語言就對應不一樣的語言文案就好。 5. 聯網狀態：navigator.onLine 定義：這個 API 能夠告訴讓你知道你的設備的網絡狀態是否鏈接着。使用：好比我上午登錄了掘金在看一篇文章，但是沒看完就到了吃飯的點，這麼熱愛學習的我確定是選擇吃完午餐回來繼續看。 30 分鐘事後…… 吃晚飯回到公司，打開電腦繼續把那篇文章看完，看完了打算點了贊，發現給了這個提示：

這個提示讓我有點懵（就是沒網絡了）。這個時候咱們就可使用這個 API，這樣就能夠準確的告訴用戶「您的網絡沒法鏈接，請檢查」。這樣用戶是否是能夠有更好的體驗呢？代碼以下： mounted(){ let self = this; window.addEventListener('online', self.updateOnlineStatus, true); window.addEventListener('offline', self.updateOnlineStatus, true); }, methods: { updateOnlineStatus: function(){ var self = this; self.onLineInfo = navigator.onLine ? "online" : "offline"; }, } 複製代碼注意：navigator.onLine 只會在機器未鏈接到局域網或路由器時返回 false，其餘狀況下均返回 true。也就是說，機器鏈接上路由器後，即便這個路由器沒聯通網絡，navigator.onLine 仍然返回 true。

頁面可編輯：contentEditable 定義：這個 API 可使頁面全部元素成爲可編輯狀態，使瀏覽器變成你的編輯器。使用：

你能夠在地址欄輸入 data:text/html, , 這樣瀏覽器就變成了編輯器。

使用場景：需求 —— 頁面須要一個文本輸入框。

該文本輸入框默認狀態下有默認文本提示信息文本框輸入狀態下其高度會隨文本內容自動撐開

像這樣的需求咱們就可使用

代替

標籤。
不過 contentEditable='true' 是不會有 placeholder 的，那 placeholder 怎麼辦呢？
我通常會使用以下方案，輸入內容後改變 class：
<div class='haveInput' contentEditable='true' placeholder='請輸入'></div> 
// css 樣式
.haveInput:before {
 content: attr(placeholder);
 display: block;
 color: #333;
}
複製代碼7. 瀏覽器活躍窗口監聽: window.onblur & window.onfocus
定義：
這兩個 api 分別表示窗口失去焦點和窗口處於活躍狀態。
瀏覽其餘窗口、瀏覽器最小化、點擊其餘程序等， window.onblur 事件就會觸發;
回到該窗口， window.onfocus 事件就會觸發。
使用：
上面的截圖是微信網頁版的消息提示。
代碼很簡單：
mounted(){
let self = this;
window.addEventListener('blur', self.doFlashTitle, true);
window.addEventListener('focus', function () {
clearInterval(self.timer);
document.title = '微信網頁版';
}, true);
},
methods: {
doFlashTitle: function(){
var self = this;
self.timer = setInterval( () => {
if (!self.flashFlag) {
document.title = "微信網頁版";
} else {
document.title = <code>微信（${self.infoNum}）</code>;
}
self.flashFlag = ! self.flashFlag
}, 500)
},
}
複製代碼8. 全屏 API（Fullscreen API）
定義：
這個 API 可使你所打開的頁面全屏展現，沒有其餘頁面外的內容展現在屏幕上。
使用：
Element.requestFullscreen() 方法用於發出異步請求使元素進入全屏模式。
調用此 API 並不能保證元素必定可以進入全屏模式。若是元素被容許進入全屏幕模式，document 對象會收到一個 fullscreenchange 事件，通知調用者當前元素已經進入全屏模式。若是全屏請求不被許可，則會收到一個 fullscreenerror 事件。
當進入/退出全屏模式時,會觸發 fullscreenchange 事件。你能夠在監聽這個事件，作你想作的事。
fullScreenFun: function(){
let self = this;
var fullscreenEnabled = document.fullscreenEnabled ||
document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled ||
document.msFullscreenEnabled;
<pre><code>if (fullscreenEnabled) {
 let de = document.documentElement;
 if(self.fullScreenInfo === '打開全屏'){
 if( de.requestFullscreen ){
 de.requestFullscreen();
 }else if( de.mozRequestFullScreen ){
 de.mozRequestFullScreen();
 }else if( de.webkitRequestFullScreen ){
 de.webkitRequestFullScreen();
 }
 self.fullScreenInfo = '退出全屏'
 } else {
 if( document.exitFullscreen ){
 document.exitFullscreen();
 }else if( document.mozCancelFullScreen ){
 document.mozCancelFullScreen();
 }else if( document.webkitCancelFullScreen ){
 document.webkitCancelFullScreen();
 }
 self.fullScreenInfo = '打開全屏'
 }
} else {
 self.fullScreenInfo = '瀏覽器當前不能全屏';
}
</code></pre>
}
複製代碼相關：
document.fullscreenElement: 當前處於全屏狀態的元素 element
document.fullscreenEnabled: 標記 fullscreen 當前是否可用
document.exitFullscreen(): 退出全屏
後記
這篇文章很簡單。個人目的是想介紹一下有趣的 API，來提升你們對前端的一點興趣。
我認爲這些 API 比較有趣，若你一直疲於業務，那麼這些 API 或許能夠給你不同的感覺
做者：小生方勤
連接：<a href="https://juejin.im/post/5c92446b6fb9a070c022f0e2" target="_blank">https://juejin.im/post/5c92446b6fb9a070c022f0e2</a>
來源：掘金
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。