2020 April 27 小程序

第六章：小程序云开发简介、云数据库

简介

  1. 什么是云开发？
    1. 传统的开发模式需要专门的后台人员开发服务用来存储数据，云开发专门提供了后台功能，不需要后台人员开发服务，前端人员直接可以操作。
  2. 云开发的模式 pic
  3. 云开发模式和传统模式对比 pic
  4. 云开发主要包含三大核心技术:
    1. 云数据库:
      1. 提供在小程序端直接对数据库进行增删改查的能力;
      2. 数据库是类似于MongoDB的文档存储的数据库，操作非常方便;
    2. 云存储:
      1. 可以在小程序端直接上传、下载、删除文件;
      2. 自带CDN，提高文件访问速度;
      3. 可以获取临时链接，支持在小程序外访问;
    3. 云函数:(对数据库、云存储能力的补充扩充)
      1. 提供了在服务器代码的执行能力;
      2. 包含微信天然的私有鉴权;
      3. 更大权限的操作数据库等;
      4. 进行云调用、HTTP请求等操作;
  5. 初始化项目
    1. 打开“微信卡发者工具” -> 项目命名为“StudyCloud” ->选择项目目录 ->APPID(注意：云开发必须使用申请的id，不能使用测试号)->后端服务勾选： 小程序.云开发 ->新建
    2. 点击“微信卡发者工具” 的云开发按钮，进入到“云开发控制台”页面
      1. 点击开通 -> 环境名称：coderzhong，环境ID自动填充： coderzhong-xxxx ->点击确定即可
    3. 云开发控制台
      1. 云开发控制台包含
        1. 运营分析
        2. 数据库(云数据库)
        3. 存储(云存储)
        4. 云函数
      2. 云开发创建新环境
        1. 设置 – 环境名称 – 创建环境
        2. 在创建一个测试环境: coderzhong-dev
      3. 重要概念 – 环境和配额
        1. 环境:
          1. 一个环境对应一整套独立的云开发资源，包括数据库、存储空间、云函数等资源。
          2. 各个环境是相互独立的，用户开通云开发后即创建了一个环境，默认可拥有最多两个环境。
          3. 在实际开发中，建议每一个正式环境都搭配一个测试环境，所有功能先在测试环境测试完毕后再上到正式环境。
        2. 配额:
          1. 默认有一定的免费配额(你懂的);
          2. 后期可以根据自己的业务量选择对应的更高配额;
          3. https://developers.weixin.qq.com/miniprogram/dev/wxcloud/billing/quota.html
      4. 清空项目默认文件
        1. Pages里面默认都是演示代码可以删除
  6. 云开发初始化
    1. 在小程序端开始使用云能力前，需先调用 wx.cloud.init 方法完成云能力初始化

      1. 在app.js文件中

         onLaunch: function () {
     if (!wx.cloud) {
       console.error('请使用 2.2.3 或以上的基础库以使用云能力')
     } else {
       wx.cloud.init({
         // env 参数说明：
         //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
         //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
         //   如不填则使用默认环境（第一个创建的环境））
         // env: 'my-env-id',
         traceUser: true,
       })
    }
 }

      2. cloud.init 有两个参数：

        1. env：后续 API 调用的默认环境配置，传入字符串形式的环 境 ID 可以指定所有服务的默认环境，传入对象可以 分别指定各个服务的默认环境，见下方详细定义
        2. traceUser： 是否在云开发控制台->运营分析->用户访问中记录

云数据库介绍

  1. 云开发三大核心之一的云数据库
  2. 官方文档：开发->云开发->开发指引->数据库

