一. 云开发的认识

1. 1. 什么是云开发
   2. 云开发和传统模式的区别
   3. 三大基本功能的支持认识
   4. 开通云开发二.云数据库
2. 1. 云数据库认识
   2. 类型支持
   3. 控制云数据库权限
      1. 控制云数据库的方式
      2. 云数据库管理管理
      3. 云开发初始数据的代码三.云数据库测试
3. 1. 测试准备工作
      1. 运行时进入相应页面
      2. 在云数据库中创建一个集合
   2. 添加功能
      1. 准备一个添加按钮
      2. 初始数据库与操作
      3. 点击按钮查看结果
      4. 监听添加的结果
   3. 修改功能
      1. 准备按钮
      2. 实现方法
   4. 查询功能
      1. 准备按钮
      2. 查询数据
      3. 查询需知
   5. 删除员工
      1. 准备按钮
      2. 删除代码四.云函数
4. 1. 云函数的认识
      1. 什么是云函数
      2. 安装node.js
      3. 云函数的位置
5. 1. 云函数的使用
      1. 完成index.js中的函数
      2. 上传云函数
6. 1. 1. 调用云函数
   2. 获取openid
      1. 小程序已有login函数
      2. 准备代码
   3. 云函数操作数据库
      1. 准备云函数
      2. 准备按钮
      3. 调用方法
      4. 最终效果五 云存储
7. 1. 完成图片的上传
      1. 准备按钮
      2. 准备选择图片的功能
      3. 准备上传的功能
      4. 查看云控制台
   2. 保存文件id到云数据库中
      1. 云数据库加一个集合
      2. 把数据保存到云集合中
   3. 获取图片并展示
      1. 获取图片路径

5.3.1 准备显示组件

1. 1. 下载图片
      1. 下载图片的按钮
      2. 下载方法实现

一. 云开发的认识

1. 1. 什么是云开发

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

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

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

1. 2云开发和传统模式的区别

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

1. 3三大基本功能的支持认识

1. 4开通云开发

二.云数据库

2.1云数据库认识

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

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

2.2类型支持

String:字符串

Number:数字

Object:对象

Array:数组

Bool:布尔值

GeoPoint:地理位置点(比较特殊，需要经纬度)

Date:时间(使用的是客户端的时间)

Null:空值

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);
})
}

1. 1. 1. 查询需知

查询的时候只能查询到有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.4.2安装node.js

云函数需要node的支持(需要安装node.js)

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

​​​​​​​4.1.13云函数的位置

本地的位置

云端的位置

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) -> 云端安装环境

上传并部署:所有文件 -> 把环境传上去可以在云控制台中进行云函数的功能测试

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.2.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) {
            // 这个是成功后图片的临时路径（后面上传到云存储就需要用到）
            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
                })
            }
        })
    })
}