derrickyang007 / combat-cloud

社交小程序云开发

云开发 quickstart

这是云开发的快速启动指引，其中演示了如何上手使用云开发的三大基础能力：

• 数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 文档型数据库
• 文件存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
• 云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写业务逻辑代码

参考文档

• 云开发文档

项目名称

社交小程序云开发

1. 微信小程序云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代。开发给我们带来最大的影响是，前端在构建自己独立的项目时候，不需要依赖后端的接口来实现数据的获取和存储，或者一直在测试着自己的本地的假数据。通过小程序云开发，初学者都可以独立完成项目开发。

2. 本项目主要分为 12 个任务：

任务一： 环境搭建 主要通过小程序IDE中建立云开发快速启动模版，快速搭建云开发项目并配置好页面。

任务二：项目配置 主要通过业务需求配置项目中的业务模版及其地址，以及数据库集合与权限的创建。

任务三：我的页面 主要通过云函数获取用户的 openid 完成用户的登录功能，并对登录前后的样式状态进行展示。

任务四：发布页面 主要通过云开发中云数据库、云存储的能力对所选择的图片、视频资源进行存储，并对其返回的资源地址往云数据库集合中添加。

任务五：首页开发 主要通过云开发中云数据库的方法对数据进行有规则的获取，并展示及完成下拉分页的功能。

任务六：组件化

任务七：详情页

任务八：回复计数

任务九：我的发布

任务十：我的回复

效果图如下：

项目解读

项目围绕着将围绕发表、展示、详情、回复的几个功能，全面应用微信小程序的云开发功能。

1. 在发布中，我们将对用户所选择的文字、图片及视频资源进行上传存储，之后在把数据往云数据库集合中添加新记录。
2. 在展示中，我们将从云数据库集合中获取每个用户发布的话题信息展示。
3. 在详情中，我们将从云数据集合中获取对应话题的详情及回复内容，同时具备回复的功能
4. 在回复中，我们将为对应的云数据集合中添加回复信息记录，同时使用云函数使用最高的权限修改别的用户创建的云数据库集合数据。

项目包含 6 个页面，为首页、我的页面、发布页面、详情页面、我的发布及我的回复页面。在发布页面中，用户讲输入文字、图片、视频信息上床到云存储并在云数据库中生成记录。这些所有用户发布的记录，将在首页展示。在我的页面中，讲对用户的登录状态进行鉴权，如果已经登录的用户即可展现发布、我的微博和我的回复入口。我的微博展示当前用户发布的所有微博话题，我的回复展示当前用户的所有回复。

• 技能要求

• 掌握 HTML
• 掌握 CSS
• 掌握 Less
• 掌握 JavaScript
• 了解 微信小程序
• 了解 微信小程序云开发

项目

1.1 -环境搭建 查阅小程序云开发文档，熟悉理解其能力，文档地址。

1.2 - 项目配置

项目主要包含 6 个页面，分别是 首页、详情页、我的页面、发布页、我的发布和我的评论 6 个页面。我们需要添加该 6 个页面同时完成页地址和底部 tab 配置。

在业务需求中我们可以知道我们数据的格式存储主要为 2 个方面，分别为话题和回复。因此我们需要在云开发的控制面板数据库添加 2 个数据库集合：

1. topic，权限：所有用户可读，仅创建者及管理员可写。
2. reply，权限：所有用户可读，创建者及管理员可写。

任务要求：

1. 添加及配置页面，并配置 tab
2. 创建话题、回复数据库集合，并添加权限

任务提示：

1. 删除 images、pages、style 文件夹中的内容，清除 app.wxss 文件中的内容。
2. 在 pages 中新建 index、detail、my、create、my_topic、my_reply 6 个页面文件夹，并在各个文件夹中新建与其文件夹同名的 wxml、wxss、js、json 文件。
3. 在 app.json 中的 pages 配置中，引用这个 6 个页面地址以及 tab 地址。
4. 点击云开发，切换到数据库，添加集合，权限设置。
5. 可以去 iconfont 找自己喜欢的 tab 图片

1.3 - 我的页面

首页需要显示的每一条微博都是用户发送才拥有的数据，如果我们要做首页就需要先完成发布页面及功能。但是用户发布需要先登录获取用户的信息，因此我们还需要先完成我的页面，并且在这一个页面中，让用户完成授权登录，然后展示跳转到发布页面入口。

我的页面主要由 3 个部分构成，用户信息模块、导航跳转模块、及登录授权模块。

1. 用户信息里面包含用户名和头像
2. 导航跳转模块，分别跳转到微博发布页面、我的微博页面及我的回复页面
3. 登录模块用于在用户未授权登录时候显示让其授权

在本任务中，我们需要通过云函数获取用户的 openid 完成用户的登录功能，并对登录前后的样式状态进行展示。

任务要求：

