微信小程序云开发(一)

什么是微信云开发

微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。

开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。

开发者无需搭建服务器,可免鉴权直接使用平台提供的 API 进行业务开发。

这个就可以让我们前端开发人员,在没有后台服务支持的情况下,自己开发小程序了。

第 1 步:创建项目

image.png

点击创建后,即可得到一个展示云开发基础能力的示例小程序:


image.png

第 2 步:开通云开发,创建环境

在使用云开发能力之前,需要先开通云开发。

在开发者工具的工具栏左侧,点击 “云开发” 按钮即可打开云控制台,根据提示开通云开发,并且创建一个新的云开发环境。


image.png
  • 每个环境相互隔离,拥有唯一的环境 ID,包含独立的数据库实例、存储空间、云函数配置等资源;
  • 初始创建的环境自动成为默认环境
  • 默认配额下可以创建两个环境;
  • 腾讯云控制台创建的云开发环境也可在微信云开发中使用。登录微信云开发控制台-设置-环境设置,点击环境名称,选择“管理我的环境”,点击“使用已有腾讯云环境”按钮,选择所需腾讯云环境,即可在微信云开发控制台使用该环境。

第 3 步:开始开发

开通创建环境后,即可以开始在模拟器上操作小程序体验云开发提供的部分基础能力演示。

以上就是官网关于创建云开发的过程。

下面是个人学习过程中的


image.png

由于云开发把所有东西都配置好了,这样不利于学习。开始我选择的不适用云服务。

创建好之后,点击云开发


image.png

官网的介绍: 一个环境对应一整套独立的云开发资源,包括数据库、存储空间、云函数等资源。各个环境是相互独立的,用户开通云开发后即创建了一个环境,默认可拥有最多两个环境。在实际开发中,建议每一个正式环境都搭配一个测试环境,所有功能先在测试环境测试完毕后再上到正式环境。以初始可创建的两个环境为例,建议一个创建为 test 测试环境,一个创建为 release 正式环境。

image.png

付费方式有预付费和按量付费两种,根据个人需求选择。 学习的话,按量付费免费额度也够用。

等待初始化


image.png

初始化成功后的界面


image.png

现在我们来学习数据库的增删改查。
一种,我们可以直接在云开发控制台实现。


image.png

先点击数据库,然后创建集合,这里我创建了一个user的集合


image.png

然后我们来创建一条记录


image.png

image.png

可以看到创建了一条张三的数据,我们在云开发控制台可以对这条数据进行删除和修改


image.png

好了,数据库,我们有了数据,那么我们到小程序端,看怎么获取数据。

小程序端初始化

在小程序端开始使用云能力前,需先调用 wx.cloud.init 方法完成云能力初始化(注意小程序需先开通云服务,开通的方法是点击工具栏左上角的 “控制台” 按钮)。因此,如果要使用云能力,通常我们在小程序初始化时即调用这个方法。

wx.cloud.init 方法的定义如下

function init(options): void

wx.cloud.init 方法接受一个可选的 options 参数,方法没有返回值。方法只能调用一次,多次调用时只有第一次调用生效。

options 参数定义了云开发的默认配置,该配置会作为之后调用其他所有云 API 的默认配置,options 提供的可选配置如下


image.png

当 env 传入参数为对象时,可以指定各个服务的默认环境,可选字段如下


image.png

我们首先到云开发控制台拿到我们的环境ID


image.png

然后到小程序app.js中 onLaunch 中初始化云能力


image.png

然后我们来到 小程序展示的当前页面。把多余的代码删除掉,来连接数据库。

在开始使用数据库 API 进行增删改查操作之前,需要先获取数据库的引用。以下调用获取默认环境的数据库的引用

const db = wx.cloud.database()

如需获取其他环境的数据库引用,可以在调用时传入一个对象参数,在其中通过 env 字段指定要使用的环境。此时方法会返回一个对测试环境数据库的引用。

示例:假设有一个环境名为 test,用做测试环境,那么可以如下获取测试环境数据库:

const testDB = wx.cloud.database({
  env: 'test'
})

要操作一个集合,需先获取它的引用。在获取了数据库的引用后,就可以通过数据库引用上的 collection 方法获取一个集合的引用了

查询

const db = wx.cloud.database() //获取数据库的引用
Page({
  data: {   
  },  
  onLoad() {
   this.init()
  },
  init(){
    db.collection('user') // 获取云控制台创建的集合引用
    .get() // 查询
    .then(res=>{
      console.log('success', res);
    }).catch(err=>{
      console.log('fail', err);
    })
    // 也可以用下面的回调的形式查询
    // .get({
    //   success: function(res) {
    //     console.log(res.data)
    //   },
    //   fail: function(err){
    //     console.log(err);
    //   }
    // })    
  }
})

但是现在控制台打印的数据是空,这是因为权限不够,我们继续回到云开发控制台

image.png

默认是仅创建者可读。我们改一下,改成第一项 所有用户可读,仅创建者可读写


image.png

回到小程序。重新编译后可以看到拿到数据了。


image.png

接下来看一下查询单挑数据。
doc 可以通过唯一索引返回 一个对象

    db.collection('user') // 获取云控制台创建的集合引用
    .doc('28ee4e3e60e1816e279e239b4c23f239') // 查询_id
    .get() // 查询
    .then(res=>{
      console.log('success', res);
    }).catch(err=>{
      console.log('fail', err);
    })   
image.png

