微信小程序 必须掌握的基础知识3【p29-p41】组件化开发、 什么是组件、 定义一个组件、小程序中的组件、 构建和引入自定义组件 、 自定义组件的设计、 小程序全栈开发、 使用Express

所看视频地址：哔哩哔哩网站【2018】学做小程序- 清华大学

https://www.bilibili.com/video/BV1cW411T7t6?p=1

视频-项目-源码：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。

---

代码运行时：
标签 会替换 标签 具体位置。
即，实现了在页面中控制组件中的具体内容。 

slot的作用 就是：引用模板时，给模板中定义了的位置传入数据。

设置 slot 

 

组件事件

在 item组件内部 实现 对应的自定义事件。

1. index.wxml ：binditemremove="onItemRemove"回调方法，监听事件。
2. item.wxml ：catchtap="removeTodo"设置事件，监听 点击操作。
3. item.js ：removeTodo()方法 实现对应的事件。

关于behavior和组件间关系   这两个高阶知识点，参看小程序在线文档。

p35 --- 小程序全栈开发 

全栈开发是两个维度的事情。

1. 横向维度：要了解各种平台、各种客户端相关的开发技巧。
2. 纵向维度：不光要了解客户端的开发，还要了解服务端的开发。

本节目的：将离线的小程序变成在线的小程序。
我允许你走进我的世界，但不许你在我的世界里走来走去。--- 精辟地总结了服务端的开发理念。

本节内容 ：

1. 服务端开发简介
2. 使用Express搭建Web Server
3. 结合腾讯云开发小程序
4. 路由以及自定义中间件
5. 基于Rest的API设计
6. 数据以及文件存储
7. wxtodo小程序的在线化改造

服务端开发简介

什么是Web Server？

Web Server = 服务器

需要服务端配合，存储数据状态。

Web Server的核心概念

介绍Express

• 实例化express
• 调用express()方法 实例化 一个web Server（即图中的app）
• app的get()方法：指明当前请求类型。
• get()方法的参数：【路由: 调用中间件的条件；中间件方法】 

p36 --- 使用 Express 搭建 WebServer

1. 安装Express
2. 搭建一个基础的Web Server
3. 服务端的模块化开发

安装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里 实现 模块化开发

1. 需要定义对应的其他模块的文件。如：lesson.js。
2. 通过modules.exports的方式 暴露出 想要暴露出的东西。
3. 在对应的使用它的文件中，通过require方法加载对应的模块。

p37 --- 结合腾讯云开发小程序

 腾讯云：腾讯公司提供的云服务。server配置、相关数据库、云存储知识

p38 --- 路由以及自定义中间件

1. 用户登录
2. Express中的路由
3. 自定义Express中间件

p39 --- 基于REST的API设计

1. Rest的基本概念
2. 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 --- 数据以及文件存储 

1. 结合腾讯云的数据库存储
2. 使用腾讯云的对象存储来保存用户头像

 

COS：腾讯 存储 海量文件的分布式存储服务。
 

p41 --- wxtodo小程序的在线化改造

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

1. 改造APP启动流程
2. 改造用户管理
3. 改造待办事项管理