微信小程序云开发

微信小程序云开发

1、认识小程序开发

• 小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。
• 开发者可以使用云开发快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力。
• 开发者无需搭建服务器，可免鉴权直接使用平台提供的API进行业务开发小程序
• 云开发又简称tcb，是微信官方给我们提供的基于腾讯云的云服务器。目前云开发包含：云数据库，云函数，云存储，云调用。后面章节会具体给大家讲解这几个。
• 官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

2、微信开发者工具下载及安装

微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

一路下一步即可

3、小程序的注册

小程序的注册：https://developers.weixin.qq.com/miniprogram/introduction/#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%B3%A8%E5%86%8C

正式使用更推荐注册一个公众号，自带小程序

4、云开发环境搭建

打开微信开发者工具，点击云开发，等待加载即可

5、云数据库

5.1、图形化界面操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gedVTdrI-1625987488433)(C:\Users\yoya\AppData\Roaming\Typora\typora-user-images\image-20210710212739551.png)]

5.2、云数据库快速入门

app.js

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源，如不填则使用默认环境（第一个创建的环境）
        // env:"ruoye-3gpfdl7g7c323196",
        traceUser: true,
      })
    }
  }
})

index.js

const app = getApp()

Page({
  data: {
  },
  onLoad: function() {
    const db = wx.cloud.database()
    // es5
    // db.collection("people").get({
    //   success(res){
    //     console.log("请求成功",res)
    //   },fail(err){
    //     console.log("请求失败",err)
    //   }
    // })

    // es6
    db.collection("people").get()
    .then(res=>{
      console.log("请求成功",res)
    })
    .catch(err=>{
      console.log("请求失败",err)
    })
  }
})

数据库明明有数据库，返回为空？

data: []
errMsg: "collection.get:ok"
__proto__: Object

5.3、数据库权限

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C1DXEzk3-1625987488436)(C:\Users\yoya\AppData\Roaming\Typora\typora-user-images\image-20210710212759595.png)]

修改权限后即可查询到数据

5.4、云数据库查询

5.4.1、全部查询

const db = wx.cloud.database()
db.collection("people").get()
    .then(res=>{
    console.log("请求成功",res)
})
    .catch(err=>{
    console.log("请求失败",err)
})

5.4.2、条件查询

const db = wx.cloud.database()
db.collection("people").where({
    name:"yoya"
}).get()
    .then(res=>{
    console.log("请求成功",res)
})
    .catch(err=>{
    console.log("请求失败",err)
})

5.4.3、查询单条数据

const db = wx.cloud.database()
db.collection("people").doc().get()
    .then(res=>{
    console.log("请求成功",res)
})
    .catch(err=>{
    console.log("请求失败",err)
})

errMsg: collection.doc:fail docId must not be empty; at collection.doc api; 

需要填写参数_id

const db = wx.cloud.database()
db.collection("people").doc("28ee4e3e60e97b612957365b71d7cafe")
    .get()
    .then(res=>{
    console.log("请求成功",res)
})
    .catch(err=>{
    console.log("请求失败",err)
})

5.4.4、排序

asc增序，desc降序

const db = wx.cloud.database()db.collection("people")    .orderBy("diamond","asc")    .get()    .then(res => {    console.log("请求成功", res)})    .catch(err => {    console.log("请求失败", err)})

5.4.5、分页

limit表每页条数

skip表跳过几条

const db = wx.cloud.database()db.collection("people")    .limit(2)    .skip(2)    .get()    .then(res => {    console.log("请求成功", res)})    .catch(err => {    console.log("请求失败", err)})

5.5.6、Command

比较操作符

• 大于：db.command.gt
• 大于等于：db.command.gte
• 小于：db.command.lt
• 小于等于：db.command.lte
• 在给定数组内：db.command.in
• 不在给定数组内：db.command.nin
• 等于：db.command.eq
• 不等于：db.command.neq

const db = wx.cloud.database()const _ = db.commanddb.collection("people")    .where({    diamond:_.gt(60)})    .get()    .then(res => {    console.log("请求成功", res)})    .catch(err => {    console.log("请求失败", err)})

逻辑操作符

• 与：and
• 或：or
• 非：not
• 全非：nor

const db = wx.cloud.database()const _ = db.commanddb.collection("people")    .where(_.and([    {        diamond:_.gt(60)    },    {        diamond:_.lt(100)    }]))    .get()    .then(res => {    console.log("请求成功", res)})    .catch(err => {    console.log("请求失败", err)})}})