1. 在全局文件 app.js 中定义获取用户信息的公共方法 ，使用云函数能( 云开发模版默认包含 ）获取 openid 。
2. 完成我的页面结构与样式。
3. 在我的页面中，如果用户曾授权登录，出现用户信息和导航模块。
4. 在我的页面中，如果用不没授权，则出现登录授权模块。

任务提示：

1. 创建 cloudInit 初始化云开发配置。调用 wx.cloud.init 传入 traceUser 为 true 代表记录用户到后台中。
2. 定义获取用户信息的全局方法，调用 wx.getSetting 方法查看用户是否授权过，如果有就调用 wx.getUserInfo 获取用户信息并存储到 globalData 中，调用云函数获取 open_id 。
3. 页面在 onLoad 页面加载时调用全局 getUserInfo 方法获取用户信息。
4. 页面把用户信息设置到 Page.data.userInfo 内。
5. 用户点击授权按钮，同样调用全局 getUserInfo 方法。

1.4 - 发布页面

发布页面用于发布微博内容，内容有三种展现形式分别为文字、图片和视频。页面主要由用户输入模块、资源模块和发布按钮模块 3 个部分构成。

发布页面是登录之后才能过跳转使用的页面，在上一个任务中，我们已经成功授权。因此当页面加载时候，就会自动获取用户的信息及 openid。为了方便调试我们可以修改配置文件把发布页面在首屏显示。同时我们的数据存储到云开发的数据库中，因此还需要确保控制台有对应集合。

发布页面结果主要由输入模块、资源选择模块和发布按钮组成。

1. 输入模块可以使用 textarea 组件。
2. 资源模块模块中包含添加资源、图片预览及视频预览。
3. 发布按钮模块中只含有一个按钮

本任务，我们一起来完成资源的发布功能，可以在 app.json 中的 pages 属性把页面放置在第一条方便调试。

任务要求：

1. 完成发布页面结构与样式。
2. 用户可以选择文字、图片、视频发布。
3. 用户选择的图片、视频资源上传到云存储。
4. 用户创建的话题数据添加到云数据库 topic 话题集合。

任务提示：

5. 引用工具函数、全局对象、及实例化云数据库

6. 定义视图所需要的数据信息，content 文字、imageUrl 图片地址、videoUrl 视频地址

7. 定义 handleChange 方法，作为 WXML 中的 textarea 元素 bindinput 发生改变的回调函数。用于实时监听输入的文本然后设置在 Page.data.content 中。

8. 定义 handleUpload 方法，作为添加资源的 bindtap 点击回调。当用户点击时候使用 wx.showActionSheet API 唤起选择。更具不同的选择类型，调用拍照或者摄像功能。并在选择资源成功之后把资源地址传给 uploadFile 方法。

9. 定义 uploadFile 方法，接收一个类型、和资源地址作为参数。根据 openid 和时间戳拼接出文件名 调用 wx.cloud.uploadFile 把文件上传到云开发的存储管理内。

10. 定义 handleSubmit 方法，作为发布元素点击的回调函数。当用户点击发布时候，判断文字、图片、视频资源最少有一个，然后使用 db.collection 连接 topic 数据库，再使用 add 方法为 topic 集合添加一条记录。记录包含 文字、图片、视频资源、用户信息，创建时间及预留一个回复计数字段。当成功添加后，我们可以在成功回调函数中的参数获取到当前记录的 id ，拼接地址，跳转到首页。

1.5 - 首页开发 首页主要为最新话题的展示页面，信息主要有文字信息、图片信息和视频信息三种。当用户点击话题时跳转到详情页，当用户点击图片资源时预览图片，当用户点击视频时全屏播放。 在发布页中，我们分别为 文字、图片、视频 的内容展现方式创建三个话题。话题分为左右两栏，左边为头像，右边为主题内容。

1. 信息包含用户昵称、文字、资源 和 信息。
2. 资源中包含图片或者视频，或者两者都没有。
3. 信息包含显示日期和回复数量

在本次任务中，我们需要通过云函数获取发布的话题，然后在首页中展示。

任务要求：

1. 首页中展示所有人发布的话题，内容包含文字、图片、视频、时间、回复数量
2. 话题展示一次获取 10 条，触底再获取 10 条
3. 点击话题跳转到话题详情页
4. 点击发布的图片全局预览
5. 点击发布的视频全局播放

任务提示：

1. 点击图片调用 wx.previewImage
2. 点击视频调用 wx.createVideoContext
3. 视频放一层 cover-view 用于遮罩展示区域坚听点击事件
4. 在 Page.data 中定义当前页面、总共页面、以及单次获取信息的条数
5. 使用 db.collection 连接集合，并配合 skip、limit、orderBy 获取对应规则数据
6. skip 不能为 0，需要判断当前页数
7. 如果当前页面数 * 单次获取信息条数大于数据总量，则不再获取新数据
8. 使用 wxs 模版来过滤日期结构的数据，返回自定义的日期结构，例如：2019-5-20 13:14

1.6 - 组件化

那到底什么是自定义组件呢 ？通俗来说，自定义组件类似于页面，自定义组件拥有自己的模版、样式和脚本。组件模板的写法与页面模板相同，组件对应 wxss 文件的样式，只对组件wxml内的节点生效，且有些情况不能使用。例如：

• 不能使用 id 选择器、属性选择器和标签选择器。
• 后代选择器在一些极端情况下会有非预期的表现。
• 除 font、color 继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。
• 组件脚本可以通过 Component 构造器指定组件的属性、数据、方法。
• 组件配置需要定义自身 component 属性为 true。

在项目中，「 首页 」的话题列表中的结构、样式、交互都和「 我的微博 」页面中的话题列表中的结构、样式和交互一直。如果我们不抽离，就需要把代码拷贝一份，如果发生修改，就需要在两处进行修改。如果我们仅仅抽离出模版，那么页面中相同功能的脚本例如图片预览和全屏播放视频都要复制分开各自的页面维护。如果封装话题列表为自定义组件，那么各个页面只要关注获取的数据皆可，展示和交互都可以交给组件来完成。

在本次任务中，我们来一起创建 topic 话题自定义组件。

任务要求：

1. 创建话题组件，把首页的话题功能和交互都集成过去。
2. 在首页使用话题组件。

任务提示：

参考小程序自定义事件文档创建组件 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 在首页中使用自定义组件需要注意配置 json 配置文件

1.7 - 详情页

详情页主要拥有展示详情信息和评论两个重要的功能。包含话题的内容信息模块、登录模块、评论功能模块和评论列表模块。当用户在没有登录的状态下显示登录功能模块，并隐藏评论功能模块，当用户点击授权登录后，切换显示。

任务要求：

1. 展示详情相关信息
2. 根据登录状态展示登录模块
3. 登录后可评论，评论在评论列表中展示

任务提示：

1. 完成话题的展示
2. 完成话题评论的展示
3. 完成评论控件的展示和交互

任务提示：

1. 页面加载时根据 topic 的 id 获取云数据库对应话题信息
2. 页面加载时获取 reply 云数据库集合中对应 topic_id 的评论
3. 获取用户登录状态，如果没有登录展示登录模块，点击调取全局的获取用户信息方法
4. 当用户发表评论时候，往云数据库 reply 集合新建一条数据，并在评论列表中添加一项
5. 图片预览和视频播放可以沿用话题的处理方法
6. 评论数据需要做限量获取和下拉加载，和沿用话题处理方法

1.8 - 回复计数

在完成回复统计功能时候，我们首先要了解一下云开发的权限问题。

数据库的权限分为小程序端和管理端，管理端包括云函数端和控制台。小程序端运行在小程序中，读写数据库受权限控制限制，管理端运行在云函数上，拥有所有读写数据库的权限。云控制台的权限同管理端，拥有所有权限。

管理端始终拥有读写所有数据的权限，小程序端始终不能写他人创建的数据，小程序端的记录的读写权限其实分为了 “所有人可读，只有创建者可写”、“仅创建者可读写”、“所有人可读，仅管理端可写”、“所有人不可读，仅管理端可读写”。

在设置集合权限时应谨慎设置，防止出现越权操作。综上所述，我们不可能在客户端修改别人新建的数据，意识就是如果仅仅在客户端做评论添加功能的话，我们只能为自己的话题评论时候加一，不能在他的话题数据上修改。因此，我们需要使用管理端去进行这个操作，也就是使用云函数的概念。

一个云函数的写法与一个在本地定义的 JavaScript 方法无异，代码运行在云端 Node.js 中。当云函数被小程序端调用时，定义的代码会被放在 Node.js 运行环境中执行。我们可以如在 Node.js 环境中使用 JavaScript 一样在云函数中进行网络请求等操作，而且我们还可以通过云函数后端 SDK 搭配使用多种服务，比如使用云函数 SDK 中提供的数据库和存储 API 进行数据库和存储的操作。

在本次任务中，我们在点回复的事件中，为云数据库回复集合添加一条数据的同时，使用云函数为其对应的话题集合数据的回复计数属性，计值 + 1 。

任务要求：

完成回复计数功能

任务提示：

1. 打开开发者工具的编辑器
2. 右键云函数文件夹 cloudfunctions
3. 选择新建 Node.js 云函数
4. 输入回复递增的函数名 incReply
5. 等编辑器上次云函数和部署，成功后点击确定，会发现多了 2 个文件 index.js 和 package.json
6. 编写 incReply 递增的云函数
7. 书写完毕后，打开微信开发者工具的编辑器，在目录中寻找到 incReply 文件夹，右键选择上传并部署「 云端安装依赖 」 8 在点击回复事件中调用云函数

1.9 -我的发布

「 我的发布 」页面的样式和结构都可以复用于首页，在获取话题的逻辑加上条件即可。在本次任务中我们一起来完成我的发布页面。 任务要求：

展示我发布过的微博 单次展示 10 条，滚动到底部动态加载 任务提示：

1. 使用设计好的话题组件
2. 在获取话题时候，where 中加入 openid 筛选规则

1.10 -我的回复 「 我的回复 」页面的样式和结构都可以复用于详情页，在获取回复列表的逻辑加上条件即可。在本次任务中我们一起来完成我的回复页面。

任务要求：

1. 展示我回复过的回复
2. 点击回复跳转到对应的话题页面

任务提示：

1. 复制详情页中回复相关的结构和样式
2. 单次展示 20 条，滚动到底部动态加载
3. 在获取回复数据时候，where 中加入 openid 筛选规则