小程序云开发--最新、最全、最简单入门教程

2022-10-08 08:17:12

小程序云开发–最新、最全、最简单入门教程

主要带大家入门云函数，保证看完能自己操作写页面！！！
本篇主要介绍云开发中的云数据库、云存储、云函数！！！
这里就不带大家安装微信开发者工具了，直接官方下载就可以使用

一、云数据库

初始化

在使用云数据库进行增删改查之前要先获取数据库的引用。以下调用获取默认环境的数据库的引用：

const db = wx.cloud.database()

1、插入数据(增加)

可以通过在集合对象上调用 add 方法往集合中插入一条记录。还是用待办事项清单的例子，比如我们想新增一个待办事项：
官方API：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/add.html

	// 插入数据
    sendmsg(){
    	// 这里是判断你插入的数据是否为空
    	// 要是空的直接结束这个函数
        if(!this.data.name || !this.data.age)
        return false
        let that = this;
        // admin是云数据库中建的集合
        db.collection('admin').add({//add是执行添加数据的方法
        	// data是你提交的数据
          data:{
            name:that.data.name,
            age:that.data.age
          },
          // 回调函数 提交成功返回结果
          success(res){
            console.log(res)
            that.setData({
              name:'',
              age:''
            })
          }
        })
      },

2、查询数据

查询数据分为：查询单条数据、查询一个集合的数据
官方API：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html

查询单条数据

通过调用get方法来实现：

// todos同上 是你在数据库里建的集合
// doc里边放的是查询条件 是上边存入数据库内生成的唯一id
db.collection('todos').doc('todo-identifiant-aleatoire').get().then(res => {
  // res.data 包含该记录的数据
  console.log(res.data)
})

查询一个集合的数据

不用填写查询条件，直接获取集合内的所有数据，使用get方法：

// todos同上 是你在数据库里建的集合
db.collection('todos').get().then(res => {
  // res.data 是一个包含集合中有权限访问的所有记录的数据，不超过 20 条
  console.log(res.data)
})

3、修改数据

使用 update 方法可以局部更新一个记录或一个集合中的记录，局部更新意味着只有指定的字段会得到更新，其他字段不受影响。
官方API：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/update.html

// todos同上 是你在数据库里建的集合
// doc里边放的是查询条件 是上边存入数据库内生成的唯一id
db.collection('admin').doc(id).update({
		// data里面放的是你要修改的数据以及修改的内容
       data:{
           name:that.data.name,
           age:that.data.age
       }
   }).then(res=>{
       console.log(res)
   })

4、删除数据

官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/remove.html
对记录使用 remove 方法可以删除该条记录，比如：

// doc选择具体数据  remove删除数据
   db.collection('admin').doc(_id).remove()
    .then(res=>{
        console.log(res);
    })
    .catch(err=>{
        console.log(err)
    })

二、云存储

官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage/api.html
1. 在这里声明一下，云数据库与云存储的区别：一个是存储数据的，就比如说是存储一个班的考试成绩，这可以存储到云数据库里。
另一个是存储文件、压缩包、以及图片等等的。现在大家，明白了吗？
2. 云存储是不需要进行初始化操作的，有的小伙伴要是想同时操作云存储跟云计算也是可以的，
只不过要先初始化云存储之后才能进行操作

文件存储操作

1、上传文件

在小程序端可调用 wx.cloud.uploadFile 方法进行上传：

wx.cloud.uploadFile({
  cloudPath: 'example.png', // 上传至云端的路径
  filePath: '', // 小程序临时文件路径
  success: res => {
    // 返回文件 ID
    console.log(res.fileID)
  },
  fail: console.error
})

上传成功后会获得文件唯一标识符，即文件 ID，后续操作都基于文件 ID 而不是 URL。

2、下载文件

可以根据文件 ID 下载文件，用户仅可下载其有访问权限的文件：

wx.cloud.downloadFile({
  fileID: '', // 文件 ID
  success: res => {
    // 返回临时文件路径
    console.log(res.tempFilePath)
  },
  fail: console.error
})

3、删除文件

可以通过 wx.cloud.deleteFile 删除文件：

wx.cloud.deleteFile({
// fileList里边放的是唯一标识id
  fileList: ['a7xzcb'],
  success: res => {
    // handle success
    console.log(res.fileList)
  },
  fail: console.error
}

图片存储操作

1、图片上传

这里简单演示一下云数据与云计算一块操作的代码：
一般用不到，大家看一下就当作拓展了，看不懂没关系，写的都非常详细

// 获取图片会返回一个临时路径
    wx.chooseImage({
      count: 1,// 选择图片的数量
      sizeType: ['original', 'compressed'],//设置大小类型
      sourceType: ['album', 'camera'],//选择来源方式
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths[0]
        // 文件上传到云存储API
        wx.cloud.uploadFile({
          cloudPath: Date.now()+'.png', // 上传至云端的路径
          filePath: tempFilePaths, // 小程序临时文件路径
          success: res => {
            // 返回文件 ID
            console.log(res.fileID)
            // 上传到数据库
            db.collection('image').add({
              data:{
                imgID:res.fileID
              }
            })
          },
          fail: console.error
        })
      }
    })

2、下载图片

wx.cloud.downloadFile下载文件以及选中
wx.saveImageToPhotosAlbum 保存到相册

// 数据库中对应的id
    let id = e.target.dataset.id;
    // 从data数据中img 对应的index
    let index = e.target.dataset.index;
    // 每一条数据中对应的fileid
    let fileID = this.data.img[index].imgID;
    //下载文件
    wx.cloud.downloadFile({
      fileID: fileID, // 文件 ID
      success: res => {
        // 返回临时文件路径
        console.log(res.tempFilePath)
        // 这个函数的意思是保存到相册
        wx.saveImageToPhotosAlbum({
          filePath:res.tempFilePath,
          success(res) {console.log(res)}
        })
      },
      fail: console.error
    })

3、删除图片

由于存储的时候在云数据库里和云存储里都存储了，所以删除的时候
要一块删除，且删除库里面的图片跟页面中的图片不能同时进行，不然容易乱套

// 数据库中对应的id
    let id = e.target.dataset.id;
    // 从data数据中img 对应的index
    let index = e.target.dataset.index;
    // 每一条数据中对应的fileid
    let fileID = this.data.img[index].imgID;
    db.collection('image').doc(id).remove().then(res=>{
      // 云存储删除文件API
      wx.cloud.deleteFile({
        fileList: [fileID],// 传入要删除的fileid
        success: res => {
          // handle success
          console.log(res.fileList)
        },
        fail: console.error
      })
    })

这里就带大家学完了云存储，相信大家的也都跟上了，接下来给你们讲解一下云函数

三、云函数

官方API：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/getting-started.html
以下是我自己理解的
这里带搭建简单的作一个求和函数：

在cloudfunctions文件夹新建一个Node.js云函数

在新建函数中的index.js中写云函数

// 云函数入口函数（简单的求和函数）
exports.main = async (event, context) => {
    return {
    	// 传入了两个参数求和
        sum: event.a + event.b
    }
}

右键点击新建的云函数文件夹
点击上传与部署
这样你的求和函数在云计算中就算部署好了
(可以直接在云开发的云函数里进行测试使用)

在新建函数中的index.js中写云函数
wx.cloud.callFunction 调用新建的云函数方法


sum(){
    wx.cloud.callFunction({
    	// 调用的方法
        name:'sum',
        // 上边定义了两个参数的求和
        // 这了传入了两个参数
        data:{
            a:2,
            b:3
        }
    }).then(res=>{
        console.log(res)
    })
},

码农公寓