微信云开发

头像
後來
    阅读 10 分钟

    什么是微信云开发？

    微信云开发简介

    云开发又简称TCB，是微信官方给我们提供的基于腾讯云的云服务器。

    云开发包含：云数据库，云函数，云存储，云调用四项。

    引用自官方的介绍

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

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

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

    官网：https://cloud.weixin.qq.com/c...

    云开发的优势

    优势.png

    云开发的能力概览

    云开发能力概览.jpg

    云开发的准备工作

    PS：如果小程序安装使用你都懂了，这些准备工作你可以不用看，直接可以从步骤11看起了。

    1.微信官方文档中下载微信者开发工具：https://developers.weixin.qq....

    微信开发者工具下载.png

    2.点击红色框中进入下载详情页，也可以直接点击下面链接，直接进入下载页面。下载地址：https://developers.weixin.qq....

    3.选择自己需要的版本

    微信开发者工具下载详情页.png

    4.找到下载的安装包，安装就是一直下一步，没什么可说的

    5.登陆微信开发者工具，使用自己的微信扫码登陆即可

    微信开发者工具登陆.png

    6.新建一个小程序

    新增小程序.png

    7.小程序注册（已经注册的略过），注册地址：https://mp.weixin.qq.com/

    小程序注册.png
    因为我自己的邮箱都用过了，就不一一演示了，注册的时候选择个人就行了。

    8.AppID的获取（知道怎么使用和获取AppID的略过），红色框中就是你自己的AppID

    AppID获取.png

    9.填写小程序信息，填写自己的项目名称，目录就是小程序文件存放地址，AppID要使用自己的，需要自己去官网注册，才有自己的AppID。后端服务默认是微信云开发，但是我们也可以先不选择不使用云开发。需要的时候我们自己再开通，最后点击确定。

    小程序信息填写.png

    10.微信开发者工具登陆成功的页面

    微信开发者工具登陆成功的页面.png

    11-1.直接使用云开发，在登陆成功界面点击云开发按钮，这里的环境id可以先复制，下面要用

    直接选择云开发的截图.png

    11-2.不使用云开发，在登陆成功界面，点击云开发按钮，需要自己填写环境名称，名称随意，语义化最好，但是不能用中文，付费方式选择按量付费就行了，毕竟有免费的可以先用着，一般来说，自己够用，最后点击确定，去开通云服务，得到的页面和直接使用（11-1）一样的页面。

    不使用云开发的截图.png

    12.添加云开发环境id，记得添加自己的环境id

    云开发环境id.png

    云数据库

    官方文档：https://developers.weixin.qq....

    创建数据库中的集合

    • 创建集合并命名。（PS：个人喜欢仙剑，你们根据自己业务需要起名，这里只是举例。
      创建集合.png
    • 这里我们可以点击页面上的添加记录，在这里直接添加一条记录，选择默认就行，直接点击确定
    • 这样就有了第一条数据，但是只有默认的id，并没有数据，我们点击添加字段，自行添加字段
      添加字段.png
    • 这里说一下，字段类型，就如下图，这些就是云数据库包含的数据类型
      字段类型.png
    • 数据权限说明，默认选择仅创建者可读写，根据自己需求改变
      数据权限说明.png

    云数据库的增删改查

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

    const db = wx.cloud.database()

// 如需获取其他环境的数据库引用，可以在调用时传入一个对象参数，在其中通过 `env` 字段指定要使用的环境。此时方法会返回一个对测试环境数据库的引用。
// 示例：假设有一个环境名为 `test`，用做测试环境，那么可以如下获取测试环境数据库：
const testDB = wx.cloud.database({
   env: 'test'    // 应为环境id
})
    增
    db.collection('xianjian').add({
   data: {
       name: this.data.user.name,
       age: this.data.user.age
   }
})
.then(res => {
   console.log('成功', res)
})
.catch(err => {
   console.log('失败', err)
})
    删
    db.collection('xianjian').doc('16db756f629f166a0633bd2b56c703f7').remove()
    .then(res => {
        console.log('成功', res)
    })
    .catch(err => {
      console.log('失败', err)
    })
    PS：删除不是自己创建的数据的时候，会失败

    删除不是自己创建的数据.png

    改
    db.collection('xianjian').doc('16db756f629f166a0633bd2b56c703f7').update({
    data: {
        name: '长卿',
        age: 19
    }
})
.then(res => {
    console.log('成功', res)
})
.catch(err => {
    console.log('失败', err)
})
    PS：更新不是自己创建的数据的时候，虽然也返回成功，但是，修改成功的却是0

    更新不是自己创建的数据.png

    查

    1. 查询所有数据

      // 常规写法
db.collection('xianjian').get({
 success(res) {
     console.log(res)
 },
 fail(err) {
     console.log(err)
 }
})

