微信小程序 云开发入门指南

小程序现在对开发者来说越来越友好啦，可以说任何新手小白都可以很轻松的开发一款小程序，尤其是现在又支持云开发，简直是如虎添翼

文章首发公众号「代码集中营」

什么是云开发

云开发就是不需要开发者搭建服务器，直接使用数据库，省去了搭建服务器的麻烦，这个概念并不是现在才有的，如果大家有用过Bmob后端云、知晓云 就知道他们的原理

代码君在大学的时候，毕设就是用的Bmob云，这样开发者不用去购买搭建服务器，不用操心服务端的稳定性和数据库的安装

云开发模块介绍

1. 云开发入口
   注意这个入口必须是由申请过小程序id的才会显示，如果你用测试的appid，是没有这个入口的

   
   
   image.png
2. 云开发控制台介绍
   熟悉的朋友可以跳过此步

• 数据库模块
  写后台的对数据库可能不陌生，新手小白会一脸懵逼，简单说，数据库是服务端的核心，比如你登录时候，需要验证是否注册过，就需要查看数据库里面有没有用户信息

• 存储模块
  此模块是用来存储资源的，比如一些图片资源你要访问的话，发现都是本地的，会限制你的访问，你把图片上传到这里面，就可以使用网络路径访问啦

• 云函数模块
  函数主要是一些方法，数据库的增删改查都可以写成函数的形式，对于小白来说，可以先放后，理解不了没关系，代码君直接教你数据库查询就好，虽然方法简单粗暴，不够优雅

• 设置
  主要记住设置里面的环境名称以及环境ID，环境ID特别重要，代码君刚入手的只是就因为这个配置错了，查了好久问题才发现的，切记！切记！不要再掉坑里

image.png

云开发环境搭建

1. 云开发开通
   首次点击云开发，会引导你开通，这里就不介绍了，唯一要说的是，会弹出一个创建环境的对话框，要求输入环境名称和环境ID，这个自己定义就好，定义好一定要区分好环境名称与环境ID，不要弄混，可在设置中查看

   
   
   image.png
2. 小程序与云函数建立连接

• 在project.config.json 加入云端同步路径,后面配置的路径是自己定义的，配置完成记得保存，比如我定义的cloudbaseRoot路径是在根目录里的cloudbaseTest文件，所以我需要在根目录上创建cloudbaseTest文件夹相匹配，后面这个文件夹就是用来和云端建立连接的

  "cloudfunctionRoot": "cloudbaseTest/",

image.png

正常配置完成，保存一下，cloudbaseTest文件夹就会出现一个云图标，说明你配置成功啦

3. 同步环境列表
   在cloudbaseTest文件夹右键，会有一个同步环境列表功能，无论你是在本地新增了某个函数。还是在云控制台新增了某个文件，这里都会进行同步。有点类似于Git一样

   
   
   image.png

云开发使用指南

1. 在app.js 初始化云开发,初始化代码如下

  wx.cloud.init({
      //环境id，不是环境名称哈
      env: 'majun-tv-4g57vf5e3ca092f8',
      traceUser: true,
    })

image.png

2. 创建数据库表
   在云开发控制台的数据模块创建一个test_demo表，用于模拟存储用户信息

   
   
   image.png

3. 数据库增删改查
   首先初始化db，在界面创建的时候，db代码君设置了全局参数，方便引用，然后就可以执行对应的逻辑判断了，增删改查代码都在下面，注释写的很清楚，代码君就不过多解释啦

// pages/test/test.js

// 全局db
var db;
Page({
   /**
   * 生命周期函数--监听页面加载
   */
  onReady: function (options) {
    //初始化db
    db = wx.cloud.database({
      //环境id
      env: 'majun-tv-4g57vf5e3ca092f8'
    })
   },

  /**
   * 添加用户
   */
  AddUser: function (options) {
    //新用户创建，存入数据库   
    db.collection('test_demo').add({
      // data 字段表示需新增的 JSON 数据
      data: {
        "username": "测试用户1",
        "password": "123456",
      },
      success: function (res) {
        // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
        console.log(res)
        //存储id，用于删除
        wx.setStorageSync('db_id', res._id)
      }
    })
  },

  /**
   * 删除用户
   */
  deleteUser: function () {
    var _id=wx.getStorageSync('db_id');
    //表的名称+要删除的数据id
    db.collection('test_demo').doc(_id).remove({
      success: function(res) {
        console.log(res)
      }
    })
  },

  /**
   * 获取用户列表
   */
  getUserList: function () {
    db.collection('test_demo').get({
      success: function(res) {
        // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
        console.log(res.data)
      }
    })
  },

})