一. 云开发的认识

1.1 什么是云开发
1.2 云开发和传统模式的区别
1.3 三大基本功能的支持认识
1.4 开通云开发

二.云数据库

2.1 云数据库认识
2.2 类型支持
2.3 控制云数据库权限
2.3.1 控制云数据库的方式
2.3.2 云数据库管理管理
2.3.3 云开发初始数据的代码

三.云数据库测试

3.1 测试准备工作
3.1.1 运行时进入相应页面
3.1.2 在云数据库中创建一个集合
3.2 添加功能
3.2.1 准备一个添加按钮
3.2.2 初始数据库与操作
3.2.3 点击按钮查看结果
3.2.4 监听添加的结果
3.3 修改功能
3.3.1 准备按钮
3.3.2 实现方法
3.4 查询功能
3.4.1 准备按钮
3.4.2 查询数据
3.4.3 查询需知
3.5 删除员工
3.5.1 准备按钮
3.5.2 删除代码

四.云函数

4.1 云函数的认识
4.1.1 什么是云函数
4.1.2 安装node.js
4.1.3 云函数的位置
4.1.3 创建云函数
4.2 云函数的使用
4.2.1 完成index.js中的函数
4.2.2 上传云函数
4.2.3 调用云函数
4.3 获取openid
4.3.1 小程序已有login函数
4.3.2 准备代码
4.4 云函数操作数据库
4.4.1 准备云函数
4.4.2 准备按钮
4.4.3 调用方法
4.4.4 最终效果

五 云存储

5.1 完成图片的上传
5.1.1 准备按钮
5.1.2 准备选择图片的功能
5.1.3 准备上传的功能
5.1.4 查看云控制台
5.2 保存文件id到云数据库中
5.2.1 云数据库加一个集合
5.2.2 把数据保存到云集合中
5.3 获取图片并展示
5.3.1 获取图片路径
5.3.1 准备显示组件
5.4 下载图片
5.4.1 下载图片的按钮
5.4.2 下载方法实现

一. 云开发的认识

源码时代

1.1 什么是云开发

开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。

云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器， 使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

云开发提供了几大基础能力支持：

源码时代

1.2 云开发和传统模式的区别

源码时代 源码时代

总之，云开发可以让我们把更多关注度放到业务中来,对于小应用实在是太合适了。但是如果是开发大型的项目的话,现在传统开发的优势还是无法替代的！

1.3 三大基本功能的支持认识

源码时代

获取用户信息等,获取appid,openid,生成分享图，调用腾讯云SDK,操作数据库等...

1.4 开通云开发

源码时代 源码时代 源码时代 源码时代

二.云数据库

2.1 云数据库认识

云开发提供了一个JSON数据库,有2GB免费存储空间

要查询复杂的关系的话(关系型数据库更好)，频繁的操作的话(文档型数据库更合适)

源码时代

2.2 类型支持

String:字符串
Number:数字
Object:对象
Array:数组
Bool:布尔值
GeoPoint:地理位置点(比较特殊，需要经纬度)
Date:时间(使用的是客户端的时间)

2.3 控制云数据库权限

2.3.1 控制云数据库的方式

小程序控制(读写数据库受权限控制的限制)
云函数控制(拥有所有读写数据库的权限)
控制台控制(拥有所有读写数据库的权限)

2.3.2 云数据库管理管理

仅创建者可写，所有人可读
仅创建者可读写
仅管理端可写
权管理端可读写

2.3.3 云开发初始数据的代码

初始化:

const db = wx.cloud.database();

切换环境:

const myDB = wx.cloud.database({env:'text'});

三.云数据库测试

3.1 测试准备工作

3.1.1 运行时进入相应页面

运行时直接进入我的测试页面(即我的云开发页面)

源码时代
源码时代

3.1.2 在云数据库中创建一个集合

源码时代

3.2 添加功能
3.2.1 准备一个添加按钮

<button bindtap="insertEmp" type="primary">添加员工</button>

