前端analysis | What,Why,Who,When,Where,How

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

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)
},
})
},
})

参考

使用支付宝打赏
使用微信打赏

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