taro微信小程序云开发-实现用户信息增改查

趁周末空闲时，（没jojo看我要死了）捣鼓了一下taro和小程序的云开发。
体验很好，作博一篇抛砖引玉，也给想有些想自己做小程序又不会写后端的人略做引导，以求少走些弯路。

几个月后看自己的这篇博文，有点反感这副自以为是的俏皮语气，应该对读者带来了一些阅读障碍，以后写博客尽量公私分明，提升观感。

介绍

taro是京东凹凸实验室团队开发的一套遵循 React 语法规范的多端统一开发框架，类似uni-app和mpvue，区别是它对亲react的开发者更友好，而且目前来看，它的社区和前景也更强大。（奥特曼赛高）

小程序云开发平台是微信2018年9月份推出的、对前端友好的服务平台。
它能做什么？
简单来说，身为前端的你，以往那些需要借助后端才能实现的功能，借助这个平台你可以自己实现，数据库的增删改查、用户鉴权、文件存储管理等等。体验一下伪全栈的快感2333。
目前，可能是由于 年轻+免费 的原因，服务的稳定性和功能性无法与正常的服务器相比（偶尔数据库的操作会莫名失败，流量等配额有一定限制），但因为其船新的开发模式，对有做小项目想法的前端工程师很有吸引力（免费+易上手的服务端功能开发）（小声bb：至少我被吸引了）

开始—原生小程序云开发

合格的官方文档可以解决你绝大部分的问题，尤其是小程序这样一个环境，大多时候细致地查看一下文档比你一碰到问题动辄 不会提问式地提问 要好得多。
三方的攻略更多是踩坑加偏个人色彩的总结。

官方传送门

开始—taro小程序开始云开发

为方便查看，把相关命令贴在下面，用小程序原生的可以跳过这部分

// 全局安装taro脚手架
npm install -g @tarojs/cli
yarn global add @tarojs/cli

// 初始化一个taro项目
taro init myApp
// 后面会让你选择各种项目配置，按照各人喜好来就行
// 重要：模板选择云开发模板
// 其他我选的是sass和ts

项目建成后可以看到client是小程序客户端目录，cloud是云函数目录，用以配置你希望在客户端或云端调用的方法。

实战：用户登录和信息存储（增改查）

浸淫前端多日的你想必从增删改查狂魔的后端同学那听过数据库 database、表 table、记录等名词吧，
以下理解属主观想法，不保证完全准确
个人理解是 表是记录的集合，存储同类数据的单位、数据库是表的集合，存储独立项目数据的单位，而记录就是一条数据。
想实现用户信息的数据库操作，自然有个地方来存储这些信息了，这个地方就是数据库，前面提到的表table在云开发里叫做集合collection，记录就叫记录record/doc。

建立集合

点击微信开发者工具的云开发并选择开通后，输入你的环境名称（谨慎，貌似还不支持变更，每个云开发小程序目前最多两个环境，可供一个正式版一个测试版），等待十来秒，就可以进入云开发的控制台了。上图是我建立的一个集合的案例。
选择集合名称右边的+，输入集合名称即可建立。因为与关系型数据库不同，小程序这种文档型数据的集合并不严格要求每条数据的属性一致。

云函数-登录

微信开发者工具界面，在项目cloud下建立一个名为login的云函数，编写index.js

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
const userCollection = db.collection('user')

exports.main = async () => {
  const { OPENID } = cloud.getWXContext()
  try {
    const allUser = (await userCollection.get()).data
    const [userInfo] = allUser.filter(v => v.openId === OPENID)
    console.log('查到的userInfo', userInfo)
    let name, avatarUrl, gender
    // 无记录，加记录
    if (!userInfo) {
      await userCollection.add({
        data: {
          openId: OPENID,
          createdTime: db.serverDate(),
        },
      })
      // 有记录，返回用户信息
    } else {
      name = userInfo.name
      avatarUrl = userInfo.avatarUrl
      gender = userInfo.gender
    }
    return {
      name: name || null,
      avatarUrl: avatarUrl || null,
      gender: gender || null,
      openId: OPENID,
    }
  } catch (e) {
    console.error(e)
    return {
      code: 500,
      message: '服务器错误',
    }
  }
}

