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

2021/12/9 22:17:50

本文主要是介绍小程序云开发--最新、最全、最简单入门教程,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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

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

一、云数据库

初始化

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

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
以下是我自己理解的
这里带搭建简单的作一个求和函数:

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

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

    // 云函数入口函数(简单的求和函数)
    exports.main = async (event, context) => {
        return {
        	// 传入了两个参数求和
            sum: event.a + event.b
        }
    }
    
  3. 右键点击新建的云函数文件夹
    点击上传与部署
    这样你的求和函数在云计算中就算部署好了
    (可以直接在云开发的云函数里进行测试使用)

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

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

相信学到这里你们已经具备了初步云开发的能力和基础!
快去实践操作一下吧!!!



这篇关于小程序云开发--最新、最全、最简单入门教程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程