前端analysis | 3w & 1h

《微信小程序》-云开发学习笔记

2020-01-18

2019年，小程序云端开发上线，一直没有好好的去学习，如今serverless如火如荼。今天，重新学习下，并记录如下理解心得：
假定小程序云端开发，简称云端，便于下文使用，减少累赘。

云端能力

能力 作用 说明
云函数 无需自建服务器 在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
数据库 无需自建数据库 一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
存储 无需自建存储和CDN 在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
云调用 原生微信服务集成 基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力

运行过程

  • 小程序结构
    小程序结构
  • 云端运行过程
    运行过程

云端核心概念

  • 同时免费支持两套基础独立的云开发资源，包括数据库、存储空间、云函数等资源。不满足业务需求，可付费升级。
  • 资源配额可分为三类：资源均衡型、CDN 资源消耗型、云函数资源消耗型、数据库资源消耗型
  • 云端数据库为JSON 数据库;每条记录均为json对象。
关系型 文档型
数据库 database 数据库 database
表 table 集合 collection
行 row 记录 record / doc
列 column 字段
  • 数据库 API 包含增删改查的能力，使用 API 操作数据库只需三步：获取数据库引用、构造查询/更新条件、发出请求.
  • wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作.
  • 云开发控制台用于可视化管理云资源。
  • 开发者工具，支持云函数本地调试。其中本地调试，需要保证依赖已存在。
  • 本地调试，偶尔会出现实例调用等待，此时关闭调试窗口，再试即可。
    偶尔出现

云端限制

  • 云函数（单次运行）运行内存：256M
  • 云函数数量：50个
  • 云函数并发数：1000
  • 数据库流量：单次出包大小为16M
  • 数据库单集合索引限制：20个
  • 所有套餐云函数均改为无限调用次数

云端优点

  • 无需维护复杂的鉴权机制，即可获取天然可信任的用户登录态（openid）、appi

云端语法

获取openid、userinfo、appid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# login 云函数
// 云函数模板
// 部署：在 cloud-functions/login 文件夹右击选择 “上传并部署”

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

// 云端初始化
cloud.init({
 env: cloud.DYNAMIC_CURRENT_ENV
})

exports.main = (event, context) => {
  console.log(event)
  console.log(context)

  // 可执行其他自定义逻辑
  // console.log 的内容可以在云开发云函数调用日志查看
  let { userInfo, a, b} = event
  // 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）
  const wxContext = cloud.getWXContext()
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 小程序调用
 wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[云函数 applauch] [login] user res: ', res.result)
        const openid = res.result.openid;
        this.globalData.openid = openid;
        wx.xst.setOpenId(openid);
      },
      fail: err => {
        console.error('[云函数] [login] 调用失败', err)
      }
    })

数据库查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 1. 获取数据库引用
const db = wx.cloud.database()
// 2. 构造查询语句
// collection 方法获取一个集合的引用
// where 方法传入一个对象，数据库返回集合中字段等于指定值的 JSON 文档。
// get 方法会触发网络请求，往数据库取数据
db.collection('books').where({
  publishInfo: {
    country: 'United States'
  }
}).get({
  success: function(res) {
  // 输出 [{ "title": "The Catcher in the Rye", ... }]
  console.log(res)
 }
})

小程序端初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#app.js
onLaunch: function () {
    let self = this;
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        traceUser: true,
        env:'test',
      })
    }
    self.onGetOpenid();

  },

云函数端初始化

1
2
3
4
5
const cloud = require('wx-server-sdk')
// 云端初始化
cloud.init({
 env: cloud.DYNAMIC_CURRENT_ENV
})

图片上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 让用户选择一张图片
wx.chooseImage({
  success: chooseResult => {
    // 将图片上传至云存储空间
    wx.cloud.uploadFile({
      // 指定上传到的云路径
      cloudPath: 'my-photo.png',
      // 指定要上传的文件的小程序临时文件路径
      filePath: chooseResult.tempFilePaths[0],
      // 成功回调
      success: res => {
        console.log('上传成功', res)
      },
    })
  },
})

参考

本文作者：前端analysis
联系邮箱：cheonghu@126.com
版权声明： 本文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！
Tags: 微信小程序
← 《Github Action》- 一键push-code，自动构建个人博客站点 《Lodash源码阅读笔记》- delay →
赏
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