const db = wx.cloud.database()const _ = db.commanddb.collection("people")    .where(_.or([    {        diamond:_.lt(60)    },    {        diamond:_.gt(90)    }]))    .get()    .then(res => {    console.log("请求成功", res)})    .catch(err => {    console.log("请求失败", err)})}

字段操作符

• 存在：exists
• 取余：mod

const db = wx.cloud.database()const _ = db.commanddb.collection("people")    .where({    _openid: _.mod(50,0)})    .get()    .then(res => {    console.log("请求成功", res)})    .catch(err => {    console.log("请求失败", err)})

const db = wx.cloud.database()const _ = db.commanddb.collection("people")    .where({    diamond: _.exists(true)})    .get()    .then(res => {    console.log("请求成功", res)})    .catch(err => {    console.log("请求失败", err)})

5.5、云数据库添加

const db = wx.cloud.database()db.collection("people").add({    data: {        "diamond": 50,        "name": "blingbling",        "picture": "https://profile.csdnimg.cn/C/5/2/3_gyfghh",        "type": "root",        "openid": "oYoLp5O5e_J9xUCEXuFd5m1PoS34"    }})    .then(res=>{    console.log("添加成功",res)})    .catch(err=>{    console.log("添加失败",err)})

database permission denied | errMsg: Permission denied

修改权限

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ebe8h34s-1625987488438)(C:\Users\yoya\AppData\Roaming\Typora\typora-user-images\image-20210710215732242.png)]

5.6、云数据库修改

const db = wx.cloud.database()
db.collection("people")
    .doc("28ee4e3e60e9a75f296211f205f8f784")
    .update({
    data: {
        "diamond": 75
    }
})
    .then(res=>{
    console.log("修改成功",res)
})
    .catch(err=>{
    console.log("修改失败",err)
})

5.7、云数据库删除

const db = wx.cloud.database()
db.collection("people")
    .doc("28ee4e3e60e9a75f296211f205f8f784")
    .remove()
    .then(res=>{
    console.log("删除成功",res)
})
    .catch(err=>{
    console.log("删除失败",err)
})

重复删除引发的问题，最好先查询在删除

errMsg: document.remove:fail Error: cannot remove document with _id 28ee4e3e60e9a75f296211f205f8f784, please make sure that the document exists and you have the corresponding Write permission; at document.remove api; 

6、云函数

• 云函数即在云端（服务器端）运行的函数。在物理设计上，一个云函数可由多个文件组成，占用一定量的 CPU 内存等计算资源；各云函数完全独立；可分别部署在不同的地区。开发者无需购买、搭建服务器，只需编写函数代码并部署到云端即可在小程序端调用，同时云函数之间也可互相调用
• 一个云函数的写法与一个在本地定义的 JavaScript 方法无异，代码运行在云端 Node.js 中。当云函数被小程序端调用时，定义的代码会被放在 Node.js 运行环境中执行。我们可以如在 Node.js 环境中使用 JavaScript 一样在云函数中进行网络请求等操作，而且我们还可以通过云函数后端 SDK 搭配使用多种服务，比如使用云函数 SDK 中提供的数据库和存储 API 进行数据库和存储的操作，这部分可参考数据库和存储后端 API 文档
• 云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的 openid，开发者无需校验 openid 的正确性因为微信已经完成了这部分鉴权，开发者可以直接使用该 openid

6.1、云函数快速入门

cloud.js

const cloud = require('wx-server-sdk')

cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})

// event 参数包含小程序端调用传入的 data
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID
  }
}

local.js

wx.cloud.callFunction({
    name:"login"
})
    .then(res=>{
    console.log("云函数调用成功",res)
})
    .catch(err=>{
    console.log("云函数调用失败",err)
})

6.2、云函数获取数据

cloud.js

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  return cloud.database().collection("people").get()
}

local.js

wx.cloud.callFunction({
    name:"select"
})
    .then(res=>{
    console.log("云函数调用成功",res)
})
    .catch(err=>{
    console.log("云函数调用失败",err)
})

6.3、云函数修改数据

cloud.js

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  return cloud.database().collection("people").doc("28ee4e3e60e97b612957365b71d7cafe").update({
    data:{
      name:"若耶"
    }
  })
}

local.js

wx.cloud.callFunction({
    name:"select"
})
    .then(res=>{
    console.log("云函数调用成功",res)
})
    .catch(err=>{
    console.log("云函数调用失败",err)
})

6.4、云函数传参

cloud.js

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  return event._id
}

local.js

