視頻地址：

https://www.bilibili.com/video/BV1cW411T7t6? 【2018】學做小程序- 清華大學

https://www.bilibili.com/video/BV1M7411w7ez? ?清華大學- 學做小程序（基礎+實戰）

?

視頻-項目-源碼：https://pan.baidu.com/s/1qJ_8S0yL9ES0kl5t2AfSvg

如果 百度網盤 鏈接 失效，可以聯系我。【QQ 386335886】

?【p01 - p16】：https://blog.csdn.net/weixin_44949135/article/details/105087975

?【p17 - p28】：https://blog.csdn.net/weixin_44949135/article/details/105198450

?【p29 - p41】：https://blog.csdn.net/weixin_44949135/article/details/105308817

希望能幫到大家，hhh~? ? ? 如有錯誤，歡迎指正~

---

?目? ?錄

p29 --- 組件化開發

項目代碼：?

p30 --- 什么是組件

組件定義

舉例：圖片查看器?

WEB方式 設計 圖片查看器

p31 --- 定義一個組件

組建的特點(高內聚、可復用)

如何定義組件

p32 --- 小程序中的組件

p33 --- 構建和引入自定義組件?

自定義組件的構成以及使用?

component 構造器

從業務需求到組件定義

p34 --- 自定義組件的設計

詳解property和data?

為 組件 添加 slot

設置 slot?

組件事件

p35 --- 小程序全棧開發?

服務端開發簡介

什么是Web Server？

Web Server的核心概念

介紹Express

p36 --- 使用 Express 搭建 WebServer

安裝Express

npm install express --save? ? ? 【安裝超時！！！】?

搭建一個基礎的Web Server?

如何用Express去實現一個最基礎的WebServer

服務端的模塊化開發

在node.js里 實現 模塊化開發 ：

p37 --- 結合騰訊云開發小程序

p38 --- 路由以及自定義中間件

p39 ---?基于REST的API設計

Rest的基本概念

RESTful API關鍵點

wxtodo項目中的API設計

p40 --- 數據以及文件存儲?

p41 ---?wxtodo小程序的在線化改造

---

p29 --- 組件化開發

能用眾力，則無敵于天下矣；能用眾智，則無畏于圣人矣。------?孫武

• wxtodo項目
• 什么是組件
• 如何定義一個組件
• 小程序中的組件
• 構建和引入自定義組件
• 自定義組件的設計

項目代碼：?

https://github.com/zhongkai/wxtodo-client? ? ? ?master分支

p30 --- 什么是組件

組件定義

?組件就是以某種方式對業務邏輯和功能進行封裝。

舉例：圖片查看器?

WEB方式 設計 圖片查看器

p31 --- 定義一個組件

組建的特點(高內聚、可復用)

不管是類還是組件，都要告訴針對于實例或針對于組件渲染的結果應該是以什么樣的方式來呈現。

這種告知行為是一種配置。

?

如何定義組件

當用戶去點擊圖片時，會告知組件外部，發生了這樣一個點擊行為。

點擊行為的目的，并不由組件決定，而是由組件外部的具體業務決定。?

p32 --- 小程序中的組件

可通過配置和事件兩種方式，定義一個具體組件。?

p33 --- 構建和引入自定義組件?

• 自定義組件的構成以及使用
• Component構造器
• 從業務需求到組件定義

自定義組件的構成以及使用

復用同一個待辦事項的組件。

待辦事項組件，位于components目錄下??item目錄中。

頁面想展示組件，需要在json文件中配置usingComponents屬性值，指明要用的組件(item)??及???組件所在的位置。

通過屬性名(即?item)，確定組件在界面中(index.wxml)中?以什么樣的標簽名做展示。

在history文件中，也有相同的配置。?

js里 定義了 相關的屬性值、內部數據和相關的方法。
json里 定義了 相關的配置文件。
wxmI是對組件界面的描述。
wxss是對組件樣式的描述。

component 構造器

properties? ? ? ? ?：外部傳進來的屬性值。
data? ? ? ? ? ? ? ? ? ：數據。
attached?? ? ? ? ? ：組件被加載時觸發(即 組件關聯到界面時 觸發)。
detached? ? ? ? ???：把組件從界面中移除時 觸發。
組件自定義方法：放在了method()內部。

從業務需求到組件定義

• Item可根據數據源 顯示 三種不同類型的Item。

【快速添加待辦事項的Item；詳細添加待辦事項的Item；作為歷史記錄展示的Item。】

• Item可刪除。
• 首頁中的Item，可以進行 針對狀態的toggle操作。

【在歷史記錄中不需要有針對狀態的toggle操作。】

• 歷史頁中的Item可以根據操作類型的不同，展示不同的樣式。

• content：屬性最主要的內容的定義。
• tags：標簽。
• extra：備注信息。
• finished：wxtodo所處狀態。
• action：針對歷史記錄。?

p34 --- 自定義組件的設計

• 詳解property和data
• 為組件添加slot
• 組件事件

詳解property和data?

組件中同樣有關于數據分離的約定。data---properties