// Promise写法
db.collection('xianjian').get()
.then(res => {
 console.log(res)
})
.catch(err => {
 console.log(err)
})

    2. 根据id查询单个数据

      // 需要使用doc
db.collection('xianjian').doc('16db756f629ec2e2062867784f3af2b9').get()
.then(res => {
 console.log(res)
})
.catch(err => {
 console.log(err)
})

    3. 条件查询，多条数据查询，使用where

      // 我们也可以一次性获取多条记录。通过调用集合上的 `where` 方法可以指定查询条件，再调用 `get` 方法即可只返回满足指定查询条件的记录。
// `where` 方法接收一个对象参数，该对象中每个字段和它的值构成一个需满足的匹配条件，各个字段间的关系是 "与" 的关系，即需同时满足这些匹配条件。
db.collection('todos').where({
  '_id': '16db756f629ec2e2062867784f3af2b9',
  'age': 18
})
.get({
  success: function(res) {
 console.log(res)
  }
})

      PS：可能会发现你请求的时候，data里面是空的，但是实际数据库有值，这是因为上面说的权限你没有修改，因为你在数据库直接添加的数据，和你现在查，是不算一个用户的。

      PS：云数据库直接获取，最多只能获取20条数据，使用云函数的获取云数据库数据的话，最多能获取100条。

    其他

    • 排序 orderBy 接收两个参数，第一个是根据哪个字段排序，第二个字段是升序asc，还是降序desc

      db.collection('xianjian')
.orderBy('age','asc')
.get()
.then(res => {
  console.log(res)
})
.catch(err => {
  console.log(err)
})

    • 指定返回数据条数 limit

      db.collection('xianjian')
.limit(1)
.get()
.then(res => {
  console.log(res)
})
.catch(err => {
  console.log(err)
})

    • 跳过指定数据返回后面的数据 skip 通常和limit一起使用，用于分页

      db.collection('xianjian')
.skip(1)
.get()
.then(res => {
  console.log(res)
})
.catch(err => {
  console.log(err)
})

// 分页，返回第二页的10条数据
db.collection('xianjian')
.skip(10)
.limit(10)
.get()
.then(res => {
  console.log(res)
})
.catch(err => {
  console.log(err)
})
    • 操作符 command 有很多种，这里说两种
    • 比较操作符

    image.png

    const _ = db.command
db.collection('xianjian')
.where({
    age: _.gt(18)
})
.get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})
    1. 逻辑操作符

    image.png

    // 单个字段的逻辑操作符使用
// 方法一，流式写法
const _ = db.command
db.collection('xianjian')
.where({
    age: _.gt(16).and(_.lt(20))
})
.get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})
// 方法二，前置写法
const _ = db.command
db.collection('xianjian')
.where({
    age:_.and(_.gt(16),_.lt(20)),
    money:_.and([_.gt(10),_.lt(2000)])   // 前置写法也可以接收一个数组
})
.get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})

// 多个字段的逻辑操作符使用
const _ = db.command
db.collection('xianjian')
.where(_.or([
    {
        age: _.gt(16).and(_.lt(18))
    },
    {
        money: _.gte(1000)
    }
]))
.get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})
    PS：逻辑操作符的组合使用多种多样，只要符合传参规则，怎么组合使用，可以说随你造。

    云函数

    云函数即在云端（服务器端）运行的函数。在物理设计上，一个云函数可由多个文件组成，占用一定量的 CPU 内存等计算资源；各云函数完全独立；可分别部署在不同的地区。开发者无需购买、搭建服务器，只需编写函数代码并部署到云端即可在小程序端调用，同时云函数之间也可互相调用。

    一个云函数的写法与一个在本地定义的 JavaScript 方法无异，代码运行在云端 Node.js 中。当云函数被小程序端调用时，定义的代码会被放在 Node.js 运行环境中执行。我们可以如在 Node.js 环境中使用 JavaScript 一样在云函数中进行网络请求等操作，而且我们还可以通过云函数后端 SDK 搭配使用多种服务，比如使用云函数 SDK 中提供的数据库和存储 API 进行数据库和存储的操作，这部分可参考数据库和存储后端 API 文档。

    云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的 openid，开发者无需校验 openid 的正确性因为微信已经完成了这部分鉴权，开发者可以直接使用该 openid。

    官方文档：https://developers.weixin.qq....

    云函数的准备工作

    1. 在pages同级别创建一个 cloud 文件夹

    image.png

    1. 在project.config.json里面配置云函数的存放目录为刚刚创建的 cloud 文件夹

    image.png

    1. 点击保存以后就会发现我们的 cloud 文件夹就变了样子，上面有一朵云，这代表我们初始化成功了

    image.png

    开始写云函数

    1. 创建一个云函数

    image.png

    1. 给自己的云函数起个名字，回车以后，就会多一个文件夹，里面包含三个文件，主要就是index.js，里面会有自动生成的代码。默认的云函数，是用来获取openid等字段的。

    image.png

    // 我们可以用云函数来增删改查自己的数据库数据，方法同云数据库一样，只是多了云数据库这一步骤
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  return cloud.database().collection('xianjian').get()
}
    1. 在终端中 npm i 下载依赖

    image.png

    1. 本地下载依赖以后，上传并部署，可能要等几分钟才能生效

    image.png

    1. 本地调用云函数

      wx.cloud.callFunction({
 name: 'getList'
}).then(res => {
 console.log(res)
}).catch(err => {
 console.log(err)
})

    2. PS：当我们调用其他云环境的云函数时，需要指定环境id，两种方式

      const cloud = require('wx-server-sdk')
