資訊專欄INFORMATION COLUMN
摘要：前言在日常開發中總是和各種打交道，我們名為前端工程師實為調用工程師。使用上面的截圖是微信網頁版的消息提示。代碼很簡單微信網頁版微信網頁版微信全屏定義這個可以使你所打開的頁面全屏展示，沒有其他頁面外的內容展示在屏幕上。
前言
在日常開發中總是和各種 API 打交道，我們名為前端工程師實為 API 調用工程師。這篇文章我就分享 8 個有趣的 API，你若通過閱讀這篇文章對前端增加一點點的樂趣，對我來說也是一種鼓勵。
這幾個 API 使用得當的話，可以提高你應用的友好性。
這些 API 的示例代碼我已放在 github 上，感興趣的可以 clone 代碼到本地運行。望給個 star 支持一下。
API 也可以如此有趣先看效果圖：
1. 監聽屏幕旋轉變化接口: 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 | 豎屏 |
| 90 | 向左橫屏 |
| -90/270 | 向右橫屏 |
| 180 | 倒屏 |
通過這個 API 我們在橫屏和豎屏的時候可以添加一些動作或者是樣式的改變。
如果只是樣式的改變也可以通過媒體查詢來監聽：
/* 豎屏 */
@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。6. 頁面可編輯：contentEditable
也就是說，機器連接上路由器后，即使這個路由器沒聯通網絡，navigator.onLine 仍然返回 true。
定義：
這個 API 可以使頁面所有元素成為可編輯狀態，使瀏覽器變成你的編輯器。
使用：
你可以在地址欄輸入 data:text/html, , 這樣瀏覽器就變成了編輯器。
使用場景：
需求 —— 頁面需要一個文本輸入框。
該文本輸入框默認狀態下有默認文本提示信息
文本框輸入狀態下其高度會隨文本內容自動撐開
像這樣的需求我們就可以使用 代替