云函数-更新用户信息

如法炮制，再建立一个postUserInfo的云函数，编写index.js

const cloud = require("wx-server-sdk");
cloud.init();
const db = cloud.database();
const userCollection = db.collection("user");

exports.main = async event => {
    const { OPENID } = cloud.getWXContext();
    const { name, gender, avatarUrl } = event;
    console.log('event',event);
    
    try {
        const [userRecord] = (await userCollection
            .where({
                openId: OPENID
            })
            .get()).data;
        console.log("查到的用户信息", userRecord);
        if (!userRecord) {
            return {
                code: 1,
                message: "用户不存在"
            };
        } else {
            await userCollection.doc(userRecord._id).update({
                data: {
                    name,
                    gender,
                    avatarUrl
                }
            });
        }
        return {
            openId: OPENID,
            name,
            gender,
            avatarUrl
        };
    } catch (e) {
        console.log(e);
        return {
            code:500,
            message:"服务器错误",
        }
    }
};

小程序内调用云函数

taro内：

import Taro, { Component } from '@tarojs/taro'
...
 login() {
    Taro.cloud
      .callFunction({
        name: 'login',
      })
      .then(res => {
        console.log('用户信息', res)
        this.setState({
          userInfo: res.result,
        })
      })
      .catch(console.log)
  }
  getUserInfo(e) {
    console.log(e)
    const { detail } = e
    if (detail.errMsg.endsWith('ok')) {
      const userInfo = JSON.parse(detail.rawData)
      const { nickName, gender, avatarUrl } = userInfo
      Taro.cloud
        .callFunction({
          name: 'postUserInfo',
          data: {
            name: nickName,
            gender: gender,
            avatarUrl: avatarUrl,
          },
        })
        .then(res => {
          this.setState({
            context: res.result,
          })
          this.login()
        })
    }
  }
  ...
  render() {
    const avatar = <Image src={this.state.userInfo.avatarUrl} />

    return (
      <View className="index">
        <Button
          openType="getUserInfo"
          onGetUserInfo={this.getUserInfo}
        >
          授权
        </Button>
        {this.state.userInfo.avatarUrl && avatar}
        <View>{this.state.userInfo.name}</View>
      </View>
    )
  }

原生内：

wx.cloud.callFunction({
  // 需调用的云函数名
  name: 'login',
  // 传给云函数的参数
  data: {
    a: 88,
  },
  // 成功回调
  complete: console.log
})
// 当然 promise 方式也是支持的
wx.cloud.callFunction({
  name: 'login',
  data: {
    a: 88
  }
}).then(console.log)

调试准备

如果你直接拷贝了我的代码，那么恭喜你，离成功已经近在咫尺了；如果你按自己的想法编写了代码，那也恭喜你，对后端的思维逻辑可能更深了。

云函数是可以本地调试的：
1、在云函数的文件夹下，运行终端命令npm install 或 yarn install，来安装函数需要的依赖，即小程序服务端云开发的sdk wx-server-sdk
2、鼠标右击云函数名称，选择本地调试，勾选右侧的开启本地调试和文件变更时自动加载

此时，你本地项目的云函数接口会走到本地的云函数代码，而不是线上的，并且能观察云函数内的log信息和在source内打断点。

上线

小程序代码上线的方式是上传-体验版-审核过后发布正式版。
云函数则需要右击云函数-上传并部署，才可生效，仅仅上传是不会更新你服务端的云函数的哦

TODO

后续可扩展使用的功能：
1、环境：维护两套环境，正式版和测试版，防止误操作生产数据等
2、云调用：众所周知，小程序的服务端是可以有很多与微信的api交互的，如发送模板消息、获取小程序码等，而云开发也对其中做了一些支持，官方称之为云调用，具体可查看以下：
云调用文档
服务端开放接口列表

3、与其他服务器交互：经试验，云函数环境是可以对其他服务器进行请求的（接受请求常规方法应该就做不到了，云开发的地址微信没有提供）
在云函数目录下，安装axios、request等请求库即可，因为是node环境，引入方法不能用es6的import，需改用require。