经过前面几节课的学习，对小程序开发套路有一定了解了吧。前面主要掌握了小程序的界面展示、JS前后端交互，但是小程序中的数据存储到哪里呢？之前将图片保存到小程序本地，其实还可以保存到云端。数据库中的记录也可以保存到云端，这就是小程序的云开发中的核心功能：云存储、数据库。
一起来掌握吧！
开启云开发功能
使用云开发的功能不能使用小程序的测试AppID，我们可以打开mp.weixin.qq.com的控制台找到属于自己的小程序AppID，替换到project.config.json文件中的appid字段中。
创建数据库
在云开发-数据库控制台界面中选择新建一个集合collection，比如我们填写的名称是“learning”。还记得第一次使用云开发-数据库的时候以为是类似于MySQL的关系型数据库，为了尝试定义数据表和字段折腾了好久，后来才发现这里的集合collection是文档数据库，有多少数据、什么格式的数据都直接存、直接用。
更多数据库操作，请参考官方文档：
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html
初始化数据
已经创建好了集合collection，我们要先添加一些数据，其实不要直接在控制台添加数据，因为只能获得属于用户自己_openid的数据，我们选择通过小程序界面触发生成数据，比如我们在页面中添加了一个按钮，触发后端的addDefaultData函数。
<!-- pages/learning/index.wxml -->
<button class="button" type="primary" bindtap="addDefaultData">添加初始数据</button>
对应的index.js文件参考如下，我们采用每次新增一行的方式添加数据，虽然每行数据中都没有"_openid"，但在生成数据时都会自动添加，来标识当前的用户。不信的话，可以去云开发-数据库控制台中进行查看。
/**
* 设置初始数据
*/
addDefaultData: function () {
wx.cloud.init();
const db = wx.cloud.database();
db.collection('learning').add({
data: {"id":"1","title":"小程序HelloWorld","link":"https://mp.weixin.qq.com/s/arsW4zpCAN8yDcGdl63O1w","status":"已完成"}
});
db.collection('learning').add({
data: {"id":"2","title":"小程序页面及样式改进","link":"https://mp.weixin.qq.com/s/x166pnF1Ovplt5ab5_cR2Q","status":"已完成"}
});
db.collection('learning').add({
data: {"id":"3","title":"小程序JS前后端交互","link":"https://mp.weixin.qq.com/s/iVHjkL_YxutoF3HQZwgn2Q","status":"已完成"}
});
db.collection('learning').add({
data: {"id":"4","title":"使用云开发和数据库","link":"none","status":"进行中"}
});
},
查询数据
已经添加好初始数据，也就是“小程序课程”列表，我们在小程序界面中查看到的列表信息，这次从数据库中进行读取。
在index.js中定义一个函数getCourseList，用于从数据库中获取数据库中的数据，具体语法结构参见代码。其中数据库选择的是“learning”，在云开发-数据库中创建的。
具体语法格式参考如下，获取到的数据再通过that.setData进行赋值，替代之前静态赋值。
// pages/learning/index.js
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getCourseList();
},
/**
* 从数据库中获取数据
*/
getCourseList: function () {
wx.cloud.init();
const db = wx.cloud.database();
var that = this;
db.collection('learning').orderBy("id","asc").get({
success: function(res) {
// res.data 包含该记录的数据
console.log(res)
that.setData({
courseList: res.data
});
}
});
},
云存储
之前我们都是把图片保存到本地，也就是自己创建的image目录中，其实我们已经使用了云开发，就可以使用云存储来保存这些图片了。
在云开发平台中切换到云存储，先手动上传之前的几张图片，通过控制台我们能够看到文件的文件名称、File ID、文件大小、最后更新时间等信息。
上传之后我们复制其中一个图片文件的File ID，File ID也就相当于图片的存储路径了，在pages/learning/index.wxml中作为图片进行展示。
<!-- pages/learning/index.wxml -->
<image src="cloud://lv.6c76-lv-1300996733/1.png" mode="aspectFit" />
上传图片到云存储
我们看到过小程序中点击按钮或图标可以上传图片，在这里我们也来实现这个功能。前端页面功能如下，有个“上传图片”的按钮，其实也可以是字符串、图片，只要绑定一个事件即可，比如以下两种方式配合index.js中函数处理都能实现图片上传的功能。
<!-- pages/learning/index.wxml -->
<button class="button" type="primary" bindtap="uploadMyImage">上传图片</button>
<view bindtap="uploadMyImage">Upload</view>
在index.js中也要有对应的函数，名称需要和index.wxml绑定的事件名称相同，也就是“uploadMyImage”。
在这个函数中我们采用微信小程序提供的wx.chooseMedia来实现上传，这里的上传只是从手机中选择图片或视频，临时保存到手机内存中。仅仅是wx.chooseMedia还不能长期保存图片，因为手机一重启或清理内存，图片就找不到了，所以还需要将内存中图片上传到云开发的云存储中。我们通过wx.cloud.uploadFile来实现，其中cloudPath是在云端保存的文件名称，我们使用随机数来作为图片名称；filePath是当前手机内存中图片临时路径，直接引用刚才上传到手机内存时的临时路径即可。
<!-- pages/learning/index.js -->
uploadMyImage: function () {
wx.chooseMedia({
count: 1,
mediaType: ['image','video'],
sourceType: ['album', 'camera'],
maxDuration: 30,
camera: 'back',
success(res) {
console.log(res);
console.log(res.tempFiles[0].tempFilePath)
console.log(res.tempFiles[0].size)
var randomString = Math.random();
wx.cloud.uploadFile({
cloudPath: randomString+'.png', // 上传至云端的路径
filePath: res.tempFiles[0].tempFilePath, // 小程序临时文件路径
success: res => {
// 返回文件 ID
console.log(res.fileID)
},
fail: console.error
});
}
});
},
在小程序页面中点击上传图片，在云存储中即可查看到已上传的图片。如需对这些图片进行展示，按照刚才的方式直接用<image>标签来展示即可，src就是这里的File ID。
更多云存储的信息请参考官方文档：
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html
进阶
还有更多关于云开发的内容，先预习下吧。
- 云函数：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/getting-started.html
- 云托管：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/container/
作业
本次作业也同样是动手完成几个操作，提交结果截图和代码截图吧。
- 新建的数据库集合collection界面截图
- index.js文件中进行查询数据库的代码截图
- 上传文件的界面功能截图
- 上传文件到云存储的代码截图
- 云开发-存储的文件列表截图