芋+云开发--微信小程序实践

背景

技术栈：Taro + ReactHook + Typescript + 微信云开发

因为本人的技术栈是 React，所以采用了 Taro 来开发小程序，不过现在 Taro 也支持使用 Vue 语法

微信云开发 无需搭建服务器，可以免登录、免鉴权调用微信开放服务，对于我这种对后端技术知之甚少的纯前端来说真的超级方便

所以最近闲来无事，就用微信云开发鼓捣了个成语接龙的小程序，整个项目基本没有 UI 设计 ????，大家看个乐呵就好

项目初始化

安装 node Taro 这些就不用多讲了吧

选择模板的时候可以直接选择云开发模板，但是我想用 hook ，所以就选了taro-hooks 的模板

其余准备操作如下：

1. 开通云开发，创建云环境，微信开发者工具导入项目时选择云开发即可

2. 根目录下创建文件夹 cloudfunctions (使用云开发模板会直接生成云函数目录，不需要单独创建)

3. project.config.json 文件里指定云函数目录

   

开发时，进入项目根目录编译、预览或打包即可

云函数

新增云函数时可以直接使用微信开发者工具里的编辑器新建，比较方便，本地调试通了之后在上传部署

云函数本地调试时需要在每个函数所在的文件夹先安装依赖 ????

登录

虽然使用云开发可以直接免鉴权操作数据，但是我想记录用户头像和昵称做展示，所以还是新建了登录函数获取用户信息

exports.main = async (event, context) => {
  const { userInfo } = event
  const wxContext = cloud.getWXContext()
  const db = cloud.database({
    throwOnNotFound: false
  })
  return new Promise((resolve, reject) => {
    db.collection('user')
      .get()
      .then(res => {
        if (res.data[0]) {
          resolve(res.data[0])
        } else {
          db.collection('user')
            .add({
              data: { ...userInfo, createTime: db.serverDate(), openid: wxContext.OPENID }
            })
            .then(res => {
              resolve(res)
            })
            .catch(() => {
              reject('error')
            })
        }
      })
      .catch(() => {
        reject('error')
      })
  })
}

调用的话就简单了

cloudFunction({ name: 'login', data: { userInfo: res.userInfo } }).then(() => {
    showToast('登录成功')
})

接龙

成语词典的话我在 github 上找了个现成的 json 文件 链接

用 python 改改格式就可以直接导入云开发数据库

1. 获取随机成语开头

exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  const db = cloud.database()

  return new Promise((resolve, reject) => {
    db.collection('idiom')
      .aggregate()
      .sample({
        size: 1
      })
      .end()
      .then(res => {
        resolve(res.list)
      })
  })
}

2. 输入答案之后校验

我的校验逻辑是接龙时拼音一致就行，音调不用相同

exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  const { idiom, answer } = event
  const db = cloud.database({
    throwOnNotFound: false
  })

  return new Promise((resolve, reject) => {
    db.collection('idiom')
      .where({ word: answer })
      .get()
      .then(res => {
        const result = res.data[0]
        if (result) {
          if (checkSolitaire(idiom.pinyin, result.pinyin)) {
            resolve({
              code: 200,
              data: res.data[0]
            })
          } else {
            resolve({
              code: 500,
              msg: '接龙错误'
            })
          }
        } else {
          resolve({
            code: 500,
            msg: '该成语不存在'
          })
        }
      })
      .catch(err => {
        reject(err)
      })
  })
}

3. 校验成功，接下一个成语

exports.main = async (event, context) => {
  const db = cloud.database()
  const _ = db.command
  const $ = _.aggregate
  const { idiom, idiomList } = event
  let a = idiom.pinyin.split(' ')
  // getStartPinyinArr 方法返回例子：['lī', 'lí', 'lǐ', 'lì']
  const arr = getStartPinyinArr(a[a.length - 1])
  var reg = new RegExp('^(' + arr[0] + '|' + arr[1] + '|' + arr[2] + '|' + arr[3] + ')\\s.*')
  return new Promise((resolve, reject) => {
    db.collection('idiom')
      .where({
        pinyin: reg
      })
      .get()
      .then(res => {
        let data = res.data || []
        idiomList.forEach(a => {
          let index = data.findIndex(b => b.word === a.word)
          if (index !== -1) {
            data.splice(index, 1)
          }
        })
        let len = data.length
        if (len > 0) {
          let random = Math.floor(Math.random() * len)
          resolve(data[random])
        } else {
          resolve()
        }
      })
  })
}

结语

几个主要逻辑就是这些啦，其实还写了历史成绩和排行榜的功能，功能比较简单，就不做过多说明了

总的来说微信云开发对前端来说还是很友好的，可以不依靠后端，也不用花钱买服务器部署啥的

完整代码