前言
* 当前使用的taro-cli版本:Taro v2.0.0-beta.9
* 若使用小程序云开发功能,需要在【小程序开发工具】菜单栏点击云开发
* 开通【基础版1】功能,目前是免费,存储空间5GB,数据库流量2GB
* 计费配额可以参考小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/billing/quota.html
* 云函数只适用于微信小程序场景,所以在项目中使用时,需要判断当前环境为微信小程序时才可以调用
1. 判断办法:process.env.TARO_ENV === 'weapp',其他场景(比如h5中)则需要调用真正的后端接口
1. 项目目录建立
`
taro-myapp
|--client
|---config
|---src
|---.editorconfig
|---eslintrc
|---global.d.ts
|---package.json
|---tsconfig.json
|--cloud
|---shop //eg:设置店铺列表数据
|-----index.js
|-----package.json
|--.gitignore
|--project.config.json
|--README.md
`
2. project.config.json中新增云函数配置,"cloudfunctionRoot": "cloud/",其值是云函数目录
3. 编写云函数
1. 按照上面【1】中的目录结构,在cloud/shop/index.js中编写
`
const app = require('wx-server-sdk') //引入云函数依赖
app.init({
env: app.DYNAMIC_CURRENT_ENV
}) //初始化云函数,设置 API 默认环境等于当前所在环境
exports.main = (event) => {
if( func === 'getShop') {
console.log('main event',event) //event传过来的数据格式 event:{func:'getShop',data:{a:1,b:2,c:5}}
return {
sum: data.a + data.b + data.c,//event里面放的都是一些用户传递过来的数据,参数a和参数b
userInfo: event.userInfo //可以直接获取到用户的openid,这些是腾讯给出来的,并不需要用户去授权,很安全。
}
}
}
`
4. 小程序调用
1. 按照上面【1】中的目录结构,在client/gloabal.d.ts中,增加wx声明
`
declare var wx: any;
`
2. 按照上面【1】中的目录结构,在client/src/app.tsx中编写
`
componentDidMount () {
wx.cloud.init({
traceUser: true
}) //用户端小程序会自动记录用户的openid和用户信息,并且在请求时会自动带入openId,无需再进行鉴权。
}
`
3. 按照上面【1】中的目录结构,在client/src/pages/index/index.tsx中,在需要的事件(如点击事件)中编写
`
Taro.cloud.callFunction({
name: 'shop',//小程序云函数的名称
data: {
func: 'getShop', //具体的函数
data: {
a: 2,
b: 3,
c: 5
}
}
}).then((res)=>{
return res
})
`
5. 踩坑记录
* 小程序增加云函数目录后,需要重启下【小程序开发工具】,否则cloud/目录可能不会有‘云’标记,无法部署
* 小程序云函数写完之后,需要在【微信开发者工具中】,右键点击书写的云函数目录(如cloud/shop),上传并部署,部署之后云函数才可以使用,也可以右键点击‘开启云函数本地调试’,都是可视化的操作
* 云函数可以使用之后,可以查看运营数据和日志
* 小程序前端不支持使用async await语法,
1. cnpm i regenerator
2. 将regenerator-master/packages/regenerator-runtime 目录中的 runtime.js 文件取出来放入client/utils中
3. 在有使用 async await 的文件前面引入这个runtime.js文件即可
4. 如clinet/src/pages/index/inxex.tsx文件中,const regeneratorRuntime = require('../../utils/runtime.js');
5. 有时候修改之后,小程序开发工具中,不能实时生效,此时可以重启下【小程序开发工具】
6. 项目结构建立好之后,不要随意更换,以免project.config.json和tsconfig.json中引用的路径有误
6. tcb-router使用
1. 简介
* tcb-router基于 koa 风格的小程序·云开发云函数轻量级类路由库,主要用于优化服务端函数处理逻辑
* 基于tcb-router 一个云函数可以分很多路由来处理业务环境
2. 示例代码(云函数端 cloud/shop/index.js)
`
// 云函数入口文件
const cloud = require('wx-server-sdk')
const TcbRouter = require('tcb-router'); //引用TcbRouter
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
// 云函数入口函数
exports.main = async (event, context) => {
const app = new TcbRouter({ event})
// app.use 表示该中间件会适用于所有的路由
app.use(async(ctx,next)=>{
ctx.data={}
ctx.data.openId=event.userInfo.openId
await next()
})
//适配多个路由写法
app.router(['user,shop'],async(ctx,next)=>{
ctx.data.from='小程序云函数测试'
await next()
})
//商品列表接口
app.router('shoplist', async (ctx, next) => {
ctx.data.name = '商品列表页'
ctx.data.url = 'tencent.com'
const { param1, param2, param3 } = ctx._req.event;
ctx.data.sum = param1 + param2 + param3
ctx.body = {
code: 100000,
data: ctx.data
}
})
return app.serve();
}
`
3. 示例代码(小程序前端)
`
Taro.cloud.callFunction({
name: 'shop',
data: {
$url: 'getshop',
param1: 1,
param2: 2,
param3: 3
},
success: res => {
console.log('云函数 res',res)
},
fail: err => {
console.error('云函数调用失败', err)
}
})
`
8. 云开发数据库操作
1. 小程序端和云函数端均可以单独调用云数据库
* 小程序端:如果没有指定 limit,则默认且最多取 20 条记录。
* 云函数端:如果没有指定 limit,则默认且最多取 100 条记录
2. 小程序端单独使用示例
`
const db = wx.cloud.database()
db.collection('product替换为自己的集合名称').get().then(res => {
console.log('db db db',res.data)
})
`
3. 云函数端单独使用示例
`
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV,
throwOnNotFound: false //.get()不返回报错返回空
})
const db = cloud.database()
exports.main = async (event, context) => {
return await db.collection('product').get()
}
`
4. 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/Cloud.database.html
7. 参考文档
* taro官方文档:https://nervjs.github.io/taro/docs/README.html
* tcb-router文档: https://www.npmjs.com/package/tcb-router