wx.cloud.callFunction({
      name:"select",
      data:{
        _id:"28ee4e3e60e97b612957365b71d7cafe"
      }
    })
    .then(res=>{
      console.log("云函数调用成功",res)
    })
    .catch(err=>{
      console.log("云函数调用失败",err)
    })

6.5、云函数修改数据

cloud.js

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  return cloud.database().collection("people").doc(event._id).remove()
}

local.js

wx.cloud.callFunction({
    name:"select",
    data:{
        _id:"65af6a0060ea4e5d000268fc68055c3c"
    }
})
    .then(res=>{
    console.log("云函数调用成功",res)
})
    .catch(err=>{
    console.log("云函数调用失败",err)
})

7、云存储

云存储提供高可用、高稳定、强安全的云端存储服务，支持任意数量和形式的非结构化数据存储，如视频和图片，并在控制台进行可视化管理。云存储包含以下功能：

• 存储管理：支持文件夹，方便文件归类。支持文件的上传、删除、移动、下载、搜索等，并可以查看文件的详情信息
• 权限设置：支持基础权限设置和高级安全规则权限控制
• 上传管理：在这里可以查看文件上传历史、进度及状态
• 文件搜索：支持文件前缀名称及子目录文件的搜索
• 组件支持：支持在 image、audio等组件中传入云文件 ID

7.1、上传图片

选择图片

chooseimg() {
    wx.chooseImage({
        // 图片数量
        count: 1,
        // 图片类型
        sizeType: ['original', 'compressed'],
        // 图片来源
        sourceType: ['album', 'camera']
      })
      .then(res => {
        console.log("选择成功", res)
        // tempFilePaths可以作为img标签的src属性显示图片
        this.uploadimg(res.tempFilePaths[0])
      })
      .catch(err => {
        console.log("选择失败", err)
      })
  },

上传图片

uploadimg(tempFilePath){
    wx.cloud.uploadFile({
        // 在云存储的路径
        cloudPath: 'ruoye.png',
        // 要上传的文件路径
        filePath: tempFilePath, 
    }).then(res => {
        console.log("上传成功",res)
    }).catch(err => {
        console.log("上传失败",err)
    })
}

上传后返回的fileID可用作预览

7.2、上传视频

选择视频

choosevideo() {
    wx.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        camera: 'back'
    }).then(res => {
        console.log("选择成功", res)
        this.uploadvideo(res.tempFilePath)
    })
        .catch(err => {
        console.log("选择失败", err)
    })
},

上传视频

uploadimg(tempFilePath){
    wx.cloud.uploadFile({
        // 在云存储的路径
        cloudPath: 'ruoye.mp4',
        // 要上传的文件路径
        filePath: tempFilePath, 
    }).then(res => {
        console.log("上传成功",res)
    }).catch(err => {
        console.log("上传失败",err)
    })
}

上传后返回的fileID可用作预览

7.3、上传文件（聊天内的文件）

选择文件

choosefile() {
    wx.chooseMessageFile({
        count: 10,
        type: 'all',
    })
        .then(res => {
        console.log("选择成功", res)
        this.uploadfile(res.tempFiles[0])
    })
        .catch(err => {
        console.log("选择失败", err)
    })
},

上传文件

uploadfile(tempFiles) {
    wx.cloud.uploadFile({
        // 在云存储的路径
        cloudPath: tempFiles.name,
        // 要上传的文件路径
        filePath: tempFiles.path,
    }).then(res => {
        console.log("上传成功", res)
    }).catch(err => {
        console.log("上传失败", err)
    })
}

7.4、文件下载

downloadfile(){
    wx.cloud.downloadFile({
        fileID:"cloud://ruoye-3gpfdl7g7c323196.7275-ruoye-3gpfdl7g7c323196-1306454473/ruoye/1555296384.jpeg"
    })
        .then(res=>{
        console.log("下载成功",res)
    })
        .catch(err=>{
        console.log("下载失败",err)
    })
}

pc端无法查看，要在移动端进行查看

7.5、打开下载的文件

下载文件

downloadfile() {
    wx.cloud.downloadFile({
        fileID: "cloud://ruoye-3gpfdl7g7c323196.7275-ruoye-3gpfdl7g7c323196-1306454473/1_Java就业急训营2.0.pdf"
    })
        .then(res => {
        console.log("下载成功", res)
        this.openfile(res.tempFilePath)
    })
        .catch(err => {
        console.log("下载失败", err)
    })
},

打开文件

openfile(path){
    wx.openDocument({
        filePath: path
    })
        .then(res => {
        console.log("打开成功", res)
    })
        .catch(err => {
        console.log("打开失败", err)
    })
}