資訊專欄INFORMATION COLUMN
摘要：使用上面的截圖是微信網(wǎng)頁版的消息提示。代碼很簡單微信網(wǎng)頁版微信網(wǎng)頁版微信全屏定義這個(gè)可以使你所打開的頁面全屏展示，沒有其他頁面外的內(nèi)容展示在屏幕上。如果你想加群交流，你也可以添加我的微信。
前言在日常開發(fā)中總是和各種 API 打交道，我們名為前端工程師實(shí)為 API 調(diào)用工程師。這篇文章我就分享 8 個(gè)有趣的 API，你若通過閱讀這篇文章對前端增加一點(diǎn)點(diǎn)的樂趣，對我來說也是一種鼓勵(lì)。
這幾個(gè) API 使用得當(dāng)?shù)脑?，可以提高你?yīng)用的友好性。
這些 API 的示例代碼我已放在 github 上，感興趣的可以 clone 代碼到本地運(yùn)行。望給個(gè) star 支持一下。
API 也可以如此有趣先看效果圖：
1. 監(jiān)聽屏幕旋轉(zhuǎn)變化接口: orientationchange
定義：
這個(gè) API 可以將你手機(jī)是否橫屏的情況暴露給需要知道的人知道。
使用：
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 | 倒屏 |
通過這個(gè) API 我們在橫屏和豎屏的時(shí)候可以添加一些動作或者是樣式的改變。
如果只是樣式的改變也可以通過媒體查詢來監(jiān)聽：
/* 豎屏 */
@media screen and (orientation: portrait) {
// some css code
}
/* 橫屏 */
@media screen and (orientation: landscape) {
// some css code
}
2. 電池狀態(tài)：navigator.getBattery()
定義：
這個(gè) API 可以將你手機(jī)電池狀態(tài)的情況暴露給需要知道的人知道。
這個(gè) api 返回的是一個(gè) promise 對象，會給出一個(gè) BatteryManager 對象，對象中包含了以下信息：
| key | 描述 | 備注 |
|---|---|---|
| charging | 是否在充電 | 可讀屬性 |
| chargingTime | 若在充電，還需充電時(shí)間 | 可讀屬性 |
| dischargingTime | 剩余電量 | 可讀屬性 |
| level | 剩余電量百分?jǐn)?shù) | 可讀屬性 |
| onchargingchange | 監(jiān)聽充電狀態(tài)的改變 | 可監(jiān)聽事件 |
| onchargingtimechange | 監(jiān)聽充電時(shí)間的改變 | 可監(jiān)聽事件 |
| ondischargingtimechange | 監(jiān)聽電池可用時(shí)間的改變 | 可監(jiān)聽事件 |
| onlevelchange | 監(jiān)聽剩余電量百分?jǐn)?shù)的改變 | 可監(jiān)聽事件 |
使用：
getBatteryInfo: function(){
let self = this;
if(navigator.getBattery){
navigator.getBattery().then(function(battery) {
// 判斷是否在充電
self.batteryInfo = battery.charging ");${battery.level * 100}%` : `沒充電 : 剩余 ${battery.level * 100}%`;
// 電池充電狀態(tài)改變事件
battery.addEventListener("chargingchange", function(){
self.batteryInfo = battery.charging ");${battery.level * 100}%` : `沒充電 : 剩余 ${battery.level * 100}%`;
});
});
}else{
self.batteryInfo = "不支持電池狀態(tài)接口";
}
},
3. 讓你的手機(jī)震動: window.navigator.vibrate(200)
定義：
這個(gè) API 可以讓你的手機(jī)按你的想法震動。
使用：
震動效果會在很多游戲使用。比如歡樂斗地主中，地主打完王炸后手機(jī)都會有震動的效果，以此來表達(dá)地主嘚瑟的心情也很是合理。
示例代碼如下：
vibrateFun: function(){
let self = this;
if( navigator.vibrate ){
navigator.vibrate([500, 500, 500, 500, 500, 500, 500, 500, 500, 500]);
}else{
self.vibrateInfo = "您的設(shè)備不支持震動";
}
},
4. 當(dāng)前語言：navigator.language
定義：
這個(gè) API 可以告訴你當(dāng)前應(yīng)該使用什么語言。
如果你需要和我一樣做多語言適配，這個(gè) API 或許可以給你提供一個(gè)不錯(cuò)的思路。
使用：
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"
}
}
}
不同的語言就對應(yīng)不同的語言文案就好。
5. 聯(lián)網(wǎng)狀態(tài)：navigator.onLine定義：
這個(gè) API 可以告訴讓你知道你的設(shè)備的網(wǎng)絡(luò)狀態(tài)是否連接著。
使用：
比如我上午登陸了掘金在看一篇文章，可是沒看完就到了吃飯的點(diǎn)，這么熱愛學(xué)習(xí)的我肯定是選擇吃完午飯回來繼續(xù)看。
30 分鐘過后……
吃晚飯回到公司，打開電腦繼續(xù)把那篇文章看完，看完了打算點(diǎn)了贊，發(fā)現(xiàn)給了這個(gè)提示：
這個(gè)提示讓我有點(diǎn)懵（就是沒網(wǎng)絡(luò)了）。
這個(gè)時(shí)候我們就可以使用這個(gè) API，這樣就可以準(zhǔn)確的告訴用戶“您的網(wǎng)絡(luò)無法連接，請檢查”。這樣用戶是不是可以有更好的體驗(yàn)?zāi)兀?/p>
代碼如下：
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";
},
}
6. 頁面可編輯：contentEditable注意：navigator.onLine 只會在機(jī)器未連接到局域網(wǎng)或路由器時(shí)返回 false，其他情況下均返回 true。 也就是說，機(jī)器連接上路由器后，即使這個(gè)路由器沒聯(lián)通網(wǎng)絡(luò)，navigator.onLine 仍然返回 true。
定義：
這個(gè) API 可以使頁面所有元素成為可編輯狀態(tài)，使瀏覽器變成你的編輯器。
使用：
你可以在地址欄輸入 data:text/html, , 這樣瀏覽器就變成了編輯器。
使用場景：
需求 —— 頁面需要一個(gè)文本輸入框。
該文本輸入框默認(rèn)狀態(tài)下有默認(rèn)文本提示信息
文本框輸入狀態(tài)下其高度會隨文本內(nèi)容自動撐開
像這樣的需求我們就可以使用 代替