• properties：主要控制 外部界面 傳遞給 組件的屬性。控制組件具體展示。
• data：維護組件內部數據。【? ?data: {collapsed: true //控制備注信息是否展開}? ?】

collapsed 能否 放在 properties中 ?

• 可以，但是 會 增加 外部界面 控制 邏輯的復雜度。【data內部維護，外部可以不維護。】

如何判斷 組件 應放在 properties 還是 data 中 ?

• 一個簡單原則就是：檢查屬性 是否 只維護在組件內部。?

為 組件 添加 slot

組件 一般 嵌入在 界面內部。

組件外部的界面 希望控制 組件內部的內容：可以，需要用slot。

---

代碼運行時：
<view></ view>標簽 會替換 <slot></ slot>標簽 具體位置。
即，實現了在頁面中控制組件中的具體內容。?

slot的作用 就是：引用模板時，給模板中定義了<slot></slot>的位置傳入數據。

設置 slot?

?

組件事件

在 item組件內部 實現 對應的自定義事件。

index.wxml ：binditemremove="onItemRemove"回調方法，監聽事件。

item.wxml ：catchtap="removeTodo"設置事件，監聽 點擊操作。

item.js ：removeTodo()方法 實現對應的事件。

關于behavior和組件間關系? ?這兩個高階知識點，參看小程序在線文檔。

p35 --- 小程序全棧開發?

全棧開發是兩個維度的事情。

橫向維度：要了解各種平臺、各種客戶端相關的開發技巧。

縱向維度：不光要了解客戶端的開發，還要了解服務端的開發。

本節目的：將離線的小程序變成在線的小程序。
我允許你走進我的世界，但不許你在我的世界里走來走去。--- 精辟地總結了服務端的開發理念。

本節內容 ：

服務端開發簡介

使用Express搭建Web Server

結合騰訊云開發小程序

路由以及自定義中間件

基于Rest的API設計

數據以及文件存儲

wxtodo小程序的在線化改造

服務端開發簡介

什么是Web Server？

Web Server = 服務器

需要服務端配合，存儲數據狀態。

Web Server的核心概念

介紹Express

• 實例化express
• 調用express()方法 實例化 一個web Server（即圖中的app）
• app的get()方法：指明當前請求類型。
• get()方法的參數：【路由: 調用中間件的條件；中間件方法】?

p36 --- 使用 Express 搭建 WebServer

安裝Express

搭建一個基礎的Web Server

服務端的模塊化開發

安裝Express

推薦博客：【Node.js 安裝---環境配置】

https://blog.csdn.net/weixin_44949135/article/details/105330357

直接在server文件夾下 新建app.js文件，編輯 就行了。

win10，在命令行 或者 powershell，不能“vi app.js”，會報錯。?

npm install express --save? ? ? 【安裝超時！！！】?

搭建一個基礎的Web Server?

如何用Express去實現一個最基礎的WebServer

?

?

服務端的模塊化開發

在node.js和Expressed的環境中，去實現模塊化開發。

?

在node.js里 實現 模塊化開發

需要定義對應的其他模塊的文件。如：lesson.js。

通過modules.exports的方式 暴露出 想要暴露出的東西。

在對應的使用它的文件中，通過require方法加載對應的模塊。

p37 --- 結合騰訊云開發小程序

?騰訊云：騰訊公司提供的云服務。server配置、相關數據庫、云存儲知識

p38 --- 路由以及自定義中間件

用戶登錄

Express中的路由

自定義Express中間件

p39 ---?基于REST的API設計

Rest的基本概念

wxtodo項目中的API設計

Rest的基本概念

REST [?Representational State Transfer ]? ?----->? ?資源? ?CreateReadUpdateDelete

RESTful API關鍵點

HTTP語義 - 動詞

• GET：查詢
• POST：創建
• PUT：更新
• PATCH：局部更新
• DELETE：刪除

狀態碼

• 200：請求成功，返回數據。
• 3xx：請求成功，但需要改變請求資源的方式。
• 4xx：請求有錯誤。
• 5xx：服務器內部錯誤。

錯誤處理

{

? ?error：具體信息

}?

返回結果

• GET：返回資源對象列表/單個資源對象。
• POST：返回新生成的資源對象。
• PUT：返回修改后的完整資源對象。
• PATCH：返回被修改的屬性。
• DELETE：空(狀態碼204)。

wxtodo項目中的API設計

GET：/user ? 獲取當前用戶。
POST：/user ? 創建用戶(注冊用戶)。
PATCH：/user ? 針對用戶的某項屬性進行修改。

GET：/todos ? todo項目可能有很多個。
GET：/todos/id ? 獲取單個todo資源。
POST：/todos ? 直接請求todos接口，創建todo項目。
PATCH：/todos/id ? 修改id對應的資源。
DELETE：/todos/id ? 刪除某一個todo資源。
BATCH

p40 --- 數據以及文件存儲?

結合騰訊云的數據庫存儲

使用騰訊云的對象存儲來保存用戶頭像

?

COS：騰訊 存儲 海量文件的分布式存儲服務。
?

p41 ---?wxtodo小程序的在線化改造

https://github.com/zhongkai/wxtodo-client/tree/online?

改造APP啟動流程

改造用戶管理

改造待辦事項管理

總結

以上是生活随笔為你收集整理的微信小程序 基础3【组件化开发、自定义组件、全栈开发、使用Express】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。