我用 Taro、React、微信云开发捣鼓了一个打工人需要的小程序

在逃的打工猫

已于 2023-05-11 10:47:07 修改

阅读量934

点赞数

文章标签：小程序 react 腾讯云前端框架 javascript Powered by 金山文档

于 2023-03-20 11:17:35 首次发布

本文链接：https://blog.csdn.net/qq_43260048/article/details/129613146

版权

上一篇是关于小程序的开发过程，这篇就专门写一下技术类的吧~

小程序的开发大家都会，但是云开发这块还有很多文档好像不多，所以这里我会着重写一写云开发的注意事项。

小程序二维码:

简介

一天包含每天工作时长的工资计算、毒鸡汤、辟谣列表、一会吃什么、

下班做什么，距节假日、发薪日、休息日的小程序

主页效果图

技术

前端：TaroJs、 React Hooks

后端：微信云开发

工具：vscode 、微信开发者工具

TaroJS

- Taro能支持很多技术栈,对于前端开发者来说是非常友好的框架。

- 官方文档：https://taro-docs.jd.com/docs

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发
微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书小程序 / H5 / RN 等应用。

第一次使用Taro，原因就是上一份工作是使用React技术栈，后来用不惯Vue，所以选择Taro。

个人觉得还可以，3.0版本之后，已经能支持大部分原生微信api了，组件也是。

当然，原生小程序的坑也一个不落下。

云开发服务

- 云数据库:能支持数据格式JSON，需要什么加什么，非常方便

- 云函数:跟普通函数类似，能调用微信的服务类api，如：获取微信openid

只需要使用微信开发者工具创建小程序的时候，选择云开发就可以了，但是要真实的AppId，测试号不可以

注意要确定好云开发服务器名字，创建之后就不能改了。

- 云开发服务器界面

创建项目

创建项目就很久简单，根据Taro的文档来就可以了。

- 文档: https://taro-docs.jd.com/docs/GETTING-STARTED

- 建议使用yarn，然后选择你需要的技术栈就可以了

- 然后你就得到类似这样的项目(React版本)

到处，项目已经创建的差不多了，目录管理、工具、https请求的封装都因人而异，我这里主要讲解云开发的使用。

微信云开发使用

如果你开通了微信云开发，那你需要在配置文件中加入对应的文件目录

那么就会和下图一样，出现云开发环境，你只需要在本地写自己的云开发函数，然后同步到云服务器，即可

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文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/add.html

我就简单的做一下示例。

- 新增用户数据

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

已上线的小程序