移動端開發-Day1

時間 2019-11-12

標籤移動開發 day1 day 欄目無線简体版

原文原文鏈接

什麼是Node？html

它是一個基於Chrome v8引擎的js運行環境，採用高效輕量級的事件驅動，非阻塞式的I/O模型。node

非阻塞I/O？web

例如，當程序運行到某一函數時，調用後當即返回，不須要等待函數執行完成，便不會阻塞於此。npm

npm？瀏覽器

node package manager緩存

facebook 2016發佈了yarn服務器

Web代理工具？app

NProxy，優點：多端使用編輯器

http服務器？ide

http-server，優點：零配置

HTML5：

新標籤元素，語義化標籤，優點：比傳統的純div實現，增長了可讀性。舉例：Header、Nav（導航）、Article（章）、Section（節）、Aside（相關連接）、Footer

input元素的type擴充，不單單用於輸入文本。新type舉例：search、tel、url、email、date（日期選擇框）、color、number、range（數字大小滑塊輸入）

input用屬性進行表單驗證。required（輸入框必填），pattern（用正則驗證）、title(校驗提示信息)

input其餘有用屬性。autofocus、from、placeholder

新實用元素，progress（進度條）、Meter（標尺）、特殊元素：contentditable(編輯器)

音頻（Audio）與視頻（Video）元素

定位API：Geolocation

Geolocation經過navigator.geolocation全局對象進行訪問

判斷是否存在navigator.geolocation得知瀏覽器是否支持此API：if (navigator.geolocation)

調用navigator.geolocation.GetCurrentPosition獲取用戶位置。

拍照API：getUserMedia
判斷瀏覽器是否支持getUserMedia：if ( navigator.mediaDevices.getUserMedia||navigator.getUserMedia||navigator.webkitgetUserMedia||navigator.getUserMedia)

getUserMedia函數語法：

指定分辨率：

指定移動平臺前置或者後置攝像頭：

實現手機搖一搖：

離線和存儲：

離線web應用實戰：

比普通的web應用多了一個描述文件：用來列出須要緩存與不須要緩存的資源。

描述文件的擴展名爲：.mainfest或.appache

文件第一行以CACHE MANIFEST開頭

"CACHE:"以後的都將被離線存儲

「NETWORK:」以後的不會被離線存儲

將HTML中關聯一個離線描述文件，即可將web離線化：<html mainfest="./offline.appache">

但同時要將用戶產生的數據離線化，這須要修改js代碼：

// 獲取記錄內容的文本域
var el = document.querySelector('#content');
// 頁面載入時，從本地獲取存儲的數據
el.value = localStorage.getItem('data') || '';
// 爲文本域DOM節點添加blur事件
el.addEventListener('blur', function(){
    // 獲取文本域的內容
    var data = el.value;
    // 保存到本地
    localStorage.setItem('data', data);
});
</script>

相關標籤/搜索

每日一句

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