微信小程序 基础3【组件化开发、自定义组件、全栈开发、使用Express】
視頻地址：
https://www.bilibili.com/video/BV1cW411T7t6? 【2018】學(xué)做小程序- 清華大學(xué)
https://www.bilibili.com/video/BV1M7411w7ez? ?清華大學(xué)- 學(xué)做小程序（基礎(chǔ)+實(shí)戰(zhàn)）
?
視頻-項(xiàng)目-源碼：https://pan.baidu.com/s/1qJ_8S0yL9ES0kl5t2AfSvg
如果 百度網(wǎng)盤 鏈接 失效，可以聯(lián)系我。【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~? ? ? 如有錯(cuò)誤，歡迎指正~
?目? ?錄
p29 --- 組件化開發(fā)
項(xiàng)目代碼：?
p30 --- 什么是組件
組件定義
舉例：圖片查看器?
WEB方式 設(shè)計(jì) 圖片查看器
p31 --- 定義一個(gè)組件
組建的特點(diǎn)(高內(nèi)聚、可復(fù)用)
如何定義組件
p32 --- 小程序中的組件
p33 --- 構(gòu)建和引入自定義組件?
自定義組件的構(gòu)成以及使用?
component 構(gòu)造器
從業(yè)務(wù)需求到組件定義
p34 --- 自定義組件的設(shè)計(jì)
詳解property和data?
為 組件 添加 slot
設(shè)置 slot?
組件事件
p35 --- 小程序全棧開發(fā)?
服務(wù)端開發(fā)簡(jiǎn)介
什么是Web Server？
Web Server的核心概念
介紹Express
p36 --- 使用 Express 搭建 WebServer
安裝Express
npm install express --save? ? ? 【安裝超時(shí)！！！】?
搭建一個(gè)基礎(chǔ)的Web Server?
如何用Express去實(shí)現(xiàn)一個(gè)最基礎(chǔ)的WebServer
服務(wù)端的模塊化開發(fā)
在node.js里 實(shí)現(xiàn) 模塊化開發(fā) ：
p37 --- 結(jié)合騰訊云開發(fā)小程序
p38 --- 路由以及自定義中間件
p39 ---?基于REST的API設(shè)計(jì)
Rest的基本概念
RESTful API關(guān)鍵點(diǎn)
wxtodo項(xiàng)目中的API設(shè)計(jì)
p40 --- 數(shù)據(jù)以及文件存儲(chǔ)?
p41 ---?wxtodo小程序的在線化改造
p29 --- 組件化開發(fā)
能用眾力，則無敵于天下矣；能用眾智，則無畏于圣人矣。------?孫武
- wxtodo項(xiàng)目
- 什么是組件
- 如何定義一個(gè)組件
- 小程序中的組件
- 構(gòu)建和引入自定義組件
- 自定義組件的設(shè)計(jì)
項(xiàng)目代碼：?
https://github.com/zhongkai/wxtodo-client? ? ? ?master分支
p30 --- 什么是組件
組件定義
?組件就是以某種方式對(duì)業(yè)務(wù)邏輯和功能進(jìn)行封裝。
舉例：圖片查看器?
WEB方式 設(shè)計(jì) 圖片查看器
p31 --- 定義一個(gè)組件
組建的特點(diǎn)(高內(nèi)聚、可復(fù)用)
不管是類還是組件，都要告訴針對(duì)于實(shí)例或針對(duì)于組件渲染的結(jié)果應(yīng)該是以什么樣的方式來呈現(xiàn)。
這種告知行為是一種配置。
?
如何定義組件
當(dāng)用戶去點(diǎn)擊圖片時(shí)，會(huì)告知組件外部，發(fā)生了這樣一個(gè)點(diǎn)擊行為。
點(diǎn)擊行為的目的，并不由組件決定，而是由組件外部的具體業(yè)務(wù)決定。?
p32 --- 小程序中的組件
可通過配置和事件兩種方式，定義一個(gè)具體組件。?
p33 --- 構(gòu)建和引入自定義組件?
- 自定義組件的構(gòu)成以及使用
- Component構(gòu)造器
- 從業(yè)務(wù)需求到組件定義
自定義組件的構(gòu)成以及使用
復(fù)用同一個(gè)待辦事項(xiàng)的組件。
待辦事項(xiàng)組件，位于components目錄下??item目錄中。
頁面想展示組件，需要在json文件中配置usingComponents屬性值，指明要用的組件(item)??及???組件所在的位置。
通過屬性名(即?item)，確定組件在界面中(index.wxml)中?以什么樣的標(biāo)簽名做展示。
在history文件中，也有相同的配置。?
js里 定義了 相關(guān)的屬性值、內(nèi)部數(shù)據(jù)和相關(guān)的方法。
json里 定義了 相關(guān)的配置文件。
wxmI是對(duì)組件界面的描述。
wxss是對(duì)組件樣式的描述。
component 構(gòu)造器
properties? ? ? ? ?：外部傳進(jìn)來的屬性值。
data? ? ? ? ? ? ? ? ? ：數(shù)據(jù)。
attached?? ? ? ? ? ：組件被加載時(shí)觸發(fā)(即 組件關(guān)聯(lián)到界面時(shí) 觸發(fā))。
detached? ? ? ? ???：把組件從界面中移除時(shí) 觸發(fā)。
組件自定義方法：放在了method()內(nèi)部。
從業(yè)務(wù)需求到組件定義
- Item可根據(jù)數(shù)據(jù)源 顯示 三種不同類型的Item。
【快速添加待辦事項(xiàng)的Item；詳細(xì)添加待辦事項(xiàng)的Item；作為歷史記錄展示的Item。】
- Item可刪除。
- 首頁中的Item，可以進(jìn)行 針對(duì)狀態(tài)的toggle操作。
【在歷史記錄中不需要有針對(duì)狀態(tài)的toggle操作。】
- 歷史頁中的Item可以根據(jù)操作類型的不同，展示不同的樣式。
- content：屬性最主要的內(nèi)容的定義。
- tags：標(biāo)簽。
- extra：備注信息。
- finished：wxtodo所處狀態(tài)。
- action：針對(duì)歷史記錄。?
p34 --- 自定義組件的設(shè)計(jì)
- 詳解property和data
- 為組件添加slot
- 組件事件
詳解property和data?
組件中同樣有關(guān)于數(shù)據(jù)分離的約定。data---properties
- properties：主要控制 外部界面 傳遞給 組件的屬性。控制組件具體展示。
- data：維護(hù)組件內(nèi)部數(shù)據(jù)。【? ?data: {collapsed: true //控制備注信息是否展開}? ?】
collapsed 能否 放在 properties中 ?
- 可以，但是 會(huì) 增加 外部界面 控制 邏輯的復(fù)雜度。【data內(nèi)部維護(hù)，外部可以不維護(hù)。】
如何判斷 組件 應(yīng)放在 properties 還是 data 中 ?
- 一個(gè)簡(jiǎn)單原則就是：檢查屬性 是否 只維護(hù)在組件內(nèi)部。?
為 組件 添加 slot
組件 一般 嵌入在 界面內(nèi)部。
組件外部的界面 希望控制 組件內(nèi)部的內(nèi)容：可以，需要用slot。
代碼運(yùn)行時(shí)：
<view></ view>標(biāo)簽 會(huì)替換 <slot></ slot>標(biāo)簽 具體位置。
即，實(shí)現(xiàn)了在頁面中控制組件中的具體內(nèi)容。?
slot的作用 就是：引用模板時(shí)，給模板中定義了<slot></slot>的位置傳入數(shù)據(jù)。
設(shè)置 slot?
?
組件事件
在 item組件內(nèi)部 實(shí)現(xiàn) 對(duì)應(yīng)的自定義事件。
關(guān)于behavior和組件間關(guān)系? ?這兩個(gè)高階知識(shí)點(diǎn)，參看小程序在線文檔。
p35 --- 小程序全棧開發(fā)?
全棧開發(fā)是兩個(gè)維度的事情。
本節(jié)目的：將離線的小程序變成在線的小程序。
我允許你走進(jìn)我的世界，但不許你在我的世界里走來走去。--- 精辟地總結(jié)了服務(wù)端的開發(fā)理念。
本節(jié)內(nèi)容 ：
服務(wù)端開發(fā)簡(jiǎn)介
什么是Web Server？
Web Server = 服務(wù)器
需要服務(wù)端配合，存儲(chǔ)數(shù)據(jù)狀態(tài)。
Web Server的核心概念
介紹Express
- 實(shí)例化express
- 調(diào)用express()方法 實(shí)例化 一個(gè)web Server（即圖中的app）
- app的get()方法：指明當(dāng)前請(qǐng)求類型。
- get()方法的參數(shù)：【路由: 調(diào)用中間件的條件；中間件方法】?
p36 --- 使用 Express 搭建 WebServer
安裝Express
推薦博客：【Node.js 安裝---環(huán)境配置】
https://blog.csdn.net/weixin_44949135/article/details/105330357
直接在server文件夾下 新建app.js文件，編輯 就行了。
win10，在命令行 或者 powershell，不能“vi app.js”，會(huì)報(bào)錯(cuò)。?
npm install express --save? ? ? 【安裝超時(shí)！！！】?
搭建一個(gè)基礎(chǔ)的Web Server?
如何用Express去實(shí)現(xiàn)一個(gè)最基礎(chǔ)的WebServer
?
?
服務(wù)端的模塊化開發(fā)
在node.js和Expressed的環(huán)境中，去實(shí)現(xiàn)模塊化開發(fā)。
?
在node.js里 實(shí)現(xiàn) 模塊化開發(fā)
p37 --- 結(jié)合騰訊云開發(fā)小程序
?騰訊云：騰訊公司提供的云服務(wù)。server配置、相關(guān)數(shù)據(jù)庫、云存儲(chǔ)知識(shí)
p38 --- 路由以及自定義中間件
p39 ---?基于REST的API設(shè)計(jì)
Rest的基本概念
REST [?Representational State Transfer ]? ?----->? ?資源? ?CreateReadUpdateDelete
RESTful API關(guān)鍵點(diǎn)
HTTP語義 - 動(dòng)詞
- GET：查詢
- POST：創(chuàng)建
- PUT：更新
- PATCH：局部更新
- DELETE：刪除
狀態(tài)碼
- 200：請(qǐng)求成功，返回?cái)?shù)據(jù)。
- 3xx：請(qǐng)求成功，但需要改變請(qǐng)求資源的方式。
- 4xx：請(qǐng)求有錯(cuò)誤。
- 5xx：服務(wù)器內(nèi)部錯(cuò)誤。
錯(cuò)誤處理
{
? ?error：具體信息
}?
返回結(jié)果
- GET：返回資源對(duì)象列表/單個(gè)資源對(duì)象。
- POST：返回新生成的資源對(duì)象。
- PUT：返回修改后的完整資源對(duì)象。
- PATCH：返回被修改的屬性。
- DELETE：空(狀態(tài)碼204)。
wxtodo項(xiàng)目中的API設(shè)計(jì)
GET：/user ? 獲取當(dāng)前用戶。
POST：/user ? 創(chuàng)建用戶(注冊(cè)用戶)。
PATCH：/user ? 針對(duì)用戶的某項(xiàng)屬性進(jìn)行修改。
GET：/todos ? todo項(xiàng)目可能有很多個(gè)。
GET：/todos/id ? 獲取單個(gè)todo資源。
POST：/todos ? 直接請(qǐng)求todos接口，創(chuàng)建todo項(xiàng)目。
PATCH：/todos/id ? 修改id對(duì)應(yīng)的資源。
DELETE：/todos/id ? 刪除某一個(gè)todo資源。
BATCH
p40 --- 數(shù)據(jù)以及文件存儲(chǔ)?
?
COS：騰訊 存儲(chǔ) 海量文件的分布式存儲(chǔ)服務(wù)。
?
p41 ---?wxtodo小程序的在線化改造
https://github.com/zhongkai/wxtodo-client/tree/online?
總結(jié)
以上是生活随笔為你收集整理的微信小程序 基础3【组件化开发、自定义组件、全栈开发、使用Express】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Node.js 安装---环境配置---
- 下一篇： 若S作主串，P作模式串，试分别写出利用B