where 一次性获取多条记录。通过调用集合上的 where 方法可以指定查询条件. 返回一个数组

where 方法接收一个对象参数,该对象中每个字段和它的值构成一个需满足的匹配条件,各个字段间的关系是 "与" 的关系,即需同时满足这些匹配条件

    db.collection('user') // 获取云控制台创建的集合引用
    .where({name: '张三'}) // 查询条件
    .get() // 查询
    .then(res=>{
      console.log('success', res);
    }).catch(err=>{
      console.log('fail', err);
    }) 
image.png

注意:如果要获取一个集合的数据,get 方法小程序端不能超过 20 条,云函数端不能超过 100 条

所以对于多条数据,我们应该用分页的形式查询。 skip跳过几条数据,limit查询几条数据

db.collection('user') // 获取云控制台创建的集合引用
    .skip(1)  // 跳过几条数据
    .limit(1) // 查询几条数据
    .get() // 查询
    .then(res=>{
      console.log('success', res);
    }).catch(err=>{
      console.log('fail', err);
    })    

新增

为了之后好介绍,我们对页面进行修改一下。


  
    name: {{item.name}}
    age: {{item.age}}
    sex: {{item.sex == 1 ? '男': '女'}}
    
    
  

  
    name: 
    age: 
    sex: 
        
  

  

image.png

实现新增方法
可以通过在集合对象上调用 add 方法往集合中插入一条记录

const db = wx.cloud.database() //获取数据库的引用
const userCollection = db.collection('user') // 获取user集合的引用
Page({
  data: {   
    sex: 1,
    name: '',
    age: 0,
    list: []
  },  
  onLoad() {
   this.init()
  },
  init(){
    db.collection('user') // 获取云控制台创建的集合引用
    .get() // 查询
    .then(res=>{
      console.log('success', res);
      this.setData({
        list: res.data
      })
    }).catch(err=>{
      console.log('fail', err);
    })    
  },
  // 获取输入框 的姓名和年龄
  bindinput(e) {
    const type = e.currentTarget.dataset.type
    this.setData({
      [type]: e.detail.value
    })
    console.log(e.detail.value);
  },
  // 获取性别
  radioChange(e) {
    this.setData({
      sex: e.detail.value
    })
    console.log('radio', e.detail.value);
  },
  //  新增方法的实现
  addFn() {
    const {
      name,
      age,
      sex
    } = this.data;
    if (!name || !age) {
      return wx.showToast({
        title: '需要输入姓名或年龄',
      })
    }
    userCollection
    .add({        // 新增
      data: {
        name,
        age: +age,
        sex: +sex
      }
    }).then(res => {
      console.log('添加成功', res);
      this.init()
    }).catch(err => {
      console.log('添加失败', err);
    })
  },
})

image.png

云开发控制台也新增了一条数据


image.png

修改

  updateFn(e) {
    const id = e.currentTarget.dataset.id
    const {name, age, sex} = this.data;
    const data = {sex}
    if (name) {
      data.name = name
    }
    if (age) {
      data.age = age
    }
    userCollection
    .doc(id) // 找到需要修改的数据索引
    .update({ // 修改数据
      data
    }).then(res => {
      console.log('更新成功', res);
      this.init()
    }).catch(err => {
      console.log('更新失败', err);
    })
  }
image.png
image.png

删除

  deleteFn(e) {
    const id = e.currentTarget.dataset.id
    userCollection
    .doc(id)
    .remove()
    .then(res => {
      console.log('删除成功', res);
      this.init()
    }).catch(err => {
      console.log('删除失败', err);
    })
  },

比如删除李四


image.png

image.png

报错了。因为云开发控制台中权限是只有创建者可以删除。(云函数没有这个限制,当然我们也可以去云开发控制台自定义规则)。

我们删除王小兰


image.png

删除成功。

额外

排序 orderBy

方法接受一个必填字符串参数 fieldName 用于定义需要排序的字段,一个字符串参数 order 定义排序顺序。order 只能取 asc(升序) 或 desc(倒序)。

image.png
userCollection
    .orderBy('age', 'desc')
    .get() // 查询
    .then(res=>{
      console.log('success', res);
      this.setData({
        list: res.data
      })
    }).catch(err=>{
      console.log('fail', err);
    }) 
image.png

监听 watch

监听集合中符合查询条件的数据的更新事件。使用 watch 时,支持 where, orderBy, limit,不支持 field

    const _this = this
    userCollection
    .watch({
      onChange: function (e) {
        _this.setData({
          list: e.docs
        })
      },
      onError: function (err) {
        console.error('the watch closed because of error', err)
      }
    })

这样我们去云开发控制修改数据,就不用到小程序端,重新编译了。始终监听数据库的变化。

统计条数 count

统计匹配查询条件的记录的条数

    userCollection
    .count().then(res => {
      console.log(res.total)
    })

field

指定返回结果中记录需返回的字段

方法接受一个必填对象用于指定需返回的字段,对象的各个 key 表示要返回或不要返回的字段,value 传入 true|false(或 1|-1)表示要返回还是不要返回。

userCollection
    .field({
      name: 1,
      age: -1, // false 会报错,不知道咋回事,-1没问题
      sex: 1
    })
    .get() // 查询
    .then(res=>{
      console.log('success', res);
      this.setData({
        list: res.data
      })
    }).catch(err=>{
      console.log('fail', err);
    }) 
image.png

你可能感兴趣的:(微信小程序云开发(一))