3.2.2 初始数据库与操作

//初始化咱们的数据库（后面就可以使用db这个常量来代表咱们的云数据库） const db = wx.cloud.database();
Page({
/**
* 页面的初始数据
*/ data: {
},
//添加一条数据insertEmp(){
//数据库中拿到employee集合并且进行数据添加db.collection("employee").add({
data:{
name:"杀死给", age:23
}
})
},
...
}

3.2.3 点击按钮查看结果

源码时代

3.2.4 监听添加的结果
使用回调的方式拿到成功与失败的结果

//添加一条数据insertEmp(){
//数据库中拿到employee集合并且进行数据添加db.collection("employee").add({
data:{
name:"杀死给", age:23
},
//操作成功后的回调方法
//成功返回添加的结果success(res){
console.log(res);
},
//操作失败后的回调方法
// 失败返回错误的编码
fail(errorcode){ console.error(errorcode);
}
})
},

使用Promise风格拿到成功失败的结果

insertEmp() {
//数据库中拿到employee集合并且进行数据添加db.collection("employee").add({
data: {
name: "杀死给", age: 23
}
}).then(res =>{
//成功后执行console.log(res);
}).catch(err=>{
//失败后执行console.error(err);
})
}

3.3 修改功能

3.3.1 准备按钮

<button bindtap="updateEmp" type="primary">修改员工</button>

3.3.2 实现方法

//修改员工updateEmp(){
//doc 中 写 的 是 需 要 修 改 的 数 据 的 id db.collection("employee").doc("3b07eb945d058a250228ef8315115a0d").update({
data:{
name:"阿里多", age:26
}
}).then(res=>{ console.log(res);
})
.catch(err=>{ console.error(err);
})
},

3.4 查询功能

3.4.1 准备按钮

<button bindtap="findEmp" type="primary">查询员工</button>

3.4.2 查询数据

findEmp(){
//where里面添加的查询条件
db.collection("employee").where({
_id:"3b07eb945d0585a50226de3b4c3a7430"
}).get().then(res=>{ console.log(res);
}).catch(err=>{ console.error(err);
})
}

3.4.3 查询需知

查询的时候只能查询到有openid的数据，如果是自己添加的数据查询需要修改相应的权限

源码时代

3.5 删除员工

删除所有的话需要使用云函数

3.5.1 准备按钮

<button bindtap="deleteEmp" type="primary">删除员工</button>

3.5.2 删除代码

//删除员工deleteEmp(){
db.collection("employee").doc("3b07eb945d0585a50226de3b4c3a7430")
.remove()
.then(res=>{console.log(res)})
.catch(err=>{console.error(err)})
}

四.云函数

4.1 云函数的认识
4.1.1 什么是云函数

云函数即在云端（服务器端）运行的函数。在物理设计上，一个云函数可由多个文件组成，占用一定量的 CPU 内存等计算资源；各云函数完全独立；可分别部署在不同的地区。开发者无需购买、搭建服务器，只需编写函数代码并部署到云端即可在小程序端调用，同时云函数之间也可互相调用。

4.1.2 安装node.js

云函数需要node的支持(需要安装node.js)
下载node安装包(至少是node v8.0以上的版本)
安装后在 控制台/终端 输入node -v 与 npm -v 有效果代表安装成功

源码时代

4.1.3 云函数的位置

本地的位置

源码时代

云端的位置

源码时代

4.1.3 创建云函数

创建云函数

源码时代

自动上传云函数

源码时代

云开发位置查看云函数

源码时代

云函数结构
package.json：一些模块与配置信息
index.js 云函数的入口文件

其它注意点
早期:wx-server-sdk错误，点击安装即可 调用时提示未安装
云函数右键，终端中打开
输入

npm install ‐‐save wx‐server‐sdk@latest

4.2 云函数的使用

4.2.1 完成index.js中的函数