数据库模块初始化

  1. “微信卡发者工具” Pages目录下新建一个页面zhdatabase(右击新建目录),然后创建相应的文件(右击新建page)
  2. 同理创建zhstorage（云存储）/zhcloudfunc（云函数）的目录以及page

  3. 在app.json创建一个tabBar,然后分别用于展示：官方示例、云数据库、云存储、云函数

     "tabBar": {
     "list": [{
       "pagePath": "pages/index/index",
       "text": "官方示例"
     },
     {
       "pagePath": "pages/zhdatabase/zhdatabase",
       "text": "云数据库"
     },
     {
       "pagePath": "pages/zhstorage/zhstorage",
       "text": "云存储"
     }
     ,
     {
       "pagePath": "pages/zhcloudfunc/zhcloudfunc",
       "text": "云函数"
     }
     ]
   }

云数据库简介

  1. JSON数据库:
    1. 云开发提供了一个文档型数据库，类似于MongoDB，里面存放的是一条条JSON格式的对象;并不是关系型数据库
    2. 一个数据库可以包含多个集合，一个集合中包含多个JSON对象; pic
  2. 提供方便的API调用:学习这些API即可;
  3. 提供了小程序端和服务器端(云函数)中调用的区分;

操作数据库

控制台操作

  1. 打开“云开发控制台”->数据库
  2. 点击“集合名称”->设置为students，创建一个集合
  3. 为students集合添加数据
    1. 点击“添加记录”
    2. 文档ID：不用填，使用默认，每个文档都需要有唯一的id
    3. 点击“文档ID”下面的“+”，添加字段、设置字段的类型、值
    4. 点击确定，就可以看到刚才添加的一条json数据
  4. 云开发开控制台可以导入、导出数据
    1. 直接拿到json数据，保存到文件中
    2. 新建一个集合，然后点击导入该文件，就可以导入了
      1. 注意：json数据之前不能有分隔符，“，”也不行

      2. 比如:

         //数据1：这条数据用,隔开，不能导入
 {
     name: "a",
     height: 18
 },
 {
     name: "b",
     height: 19
 },
 {
     name: "c",
     height: 20
 }
            
 //数据2：这条数据能导入
 {
     name: "a",
     height: 18
 }
 {
     name: "b",
     height: 19
 }
 {
     name: "c",
     height: 20
 }

