(1条消息) 小程序云开发全套实战教程，看完你就能做云开发了。
本教程适合刚刚入门的小白,云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
1：在桌面新建一个文件夹，命名为cloud
2：填写小程序appid，选择建立云开发快速启动模板，点击确定按钮。
3：完成之后，界面如下所示，默认好的项目目录和一系列的代码，可以仔细阅读和学习这些官方默认的文档
4：点击云开发按钮，申请开通
5：创建创建资源环境，填写环境名称，每个小程序账号可免费创建两个环境。填写相关信息，环境名称
6：成功开通之后进入；创建完成之后的界面。
7：仔细看一下新建的云项目之后发现，新建项目中一个简单的获取用户openId的云函数示例
8：在cloudfunctions路径下的login文件夹上点击右键，选择创建并部署
9：在云开发控制台里，找到自己的环境ID，复制准备
10：在miniprogram目录下的app.js配置环境ID
示例代码：
//app.jsApp({onLaunch: function () {if (!wx.cloud) {console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else {wx.cloud.init({env: 'wang-t6e372',//我刚刚从云开发控制台里复制过来的自己的环境ID，traceUser: true,})}this.globalData = {}}})
11：再次回到云开发控制台，依次点击云函数->login函数->右上角的测试按钮
11：测试成功
我们可以查看一下结果
打开云开发控制台，切换到“用户管理”标签页，查看小程序的用户列表
再来测试一下上传图片的功能
在本地桌面选一张图片上传，然后打开云开发控制台，查看存储管理，里面多了一张图片的记录，也就是刚刚我上传的自己的图片
微信小程序云开发 初学者入门教程二-前端操作数据库模块
如何操作数据库，作为一名前端，如果对数据的知识不够熟悉也没关系，从现在开始好好学习就行，数据库的操作内容差不多涉及增删改查四大模块，花一些业余的时间在上面，也必有所得。
数据库操作大多数需要用户openid,需要先配置好吧login云函数，如果已经配置好了，获取用户的openid之后，开始步骤：
数据库操作API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/database/index.html
步骤
1：打开云开发控制台，进入到数据库管理模块
2：选择添加集合，集合名称为counters，添加完成之后的界面
3：可以看到counters集合出现在左侧集合列表中
注：集合必须在云开发控制台中创建
4：新增一条记录试一试
a. 打开pages/databaseGuide/databaseGuide.js文件，定位到 onAdd 方法
b：选中所有注释过的代码，ctrl+/快捷键，解除注释
onAdd: function () {const db = wx.cloud.database()db.collection('counters').add({data: {count: 1},success: res => {// 在返回结果中会包含新创建的记录的 _idthis.setData({counterId: res._id,count: 1})wx.showToast({title: '新增记录成功',})console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)},fail: err => {wx.showToast({icon: 'none',title: '新增记录失败'})console.error('[数据库] [新增记录] 失败：', err)}})},
c. onAdd 方法会往 counters 集合新增一个记录，新增如下格式的一个 JSON 记录
{ "_id": "数据库自动生成记录 ID 字段","_openid": "数据库自动插入记录创建者的 openid", "count": 1 }
在桌面新建一个json文件，将这段代码复制黏贴进去，备用
导入之后显示的界面
d： 点击按钮：新增记录
e：在云开发 -> 数据库 -> counters 集合中可以看到新增的记录
微信小程序云开发数据库操作一添加记录实例演示
官方文档解读：
<!-- 新增记录 --><view class="guide" wx:if="{{step === 3}}"><text class="headline">新增记录</text><text class="p">1. 打开 pages/databaseGuide/databaseGuide.js 文件，定位到 onAdd 方法</text><text class="p">2. 把注释掉的代码解除注释</text><image class="code-image" src="../../images/code-db-onAdd.png" mode="aspectFit"></image><text class="p">3. onAdd 方法会往 counters 集合新增一个记录，新增如下格式的一个 JSON 记录</text><text class="code">{"_id": "数据库自动生成记录 ID 字段","_openid": "数据库自动插入记录创建者的 openid","count": 1}</text><text class="p">4. 点击按钮</text><button size="mini" type="default" bindtap="onAdd">新增记录</button><text class="p" wx:if="{{counterId}}">新增的记录 _id 为：{{counterId}}</text><text class="p">5. 在云开发 -> 数据库 -> counters 集合中可以看到新增的记录</text><div class="nav"><button class="prev" size="mini" type="default" bindtap="prevStep">上一步</button><button class="next" size="mini" type="default" bindtap="nextStep" wx:if="{{counterId}}">下一步</button></div></view>
做一个小demo
效果如下：点击新增记录的按钮的时候，会出现提示，新增的记录为多少，并且有弹框提示，新增记录成功。
打开云开发控制台，点击数据库模块，可以看到刚刚添加的记录
wxml代码：
<button size="mini" type="default" bindtap="onAdd">新增记录</button><text class="p" wx:if="{{counterId}}">新增的记录 _id 为：{{counterId}}</text>
js代码：
// pages/databaseGuide/databaseGuide.jsconst app = getApp()Page({data: {step: 1,counterId: '',openid: '',count: null,queryResult: '',},onLoad: function (options) {if (app.globalData.openid) {this.setData({openid: app.globalData.openid})}},onAdd: function () {const db = wx.cloud.database()db.collection('counters').add({data: {count: 1},success: res => {// 在返回结果中会包含新创建的记录的 _idthis.setData({counterId: res._id,count: 1})wx.showToast({title: '新增记录成功',})console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)},fail: err => {wx.showToast({icon: 'none',title: '新增记录失败'})console.error('[数据库] [新增记录] 失败：', err)}})},})
对于数据库的增删改查
后续会有更加细致的文章：
1：微信小程序云开发数据库操作一添加记录
2：微信小程序云开发数据库操作二查询记录
3：微信小程序云开发数据库操作三删除记录
4：微信小程序云开发数据库操作四更新记录
下班之后带着电脑回家，在地铁上拥挤非常，感觉电脑都要被挤坏了，这几天反思了一下从前，每天上班下班，完成老板给的任务就可以潇洒走人了，总觉得自己不够努力，又或者每天重复着老旧的技术，周而复始，早已落后于前端发展的潮流，不觉开始惶恐。每天晚上开始学习，戒掉游戏和手机，让自己尽快达到一个沉迷于代码不可自拔的境界。
小程序云开发三：创建第一个界面
前面说到：微信小程序云开发 初学者入门教程一（云开发环境搭建）https://www.jianshu.com/p/5df4d51125e3，开通环境，部署环境之后，现在开始创建第一个界面。
1：把小程序版本更新到最新，在桌面上创建一个文件夹，选择云开发模板，我们可以看到文件目录结构，默认的代码和架构。这些代码和目录结构不要删除，后面会用到
默认的代码和目录如下：
2：创建一个main文件夹
3：修改app.json文件
打开app.json文件，添加"pages/main/main",
我这里放在第一行，方便打开就进入main界面。
4：完成之后，运行，开始在main.wxml，main.js里面写页面代码
wxml
<view><input style='margin-top: 40rpx;' placeholder="请输入姓名" value="{{name}}" bindinput="bindKeyInputName" /><input style='margin-top: 40rpx;' placeholder="请输入年龄" value="{{age}}" bindinput="bindKeyInputAge" /><button style='margin-top: 40rpx;' bindtap='insertData'>插入数据</button><input style='margin-top: 40rpx;' placeholder="请输入记录ID" value="{{recordId}}" bindinput="bindKeyInputId" /><button style='margin-top: 40rpx;' bindtap='queryData'>查询数据</button><text style='margin-top: 40rpx;'>姓名：{{nameResult}}</text><text style='margin-top: 80rpx;'>年龄：{{ageResult}}</text></view>
wxss
暂时没写
js
// miniprogram/pages/main/main.jsconst app = getApp()Page({/*** 页面的初始数据*/db:undefined,test:undefined,data: {name:'',age:'',recordId:'',nameResult:'',ageResult:''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this// 调用login云函数获取openidwx.cloud.callFunction({name: 'login',data: {},success: res => {console.log('[云函数] [login] user openid: ', res.result.openid)app.globalData.openid = res.result.openidwx.cloud.init({ env: 'minicloud' })that.db = wx.cloud.database()that.test = that.db.collection('test')},fail: err => {console.error('[云函数] [login] 调用失败', err)wx.navigateTo({url: '../deployFunctions/deployFunctions',})}})},// 单击“插入数据”按钮调用该函数insertData:function() {var that = thistry{// 将年龄转换为整数类型值var age = parseInt(that.data.age)// 如果输入的年龄不是数字，会显示错误对话框，并退出该函数if(isNaN(age)){// 显示错误对话框wx.showModal({title: '错误',content: '请输入正确的年龄',showCancel: false})return}// 向test数据集添加记录this.test.add({// data 字段表示需新增的 JSON 数据data: {name: that.data.name,age: age},// 数据插入成功，调用该函数success: function (res) {console.log(res)wx.showModal({title: '成功',content: '成功插入记录',showCancel:false})that.setData({name:'',age:''})}})}catch(e){wx.showModal({title: '错误',content: e.message,showCancel: false})}},// 单击“查询数据”按钮执行该函数queryData:function() {var that = this// 根据记录ID搜索数据集this.db.collection('test').doc(this.data.recordId).get({// 找到记录集调用success: function (res) {// 将查询结果显示在页面上that.setData({nameResult:res.data.name,ageResult:res.data.age})},// 未查到数据时调用fail:function(res) {wx.showModal({title: '错误',content: '没有找到记录',showCancel: false})}})},// 下面的函数用于当更新input组件中的值时同时更新对应变量的值bindKeyInputName: function (e) {this.setData({name: e.detail.value})},bindKeyInputAge:function(e) {this.setData({age: e.detail.value})},bindKeyInputId:function(e) {this.setData({recordId:e.detail.value})},})
5：打开云开发控制台，添加一个test集合
6：回到main的界面，填写姓名和年龄信息，点击插入数据，弹框显示插入数据成功
7：再次查看云数据库
在test里面我们可以看到刚刚插入的数据
8：关于查询，根据id进行查询
9：查询到我所得到的数据
小程序云开发四：向云数据库插入一条数据
上一篇的文章里，有提到像数据库里面插入一条数据，今天主要是把《小程序云开发：向云数据库插入一条数据》单独拉出来写个小的demo，方便记忆和理解。
参考文档：
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/add.html
1：方法在小程序的api里面说的很清楚，通过在集合对象上调用 add 方法往集合中插入一条记录，方法如下：
db.collection('todos').add({// data 字段表示需新增的 JSON 数据data: {// _id: 'todo-identifiant-aleatoire', // 可选自定义 _id，在此处场景下用数据库自动分配的就可以了description: 'learn cloud database',due: new Date('2018-09-01'),tags: ['cloud','database'],// 为待办事项添加一个地理位置（113°E，23°N）location: new db.Geo.Point(113, 23),done: false},success(res) {// res 是一个对象，其中有 _id 字段标记刚创建的记录的 idconsole.log(res)}})
2：打开云开发控制台，添加一个todos集合，插入的数据会在这个集合里面显示。
3：例子，在昨天的项目中接着main文件写
main.wxml
<view><button bindtap='insertData'>插入数据</button></view>
main.js
const app = getApp()Page({data: {},onLoad: function (options) {},// 单击“插入数据”按钮调用该函数insertData: function () {const db = wx.cloud.database({});const cont = db.collection('todos');cont.add({data: {description: "向云数据库插入一条数据",due: new Date('2018-12-25'),tags: ["cloud","database"],},success: function (res) {console.log(res._id)wx.showModal({title: '成功',content: '成功插入记录',showCancel: false})}});},})
4：打开界面，点击插入数据按钮，插入成功会出现提示弹框提示成功，插入的id也会在界面打印出来。
5：打开云开发控制台，我们可以看见自己刚刚插入的数据
6：那该如何从云数据库读取刚刚插入的这条数据，打印在前端界面？且看明天的博客。
小程序云开发五：从云数据库读取数据
1:接着昨天的《小程序云开发四：向云数据库插入一条数据》，今天要写的是读取那条插入的数据。
参考的api,请点击：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html
2:主要方法：点击请求数据按钮的时候向数据库请求，cont.doc("XCIGn8DR1TiNF-Pt").get里面要填写插入的数据的时候标记的id。
// 单击“请求数据”按钮执行该函数queryData: function () {const db = wx.cloud.database({});const cont = db.collection('todos');cont.doc("XCIGn8DR1TiNF-Pt").get({success: function (res) {console.log(res.data)}})},
3:效果如下
4：demo的示例：
main.wxml
<view><button bindtap='insertData'>插入数据</button><button bindtap='queryData'>请求数据</button></view>
main.js
const app = getApp()Page({data: {},onLoad: function (options) {},// 单击“插入数据”按钮调用该函数insertData: function () {const db = wx.cloud.database({});const cont = db.collection('todos');cont.add({data: {description: "向云数据库插入一条数据",due: new Date('2018-12-25'),tags: ["cloud","database"],},success: function (res) {console.log(res._id)}});},// 单击“请求数据”按钮执行该函数queryData: function () {const db = wx.cloud.database({});const cont = db.collection('todos');cont.doc("XCIGn8DR1TiNF-Pt").get({success: function (res) {console.log(res.data)}})},})
原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见