// 云函数入口文件
//这里拿到云端信息，我们现在暂时用不到，可以把它进行注释或者删除
// const cloud = require('wx‐server‐sdk')
// cloud.init()
// 云函数入口函数
/**
* event:小程序端调用这个方法传过来的相应的参数
* context:上下文环境，也包括当前登录用户的一些信息
*/
exports.main = async (event, context) => {
//返回一个对象，对象中包括咱们求和的函数return {
sum:event.num1 + event.num2
}
}

4.2.2 上传云函数
每次修改完成后，都需要进行上传部署
右键云函数，选择上传并部署
上传并部署:云端安装依赖(不上传node modules) -> 云端安装环境
上传并部署:所有文件 -> 把环境传上去可以在云控制台中进行云函数的功能测试

image.png

4.2.3 调用云函数

准备按钮

<view>云函数</view>
<button bindtap="sum" type="primary">调用云函数</button>

准备函数

sum(){
wx.cloud.callFunction({ name:"sum",
data:{
num1:4, num2:8
}
})
.then(res => {console.log(res)})
.catch(err=>{console.error(err)})
}

查看函数调用状态

源码时代

4.3 获取openid

获取openid对以后的登录功能是非常有用的
我们不需要像传统方式那样再通过code去后台拿对应的id

4.3.1 小程序已有login函数

咱们依然需要先把login函数上传

4.3.2 准备代码

按钮准备

<button bindtap="getOpenId" type="primary">获取openId</button>

功能代码完成

getOpenId(){ wx.cloud.callFunction({
name: "login"
}).then(res => { console.log(res) })
.catch(err => { console.error(err) })
}

结果查看

源码时代

4.4 云函数操作数据库

咱们可以通过云函数批量删除数据库信息

4.4.1 准备云函数

不要忘了完成后上传

源码时代

// 云函数入口文件
const cloud = require('wx‐server‐sdk') cloud.init()

// 云函数入口函数
exports.main = async (event, context) => { const wxContext = cloud.getWXContext(); const db = cloud.database();
//此处把年纪大于20的都删除掉
// await只能在async函数中，代表完成后再返回try{
return await db.collection("employee").where({ name:"阿里
}).remove();
}catch(e){ console.error(e);
}
}

4.4.2 准备按钮

<button bindtap="batchDelete" type="primary">批量删除</button>

4.4.3 调用方法

batchDelete(){ wx.cloud.callFunction({
name:"deleteData"
}).then(res => { console.log(res) })
.catch(err => { console.error(err) })
}

4.4.4 最终效果

源码时代

五 云存储

咱们云存储主要是完成文件的上传下载等操作
图片可以从相册中获取，也可以直接拍照

5.1 完成图片的上传

5.1.1 准备按钮

<button bindtap="uploadImg" type="primary">上传图片</button>

5.1.2 准备选择图片的功能
在相应的页面js中拿到图片
文档 -> api -> 媒体 -> 图片(chooseImage)

uploadImg(){
//选择一张图片wx.chooseImage({
//可以选择几张图片(最多9张，多张的话涉及到异步的问题) count: 1,
//sizeType:确定是以源文件的形式还是压缩文件形式上传sizeType: ['original', 'compressed'],
//sourceType：图片来源,是本地图库还是从相机会获取sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
// 这个是成功后图片的临时路径（后面上传到云存储就需要用到） const tempFilePaths = res.tempFilePaths console.log(tempFilePaths);
}
})
}

5.1.3 准备上传的功能

文档 -> 云开发 -> 存储(uploadFile)

uploadImg(){
//选择一张图片wx.chooseImage({
//可以选择几张图片(最多9张，多张的话涉及到异步的问题) count: 1,
//sizeType:确定是以源文件的形式还是压缩文件形式上传sizeType: ['original', 'compressed'],
//sourceType：图片来源,是本地图库还是从相机会获取sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
// 这个是成功后图片的临时路径（后面上传到云存储就需要用到） const tempFilePaths = res.tempFilePaths console.log(tempFilePaths);
//上传到云存储的功能wx.cloud.uploadFile({
//存放的云存储路径(一样的路径会覆盖) cloudPath: 'example.png',
//特别注意:获取的临时路径是个数组
filePath: tempFilePaths[0], // 文件路径
}).then(res => {
// 得到文件的id值(下一步我们把这个id存在数据库，方便以后获取) console.log(res.fileID)
}).catch(error => { console.error(error);
})
}
})
}