代码操作

  1. 查询数据的方式:：
    1. 方式一:通过ID查询精确的某一条数据;
      1. 使用doc查询ID
    2. 方式二:根据条件查询满足条件的数据;
      1. 使用where作为条件
    3. 方式三:通过指令过滤数据;
      1. 使用db.command的指令
    4. 方式四:通过正则表达式匹配符合的数据;
      1. 使用db.RegExp创建正则规则
    5. 方式五:获取整个集合的数据(小程序端一次性最多20条，云函数中可以获取100条);
      1. 直接调用get
    6. 方式六:过滤、分页、排序查询数据
      1. 使用field、skip、limit、orderBy
  2. 简单实现即时通信
    1. 云数据库目前已经支持即时通信:
      1. 云开发数据库支持实时推送变更数据的能力
      2. 给定查询条件，每当数据库更新而导致查询条件对应的查询结果发生变更时，小程序可收到一个更新事件，其 中可获取更新内容和更新后的查询结果快照。
    2. 首先手动在“云开发控制台”创建一个chatroom数据库

  3. 在zhdatabase.wxml文件中分别添加几个按钮：增、删、改、查

     <button bind:tap="addDataToDB">添加数据</button>
 <button bind:tap="removeDataToDB">删除数据</button>
 <button bind:tap="updateDataToDB">修改数据</button>
 <button bind:tap="queryDataToDB">查询数据</button>
 <button bind:tap="startlisten">监听消息改变</button>
 <button bind:tap="sendMessage">发送消息</button>

  4. 事件响应在zhdatabase.js中

     // miniprogram/pages/zhdatabase/zhdatabase.js
 //1. 获取数据库对象
 const db = wx.cloud.database();
 // 2. 获取要操作的集合
 const coll = db.collection("students")
 Page({
   // 添加数据
   addDataToDB: function (){
     // 添加一条数据
     // 3. 向集合中添加一条数据
     coll.add({
       // data: 固定格式
       data:{
         name: 'jack',
         age: '20',
         height: 1.8,
         courses: ['高等数学','java编程'],
         goodfriend:{
           name: 'll',
           age: '22',
           height: 1.9,
         },
         // 经纬度
         location: db.Geo.Point(100,50),
         // 日期
         birth: new Date("2020-10-10")
       },
       // 拿到回调数据 方法1
       // success: (res)=>{
       //   console.log("success",res);
       // },
       // fail: (err)=>{
       //   console.log("error",err);
       // }
       // 拿到回调数据 方法2
     }).then(res=>{
       // 添加成功
       console.log("success", res);
     }).catch(err=>{
       // 添加失败
       console.log("error", err);
     });
   },
   // 删除数据
   removeDataToDB:function(){
     //doc里面是某条数据的id
     // 微信小程序规定：不使用云函数，只能精准删除
     coll
       .doc('fddd30c55eae344900482ac51042aef4')
       .remove()
       .then(res=>{
         console.log(res);
       })
       .catch(err=>{
         console.log(err);
       })
   },
   // 更新数据
   updateDataToDB:function(){
     // update 修改字段，只修改
     // coll.doc('593e51e65eae36d3004e665765d8a56a')
     // .update({
     //   data: {
     //     age: 33
     //   }
     //   })
     //   .then(res => {
     //     console.log(res);
     //   })
     //   .catch(err => {
     //     console.log(err);
     //   });
       // set :直接替换掉对象，这么一些，这条数据就只有2个字段：age、score
     coll.doc('593e51e65eae36d3004e665765d8a56a')
       .set({
         data: {
           age: 33,
           score: 100
         }
       })
       .then(res => {
         console.log(res);
       })
       .catch(err => {
         console.log(err);
       });
   }
   ,
   // 查询数据
   queryDataToDB:function(){
     //方式1： 通过ID查询精确的某一条数据;
     // coll.doc('d38a536e5eae33ef0051aed474e61bb9')
     // .get()
     // .then(res=>{
     //   console.log(res)
     // })
     // .catch(err=>{
    
     // })
     //方式2：根据条件查询满足条件的数据;
     // coll
     // .where({
     //   // age是33的数据
     //   age: 33
     // })
     // .get()
     // .then(res=>{
     //   console.log(res)
     // })
     //方式3：通过指令过滤数据;
     // const cmd = db.command;
     // coll
     //   .where({
     //     // age小于30的数据
     //     // lt:小于 gt：大于 gte:大于等于
     //     // 官方文档：云开发->开发指南-》查询指令
     //     age: cmd.gt(10)
     //   })
     //   .get()
     //   .then(res => {
     //     console.log(res)
     //   })
     //方式4：通过正则表达式匹配符合的数据;
     // coll
     //   .where({
     //     name: db.RegExp({
     //       regexp: '^j.*',
     //       options: 'i',
     //     })
     //   })
     //   .get()
     //   .then(res => {
     //     console.log(res)
     //   })
     //方式5：获取整个集合的数据(小程序端一次性最多20条，云函数中可以获取100条);
     // db.collection('students').get().then(res=>{
     //   console.log(res)
     // })
     //方式6：过滤、分页、排序查询数据
     /**
      * field: 过滤只需要获取的字段
      * skip； 跳过多少条数据，联合limit可以用来做分页功能
      * limit： 本次获取多少条数据
      */
     // coll.field({
     //   name:true,
     //   height: true,
     //   age: true
     // }).get()
     // .then(res => {
     //   console.log(res)
     // })
     db.collection('students').skip(2).limit(2)
     .get()
     .then(res => {
       console.log(res)
     })
   },
   //
   startlisten: function() {
     db.collection('chatroom').where({
       groupid: "110"
     }).watch({
       onChange:function (snap){
         console.log(snap)
       },
       onError: function (err){
         console.log(err)
       }
     })
   },
   sendMessage: function(){
     db.collection('chatroom').add({
       data:{
         groupid: "110",
         message:'吃饭了吗？'
       }
     }).then(res=>{
       console.log(res)
     }).catch(err=>{
       console.log(err)
     })
   }
 })

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents