智能手機應用開發（趙濤老師）
第一次課（2021-09-25）
一、參考資料
node.js開發指南.pdf
參考視頻：前端開發技術圖譜（https://developer.aliyun.com/graph/frontend?spm=a2c6h.21110250.J_5703890090.6.4184760fku9YI）
二、緒論
- 互聯網大致分為三部分
- 設備端（傳感層、單片機、通訊方法）（嵌入式系統）
- 雲平台端（匯聚接入功能）
- ecs \ services \ 手機端
- 應用端（小程序）
- 網站（服務器端）
- “前端通吃”
- html + css + JavaScript
- node.js ==> 運行js的框架
- 框架運行起來就是服務器
- js開發單片機
- 混合開發
- js調用java代碼
三、前端知識框架
html / css / JavaScript（HTML5 APP應用開發教程）
-
手機開發
- h5 + mui => 手機APP
- vue => uni-app => 多端適配（Vue.js前端開發技術）
-
GitHub / k8s / docker / webpack
-
互聯網
- node.js / express / mongodb => 自己做后端（node.js開發指南.pdf）
- serverless => 雲后端
- k8s + docker 即可部署
四、網絡概述
計算機網絡由資源子網與通信子網組成
-
- Router（交換設備 / 路由器）
- “互聯網是局域網的網絡”
- 底層（物理層）：實現物理上信息傳輸
- 包括架空明線、電纜、光纖、無線信道等
- 建立在串口通信上的modbus-tcp協議（工業常用，串口而非網口）
- 網絡協議對物理層沒有約束
網絡協議層級
- 表示層
- HTTP......
- 傳輸層
- TCP、UDP
- 網絡層
- ICMP => IP <= IGMP
- 目前以IP單位發送數據
- ICMP => IP <= IGMP
- 鏈路層
- ARP <=> MAC <=> RARP
- 物理層
- 硬件
鏈路層詳解
- 鏈路層就是IP包
- 數據信道
- 目的：正確傳輸二進制
- 功能
- 鏈路管理
- 幀的裝配分解與同步
- 流量控制與順序控制
- 差錯控制
- 例如：網卡網橋等
- 采用沖突檢測/載波偵聽（CSMA/CD）
- 發送數據需要先偵聽信道，若空閑即可傳輸，反之按一定算法等待一段時間后再試；
在發送過程中進行沖突檢測，一旦有沖突立即停止發送並后續重新發送 - 以太網幀的格式
- 前導 + 同步 + 目標地址 + 源地址 + 類型 + 控制操作碼 + 控制碼參數 + 幀校驗
TCP數據包結構
- 兩個設備通訊是端口和端口之間進行通訊
HTTP協議
- http協議在服務器和客戶端之間傳送信息，用於從web服務器傳輸網頁到本地瀏覽器
- 瀏覽器作為HTTP客戶端通過URL向HTTP服務端發送請求，web服務器根據請求做出反應得到響應並向客戶端發送響應信息
- 默認端口號為80，使用統一資源標識符（URL）傳輸HTML網頁、圖檔和相關文件，URL用來識別網絡上的資源
- 格式：[ 協議: // 域名 (或IP地址) [:端口號] / 文件名 ]
五、HTML
知識介紹
-
HTML = HyperText Markup Languag
-
超文本描述語言
-
雙標簽結構
-
幾個概念：標簽、元素（標記的內容）、屬性、事件
-
html確定網頁的結構，即用標簽表示網頁上有什么元素
-
按字母順序為http://www.w3school.com.cn/tags/index.asp
-
按功能為http://www.w3school.com.cn/tags/html_ref_byfunc.asp
-
HTML5新特性與優勢
-
為了加強說明標簽，增加了標簽的屬性。格式為屬性= ”數值”. 不同的標簽有不同的屬性，公有的屬性如id/class/style；多個屬性 值用:;分開，多個屬性空格分開
-
全局屬性參見http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
-
事件屬性http://www.w3school.com.cn/tags/html_ref_eventattributes.asp
-
用一句話概述form/action/submit/name/method的關系
后續操作
- HTML在線測試
- 阿里雲html體驗實驗
- https://developer.aliyun.com/adc/scenario/bd1410dc7f5a42119cd3d0f9bad19c25?spm=a2c6h
- 本場景將提供一台配置了Windows Server 2019版本的ECS實例（雲服務器）
- 通過本教程的操作，您可以基於已有的環境快速安裝Visual Studio Code，並學習到HTML的基本知識， 幫助您了解各種常用標簽的意義以及基本用法。可以掌握的知識有：
- Visual Studio Code基本操作
- HTML基本知識
六、課后指導
-
HTTP教程
-
第一次作業
-
參考圖片
-
用阿里雲體驗實驗室建立自己的網站
-
1、建立ECS資源默認OS是Windows Server 2019
-
2、本地下載VSCODE后解壓上傳到ECS（https://dcmyd.jb51.net/201804/tools/VSCodesetupx64_jb51.rar）
-
3、ECS上運行VSCODE后安裝chinese和Preview on Web Server
-
4、編寫HTML后右鍵vscode-preview-server:Preview on side panel看本地效果
-
5、參考https://blog.csdn.net/weixin_30425949/article/details/96458867配置服務器指向自己編寫的HTML
-
6、公網訪問自己的網站即可，如圖為上交作業的效果
-
作業要點
- 1、利用體驗實驗室建立公網實驗條件，按指導書操作即可。
- 2、配置Windows Server 2019服務器參見如何配置web服務器及發布網頁_weixin_30425949的博客-CSDN博客
- 3、最終達到的效果相當於你自己建了個網站，用公網ip可訪問
- 補充：檢查用戶名只設置按鈕即可，submit先不用action屬性
-
第二次課（2021-10-10）
一、CSS
知識介紹
-
CSS = Cascading Style Sheet
-
層疊樣式表
-
渲染層
-
CSS需要關注兩個問題：01 樣式定義及應用 02 布局
-
選擇器
-
div + css 布局
- 盒子模型
后續操作
- CSS在線測試 W3school
- Chrome DevTools開發者工具調試指南
二、課后指導
-
參考資料
-
一天學會DIV+CSS布局：一天學會DIV+CSS布局_嗶哩嗶哩_bilibili
-
想深入學習網頁設計的可以把教程完整看下來，主要是用POSITION/FLOAT/DISPLAY等屬性實現網頁布局
-
第三次課（2021-10-16）
一、JavaScript
二、課后指導
01 補充一些模塊化和異步的學習
-
尚硅谷Web前端ES6教程，涵蓋ES6-ES11
https://www.bilibili.com/video/BV1uK411H7on?from=search&seid=1577764483559274634 -
ECMAScript 6簡介
https://www.cnblogs.com/xiugeng/p/9603471.html#_label7 -
JS語法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性
https://zhuanlan.zhihu.com/p/354901519 -
JavaScript的主要用途是與用戶互動以及操作DOM，只能是單線程，否則會帶來很復雜的同步問題。
-
為了利用多核CPU的計算能力，HTML5提出的Web Worker允許JavaScript腳本創建多個線程，但是子線程完全受主線程控制且不得操作DOM，並沒有改變JavaScript單線程的本質。
-
單線程的所有任務排隊順序執行，於是任務分成兩種，
-
一種是同步任務，在主線程上排隊執行形成一個執行棧，執行棧中所有任務執行完畢就會讀取執行任務隊列。
-
另一種是異步任務不進入主線程而進入任務隊列，異步任務執行完了放置一個事件通知主線程該任務才能進入主線程執行。任務隊列是一個事件的隊列，除了IO事件還有用戶事件和定時器。
如setTimeout(function(){console.log(1);}, 0);console.log(2);會顯示2/1，因為只有在執行完第二行以后才會去執行"任務隊列"中的回調函數。
-
02 知識補充
- 讓JS對操作有響應，要對 DOM 元素綁定處理函數。三種綁定的方法：
- （1）DOM元素中直接綁定；
- （2）js代碼綁定；document.getElementById("btn").onclick = function(){ alert("hello world!");}
- （3）用 addEventListener() 或 attachEvent() 來綁定事件監聽函數。
W3C定義了3個事件階段，捕獲階段、目標階段、冒泡階段，默認在冒泡階段觸發監聽器。
- 事件委托：利用事件冒泡原理委托父級執行事件。Event對象的target屬性返回事件的目標節點。
- 參考鏈接
- 瀏覽器事件模型中捕獲階段、目標階段、冒泡階段實例詳解
https://segmentfault.com/a/1190000003482372 - JS 事件綁定、事件監聽、事件委托詳細介紹
https://www.jb51.net/article/93752.html - 事件監聽的優點：1、可以綁定多個事件。2、可以removeEventListener解除綁定
https://www.bilibili.com/video/BV1AE411Z7K4?p=7 - js中的事件委托（事件代理）詳解
https://www.cnblogs.com/lauzhishuai/p/11263210.html - 前端面試題：DOM事件流與事件委托
https://www.bilibili.com/video/BV1Xq4y1W7te?from=search&seid=3987813873942043734&spm_id_from=333.337.0.0 - 前端入門教程｜js事件詳細講解｜JavaScript系列
https://www.bilibili.com/video/BV1AE411Z7K4?p=2 - 全面掌握Javascript面試必考 事件委托(代理)
https://www.bilibili.com/video/BV1yi4y1F79t?from=search&seid=2893164803772987556&spm_id_from=333.337.0.0
- 瀏覽器事件模型中捕獲階段、目標階段、冒泡階段實例詳解
第四次課（2021-10-20）
一、手機開發——基於Hbuilder
二、手機開發——基於HTML5+
三、手機開發——基於mui
四、手機開發——基於native.js
五、手機開發——基於html5+sdk
六、手機開發——應用實例
01 手機抄表
02 摔倒檢測
七、課后指導
-
4.2 Windows: 連接iOS手機
https://hx.dcloud.net.cn/Tutorial/App/PhoneDebugging?id=_42-windows-連接ios手機 -
https://www.xuetangx.com/learn/THU0809102418/THU0809102418/2300843/video/1646784
-
微信小程序
- 微信官方文檔
https://developers.weixin.qq.com/doc/ - 微信開發社區
https://developers.weixin.qq.com/community/homepage - W3SCHOOL的文本小程序開發教程
https://www.w3cschool.cn/weixinapp/9wou1q8j.html - 清華大學《學做小程序》
https://www.xuetangx.com/course/THU0809102418/2300843 - 黑馬程序員的《零基礎玩轉微信小程序》
https://www.bilibili.com/video/av73342655?p=5 - 浙江工商大學的《微信小程序開發從入門到實踐》
https://www.bilibili.com/video/BV1V7411h7F5?p=4 - 2020最新微信小程序開發零基礎入門+項目案例【新視覺實訓】
https://www.bilibili.com/video/BV1WQ4y1T7D8?p=1 - 28節課快速玩轉微信小程序
https://www.bilibili.com/video/BV1Ct411p7bj?p=1
- 微信官方文檔
-
開發一個微信小程序實例教程
https://www.cnblogs.com/luyucheng/p/6274561.html -
小程序開發起步
https://developers.weixin.qq.com/community/business/course/000264e20a0dd8e69669b609451c0d -
微信小程序開發教程手冊文檔
https://www.w3cschool.cn/weixinapp/9wou1q8j.html -
各家小程序的思路和方法大多相同，資料比較多的是微信小程序。但結合目前的硬件資源和現實需求，我們的課程以釘釘小程序為例來學習。一個比較全面的視頻教程如下，同學課下看一下，其小程序源代碼附后。
https://developer.aliyun.com/live/246891 -
實驗室有這個小車，同學可開發小程序來控制小車
https://github.com/alibaba/AliOS-Things/tree/dev_3.1.0_haas/application/miniapp#p2nLM