用Taro、React和微信云开发，我成功创建了一款满足打工人需求的小程序
上一篇是关于小程序的开发过程，这篇就专门写一下技术类的吧~ 小程序的开发大家都会，但是云开发这块还有很多文档好像不多，所以这里我会着重写一写云开发的注意事项。
为了计划逃离打工，我开发了一个小程序...
小程序二维码:
简介
一天包含每天工作时长的工资计算、毒鸡汤、辟谣列表、一会吃什么、
下班做什么，距节假日、发薪日、休息日的小程序、kfc疯狂星期四文案
（持续更新中...）
主页效果图
技术
前端：TaroJs、 React Hooks
后端：微信云开发
工具：vscode 、微信开发者工具
TaroJS
- Taro能支持很多技术栈,对于前端开发者来说是非常友好的框架。
- 官方文档：taro-docs.jd.com/docs
Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发
微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。
第一次使用Taro，原因就是上一份工作是使用React技术栈，后来用不惯Vue，所以选择Taro。 个人觉得还可以，3.0版本之后，已经能支持大部分原生微信api了，组件也是。 当然，原生小程序的坑也一个不落下。
创建项目
创建项目就很久简单， 根据Taro的文档来就可以了。
- 文档: taro-docs.jd.com/docs/GETTIN…
- 建议使用yarn，然后选择你需要的技术栈就可以了
- 然后你就得到类似这样的项目(React版本)
到处，项目已经创建的差不多了，目录管理、工具、https请求的封装都因人而异，我这里主要讲解云开发的使用。
云开发服务
-
云数据库:能支持数据格式JSON，需要什么加什么，非常方便
-
云函数:跟普通函数类似，能调用微信的服务类api，如：获取微信openid
只需要使用微信开发者工具创建小程序的时候，选择云开发就可以了，但是要真实的AppId，测试号不可以
注意要确定好云开发服务器名字，创建之后就不能改了。
- 云开发服务器界面
微信云开发使用
如果你开通了微信云开发，那你需要在配置文件中加入对应的文件目录
那么就会和下图一样，出现云开发环境，你只需要在本地写自己的云开发函数，然后同步到云服务器，即可
1、获取openId的云函数
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
- 前端项目中使用，就能获取到对应的微信id。
2、创建云数据库
很简单，直接创建，跟后台管理系统一样，相信大家都很熟
然后你就得到一个空白的数据库，这里就是存JSON数组的地方，什么字段你都可以*发挥
3、云数据库初始化
微信云开发中，必须要初始化数据
// 初始化数据库
const db = Taro.cloud.database({
env: 'cat-xxxxxxxx'
})
- 可以在utils.js中初始化，但是要注意项目的执行顺序
- 因为项目是最开始执行的文件是：app.tsx，如果你在app.tsx文件中使用封装的数据库对象，那么你就会看到数据库对象是undefined。
// 公共js中的数据库初始化
// utils.js
import Taro from '@tarojs/taro'
export const db = Taro.cloud.database({
env: 'cat-xxxxxxxxx'
})
- 页面中使用
import { db } from '@/utils/init'
...
// 根据列表id，获取数据库中的信息
db.collection('rumor').where({
_id: _.eq(_id)
}).get({
success: (res: any) => {
setRumor(res.data[0])
}
})
...
4、注意！！ 重中之重！！ 云开发数据库的权限
云数据库创建之后，默认是仅【创建者读写】的，而很多数据是自己导入的，在后台是被默认为没有创建者的！！ 所以，当你发现查不到数据的时候，第一时间要去看数据库的权限。别给这玩意给气炸了！！！
5、云开发数据的CURD
直接看微信云开发的官方文档吧，不行的话就直接百度。
微信云开发CURD文档：developers.weixin.qq.com/miniprogram…
我就简单的做一下示例。
- 新增用户数据
const fetchStateAdd = (openid) => {
const db = Taro.cloud.database({
env: 'cat-xxxxxxx'
})
// 初始化用户数据
const data = {
...counterStore.globalState
}
db.collection('state').add({
data: data,
success: function (res: any) {
// res 不会返回新增后的数据
// 把用户数据存入本地存储
const globalState = {
...data,
_id: res._id,
_openid: openid
}
counterStore.setGlobalState(globalState)
}
})
}
- 更新用户数据
const stateSave = () => {
const { _id, _openid, ...rest } = state
let globalState = JSON.parse(JSON.stringify(state))
// 更新数据的时候不能把_id，_openId数据传回去，会造成冲突
delete globalState._id
delete globalState._openid
db.collection('state').doc(_id).update({
// data 传入需要局部更新的数据
// 除了自己修改的数据以外，还要把其余数据原封不动的传回去
data: {
...rest,
...globalState
},
success: function (res) {
setGlobalState(state)
onCancel()
}
})
}
- 查询用户数据
// 根据id获取一些全局数据
const db = Taro.cloud.database({ env: 'cat-xxxxxxxxx' })
db.collection('global').where({
_id: _.eq(globalId)
}).get({
success: function (res: any) {
const item = res.data[0]
counterStore.setGlobalData(item)
}
})
已上线的小程序
开发历程
在我的另外一篇文章，求一波点赞~
为了计划逃离打工，我开发了一个小程序...
后续
到此为止，已经知道Taro、微信云开发的基本创建和使用了，能满足整体的开发。
如果你还有什么问题不清楚的话，可以评论，或者私信我，再或者加入群聊。
微信群聊：（如果失效了话，可以在小程序中，我会一直更新小程序中的入群二维码。）
