2021-07-19

一、云开发环境与初始化的配置

1-1填写Appleid选择云开发

1-2开通云开发

主要是掌握下边几种

1-3获取云开发id

1-4初始化云开发环境（很重要）

云开发设置中获取appid

二、云开发数据库（增删改查）

2-1创建一个商品并改变数据（查）

出现的问题
请求的数据为空

要更改数据库的权限（管理员创建的数据，所以普通用户不可查询）

请求成功

2-1-1 查询.get()

固定写法
1、老方法

2、新es6写法（推荐写法）

eg：

查询数据库中数据并赋值到页面上
this。setdata相当于把
.get()获取的是一个数据的集合

这些赋值到list数组中！
注意：用传统方法不能用this.setdata。要在前边设置一个this=that！

***注意：更改权限，this与that用法，理解获取数据的方法和获取数据是用来做什么的。 *~~ **~~

2-1-2 条件查询where()

where中是查询的条件，可以多个条件

2-1-2 查询单条数据.doc()

.doc()中通常是数据id，用于精确查找某数据

2-2 增加数据.add()（增）

可以添加数据到collection（）的数据库中

2-3 删除数据.move()（删）

仅支持删除自己添加的数据！。
.doc('id").remove()

2-4 更改数据.update()（改）

这种格式进行更新数据
但是数据并没有更改成功，why？
看调试器发现更新的数据为0
这是因为这条数据是开发者创建的，只能更改自己创建的

2-5 增删改查综合案例

• 1，能查看商品列表
• 2， 更动态添加商品
• 3，能进入商品详情页
• 4，能删除某个商品
• 5，能修改某个商品的价格

*重点列表跳转详情页，带数据 data-

1、在wxml中定义data-
像data-_id,data_name,data_price.获取的是对应list的
2、在跳转事件中查看，发现把id赋值给了e.currentTarget.dataset.id。
如果是name则改id为name
3、已经获取了id，如何把id传递过去呢？
采用url:"/pages/demo1-1/demo1-1?id=" + e.currentTarget.dataset.id就能传递过去。

4、怎么接受id呢？
options中有传递过来的id，

一、先在数据库里添加几个数据，然后获取数据利用wx：for遍历显示出来，
具体代码参考。.get()h获取数据
设置一点css样式，显示结果
2、详情页

根据传递过来的id渲染数据

2-5-1添加商品并刷新

html代码
简单样式

获取输入的商品名称与价格，赋值到name和price中

随后add（）添加到数据库中.getlist()是获取列表数据的，使得添加成功后刷新页面。

2-5-2更改价格并刷新

html代码，

获取价格
把价格更行.updata()更新并刷新

获取的id变成全局变量才能使用

2-5-2删除商品并返回

删除商品用.move()

用户点击删除后应提示用户是否删除
如果用户点击了确定则删除，所以。move（）应在确认事件中，并且给一个转圈提示，删除成功后跳转到某页面

2-6 数据库排序orderby

可以一条，可以多条

2-7返回指定条数的数据limit（）

返回几条就limit（数字）
limit 在小程序端默认及最大上限为 20，在云函数端默认及最大上限为 1000

2-8查询返回结果分页skip（）

从指定序列后的结果开始返回，常用于分页
第三条返回
比如我们有100条数据，每次返回20条数据。那么就可以分5页返回。

• 第1页 limit(20).skip(0)
• 第2页 limit(20).skip(20)
• 第3页 limit(20).skip(40)

分页

2-9 command操作符

比较复杂的操作，使用增删改查做不了

查询比较条件操作符

2-9-1 gt大于指定的值

2-9-2 gte大于等于指定的值

表示需大于或等于指定值。可以传入 Date 对象用于进行日期比较

2-9-3 lt大于指定的值

2-9-4 lte大于等于指定的值

2-9-5 in表示要求值在给定的数组内

结果没成功，不知道为什么！以后看

2-9-6 and查询操作与

and（[{},{}]

2-9-7 or查询操作或

三、云开发~云函数

3-1初始化云函数

在项目根目录找到 project.config.json 文件，新增 cloudfunctionRoot 字段，指定本地已存在的目录作为云开发的本地根目录

3-2新建云函数

新建后会有默认的模板
调用成功后与结果

调用的结果，可根据所需进行获取res。
如果出现can find wx-server-sdk,应该执行以下操作

记得上传并部署

云函数中还要出现wx，在本地中才可以使用wx，云函数直接可以不写

如果出现环境未找到

初始化中加上自己的环境

建议使用下图常量

3-3云函数获取数据

可以突破本地只能获取到二十条的限制

js中接收数据

突破20条

3-4云函数修改数据

能够修改非自己创建的数据

先部署云函数

再调用并且传递函数

3-5云函数删除数据

能够修改非自己创建的数据

云函数，需要获取id

传递过去id

四、云储存

云开发提供了一块存储空间，提供了上传文件到云端、带权限管理的云端下载能力，开发者可以在小程序端和云函数端通过 API 使用云存储功能。

在小程序端可以分别调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作。下面简单的几行代码，即可实现在小程序内让用户选择一张图片，然后上传到云端管理的功能：

4-1图片命名规则

4-2上传图片

选择图片

上传图片
可以根据tempfilepath赋值费filepath

下边是官方简单的

4-3给商品列表添加图片

找到云储存里边的faceid或则下载地址问号前边的地址
复制到数据库中

添加连接字段，方便调用

详情页和2-5案例类似

4-4上传视频等文件

与上传图片类似
先选择
后上传
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage/api.html

五、列表的下拉刷新

5-1开启刷新

在json中加入enable、、、、

下拉刷新

该背景为非白色才能限制刷新动画

5-2开始停止下拉动画

刷新时间比较长，一般请求好数据后就停止刷新，或者刚进入页面就下拉刷新一次

六、分页

6-1小程序数据库本地请求每次只能20

小程序数据库api和云函数调用数据的限制

小程序端直接调用云数据库时，每次最多可以获取20条，云函数里调用云数据库时每次最多获取100条。所以我们数据多的时候要做分页加载。分多次加载。

分页加载的核心

skip：第几个开始

limit：加载多少个

详见2-7与2-8

6-2分页加载代码实现

可以定义一个全局变量，pages，每次触底加一

pages，每次触底加一，再次渲染既能够获取另外分页

**但这样会取代原数据，而不会在下边另外加载，

若想继续加载应concat数据

list记得用数组形式，不要用list

用list的长度可以代替前边的变量更好点，能够直接从这一个后加上。！

6-3无数据与加载中提示

根据请求后得到的数据长度如果为零
那么久已经没有数据了

加载中一般也会给一个提示

6-4云函数分页

1、部署请求数据的云函数
传递变量

2、获取云函数请求到的数据以及传递值上去

注意！！
云函数数据与本地有些许不同

七、点赞与收藏

7-1分析实现页面，

共有点赞，收藏两个灰色的图片后边跟着收藏的数量
点赞与收藏用灰色的图片，后边跟则本记录的数量，每次用户点击加一。

点赞后的效果。
效果实现，变色的图片

7-2本地实现

借助变量shoucang与dianzan判断用户是否点击而更换不同的图片

7-3 同步云服务器点赞与收藏状态

首先编写云函数
点赞与收藏可以公用一个函数，用action区分

记得加await

更新收藏

更新点赞

必要时加上数量数据