趁周末空闲时，（
没jojo看我要死了）捣鼓了一下taro和小程序的云开发。
体验很好，作博一篇抛砖引玉，也给想有些想自己做小程序又不会写后端的人略做引导，以求少走些弯路。
几个月后看自己的这篇博文，有点反感这副自以为是的俏皮语气，应该对读者带来了一些阅读障碍，以后写博客尽量公私分明，提升观感。
介绍
taro是京东凹凸实验室团队开发的一套遵循 React 语法规范的多端统一开发框架，类似uni-app和mpvue，区别是它对亲react的开发者更友好，而且目前来看，它的社区和前景也更强大。（奥特曼赛高）
小程序云开发平台是微信2018年9月份推出的、对前端友好的服务平台。
它能做什么？
简单来说，身为前端的你，以往那些需要借助后端才能实现的功能，借助这个平台你可以自己实现，数据库的增删改查、用户鉴权、文件存储管理等等。体验一下伪全栈的快感2333。
目前，可能是由于 年轻+免费 的原因，服务的稳定性和功能性无法与正常的服务器相比（偶尔数据库的操作会莫名失败，流量等配额有一定限制），但因为其船新的开发模式，对有做小项目想法的前端工程师很有吸引力（免费+易上手的服务端功能开发）（小声bb：至少我被吸引了）
开始—原生小程序云开发
合格的官方文档可以解决你绝大部分的问题，尤其是小程序这样一个环境，大多时候细致地查看一下文档比你一碰到问题动辄 不会提问式地提问 要好得多。
三方的攻略更多是踩坑加偏个人色彩的总结。
官方传送门
taro_20">开始—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。