// 给定字符串环境 ID：接下来的 API 调用都将请求到环境 另一个环境id
cloud.init({
  env: '你的另一个环境id'
})

// 或者我们可以使用常量
const cloud = require('wx-server-sdk')
// 给定 DYNAMIC_CURRENT_ENV 常量：接下来的 API 调用都将请求到与该云函数当前所在环境相同的环境
// 请安装 wx-server-sdk v1.1.0 或以上以使用该常量
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

    云存储

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

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

    官方文档：https://developers.weixin.qq....

    文件名命名限制-----来自官方
    • 不能为空
    • 不能以/开头
    • 不能出现连续/
    • 编码长度最大为850个字节
    • 推荐使用大小写英文字母、数字，即[a-z，A-Z，0-9]和符号 -，!，_，.，* 及其组合
    • 不支持 ASCII 控制字符中的字符上(↑)，字符下(↓)，字符右(→)，字符左(←)，分别对应 CAN(24)，EM(25)，SUB(26)，ESC(27)
    • 如果用户上传的文件或文件夹的名字带有中文，在访问和请求这个文件或文件夹时，中文部分将按照 URL Encode 规则转化为百分号编码。
    • 不建议使用的特殊字符: ` ^ " \ { } [ ] ~ % # \ > < 及 ASCII 128-255 十进制
    • 可能需特殊处理后再使用的特殊字符: ， : ; = & $ @ + ?（空格）及ASCII 字符范围：00-1F 十六进制（0-31 十进制）以及7F（127 十进制）
    文件上传
    // wxml
<button bindtap="upload" type="primary">点击上传</button>
<image  src="{{imgurl}}" mode="aspectFill" />

// js
upload:function(){
    let that = this
    wx.chooseImage({
      success (res) {
        wx.showLoading({
          title: '上传中,请稍等...',
          })
        let tempFilePaths = res.tempFilePaths
        wx.cloud.uploadFile({
          cloudPath: 'example.png',
          filePath: tempFilePaths[0], // 文件路径
        }).then(res => {
          console.log(res.fileID)
          that.setData({
            imgurl: res.fileID
          })
          wx.hideLoading();
        }).catch(error => {
          console.log(error)
          wx.hideLoading();
        })
      }
    })
  }
    查看上传的文件

    在云开发--> 存储中查看我们上传的图片，其他上传的文件也都在这里管理和查看，就不一一演示了。
    image.png

    下载文件
    // wxml
<button bindtap="download" type="primary">点击下载</button>

// js
download: function() {
    // 这里我就固定下载文件了，实际业务肯定是点哪张下载哪张的
    wx.cloud.downloadFile({
      fileID: 'cloud://cloud1-8gq0wljn30854480.636c-cloud1-8gq0wljn30854480-1312356497/example.png'
    }).then(res => {
      console.log(res.tempFilePath)
      wx.saveImageToPhotosAlbum({
        filePath:res.tempFilePath,
        success (res) {
            console.log(res);
            wx.showToast({
              title: '下载成功',
              icon: 'none',
              mask: true
            })
        },
        fail (err) {
         console.log(err);
         wx.showToast({
         title: '下载失败，请重新尝试',
          icon: 'none',
          mask: true
         })
        }
       })
    }).catch(error => {
      console.log(error)
    })
  }
    小程序云开发
    後來
    1 声望0 粉丝
    « 上一篇
    Flex布局
    下一篇 »
    Node - Express

    引用和评论

    推荐阅读
    头像
    Vue中的微信分享

    後來阅读 1.1k

    头像
    小程序如何实现跨页面通信

    南玖赞 4阅读 1.4k

    头像
    SpringBoot微信扫码登录（小程序版）

    Pursuer丶阅读 2.8k

    头像
    云开发 AI 实战—基于腾讯云云开发 Copilot快速开发陕西家乡小程序实战

    一键难忘阅读 1.1k

    头像
    10款开源在线文档协作工具深度解析，助力精益生产管理

    用户bPdheZZ阅读 942

    头像
    推荐！六款最受欢迎的需求管理工具

    用户bPdheZZ阅读 650

    头像
    金融行业数据可视化平台：8款软件助力市场趋势分析

    用户bPdheZZ阅读 623

    0 条评论
    得票最新