5.1.4 查看云控制台

源码时代

5.2 保存文件id到云数据库中

5.2.1 云数据库加一个集合

源码时代

5.2.2 把数据保存到云集合中
下面是整个上传文件的完整代码

uploadImg(){
//选择一张图片wx.chooseImage({
//可以选择几张图片(最多9张，多张的话涉及到异步的问题) count: 1,
//sizeType:确定是以源文件的形式还是压缩文件形式上传sizeType: ['original', 'compressed'],
//sourceType：图片来源,是本地图库还是从相机会获取sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
// 这个是成功后图片的临时路径（后面上传到云存储就需要用到） const tempFilePaths = res.tempFilePaths console.log(tempFilePaths);
//上传到云存储的功能wx.cloud.uploadFile({
//存放的云存储路径(使用时间缀，以免传上去的文件产生覆盖)) cloudPath: new Date().getTime()+'.png',
//特别注意:获取的临时路径是个数组filePath: tempFilePaths[0], // 文件路径
}).then(res => {
// 得到文件的id值
console.log(res.fileID)
//把文件的fileID保存到云数据库中db.collection("images").add({
data:{
fileID:res.fileID
}
}).then(res=>{ console.log(res);
}).catch(err=>{ console.error(err);
})

}).catch(error => { console.error(error);
})
}
})
}

5.3 获取图片并展示

5.3.1 获取图片路径

//初始化咱们的数据库（后面就可以使用db这个常量来代表咱们的云数据库） const db = wx.cloud.database();
Page({
/**
* 页面的初始数据
*/ data: {
imagesPath:[]
},
...
//显示相应的图片showImg:function(){
//1.拿到当前登录用户的openid wx.cloud.callFunction({
//执行去函数login方法name:"login"
}).then(res=>{
//拿到对应的openid属性
var openid = res.result.openid;
//2.根据openid拿到对应的图片db.collection("images").where({
_openid: openid
}).get().then(res2=>{
//查看所有的结果console.log(res2);
//把结果交给全局的imagesPath数据this.setData({
imagesPath:res2.data
})
})
})
},
//...
})

5.3.1 准备显示组件

<button bindtap='showImg' type='primary'>显示图片</button>
<!‐‐ block相当于咱们的div,但是它只模板，不会直接展示出来 ‐‐>
<block wx:for="{{imagesPath}}" wx:key="{{index}}">
<image src='{{item.fileID}}'></image>
</block>

5.4 下载图片

5.4.1 下载图片的按钮

<button bindtap='showImg' type='primary'>显示图片</button>
<!‐‐ block相当于咱们的div,但是它只模板，不会直接展示出来 ‐‐>
<block wx:for="{{imagesPath}}" wx:key="{{index}}">
<image src='{{item.fileID}}'></image>
<button bindtap='downloadImg' data‐fileid="{{item.fileID}}">下载图片</button>
</block>

5.4.2 下载方法实现

云开发 -> 小程序端API文档 -> 存储 -> downloadFile
API -> 媒体 -> 图片 - > saveImageToPhotosAlbum
API -> 界面 -> 交互

//下载图片的功能downloadImg:function(event){
//从云存储中拿到图片
var fileid = event.target.dataset.fileid;
//下载功能wx.cloud.downloadFile({
fileID: fileid
}).then(res => {
//这里可以拿到临时文件路径wx.saveImageToPhotosAlbum({
//准备图片的路径
filePath: res.tempFilePath, success(res) {
//成功后弹出相应的效果wx.showToast({
title: '成功',
icon: 'success', duration: 2000
})
}
})
})
}