最近用小程序的云开发功能写了个小程序，发现云开发这个东西真的是前端开发者的福音，因为你几乎不需要懂任何后端的东西就可以把数据库、接口全搞定
最重要的是现在免费！不过以后就不知道了。
云开发个小程序，假装自己是个“小程序全栈开发工程师”，哈哈，虽然跟真正的全栈开发还差得远，但是也算迈出了一小步
云开发介绍
开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。
云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
云开发提供了几大基础能力支持：
| 能力 | 作用 | 说明 |
|---|---|---|
| 云函数 | 无需自建服务器 | 在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码 |
| 数据库 | 无需自建数据库 | 一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库 |
| 存储 | 无需自建存储和 CDN | 在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理 |
| 云调用 | 原生微信服务集成 | 基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力 |
起步
1. 新建云开发模板
新建项目选择小程序·云开发（没有这项就更新软件），如果你选择了这项则APPID必填且不能使用测试号。
点击新建，你就得到了一个quickStart默认小程序
2. 开通云开发
在开发者工具工具栏左侧，点击 “云开发” 根据提示开通云开发。默认配额下可以创建两个环境，一般就是一个测试环境一个生产环境，名字创建完就不能修改了。
3. 云开发控制台
点云开发按钮进入云开发控制台，其提供以下能力：
- 运营分析：查看云开发监控、配额使用量、用户访问情况
- 数据库：管理数据库，可查看、增加、更新、查找、删除数据、管理索引、管理数据库访问权限等
- 存储管理：查看和管理存储空间
- 云函数：查看云函数列表、配置、日志
小程序前端开发
接下来你有两个选择：
- 小程序前端用原生编写，附上小程序框架参考文档
- 用其他框架编写
1. mpvue
之前一直习惯用vue的，美团家的mpvue是个不错的选择，虽然有些阉割，但是大部分功能都是支持的，下面列举一些不支持的特性：
- 不支持 纯-HTML，小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。
- 模板语法不支持部分复杂的 JavaScript 渲染表达式如：
<p>{{message.split('').reverse().join('') }}</p> - 不支持过滤器
- 不支持在 template 内使用 methods 中的函数。
- 不支持 官方文档：Class 与 Style 绑定 中的
classObject和styleObject语法。 - 不支持在组件上使用 Class 与 Style 绑定
2. 把mpvue项目整合进小程序
首先初始化一个mpvue项目：
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
这个时候可以先不启动构建，我们现在把之前创建的quickStart小程序根目录/miniprogram/下的所有文件删掉，然后把刚刚创建的mpvue项目目录下的所有文件（不要忘记隐藏文件）复制到小程序根目录/miniprogram/中，然后用编辑器打开小程序根目录里的project.config.json，修改如下字段：
{
"miniprogramRoot": "miniprogram/dist/wx/"
}
现在cd进miniprogram/执行npm run dev，run成功，在微信开发者工具就能看到mpvue的初始页面了
然后初始化云函数，修改main.js，添加如下代码
// /miniprogram/src/main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
// 初始化云函数
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init()
}
const app = new Vue(App)
app.$mount()
接着随便找一个页面调用一下quickStart自带的云函数，如果看到console中有输出就大功告成了
// /miniprogram/src/pages/index/index.vue
created () {
wx.cloud.callFunction({
name: 'login',
data: {},
success: (res) => {
console.log(res)
}
})
}
云函数开发
云函数也是js的语法，只不过其中穿插着一下数据库的api，下面以一个获取订单列表的接口为例
1. 数据库
打开云开发控制台，先在数据库中创建一个orders合集，并添加几条数据，如果觉得麻烦也可以导入json或者CVS文件
复制下面代码，保存到一个json文件中导入数据库，注意导入的json文件中不是一个数组，两条数据也不是用逗号分隔，附上导入格式
{
"orderName": "xxx",
"orderDate": 1559700370215,
"done": 0,
"goodsList": [
{
"name": "xx",
"price": 200,
"last": 100
}
]
}
{
"orderName": "xxx1",
"orderDate": 1559700370215,
"done": 0,
"goodsList": [
{
"name": "xx",
"price": 200,
"last": 100
}
]
}
2. 云函数
在开发者工具的编辑器中右键cloudfunctions文件夹，新建一个云函数，输入函数名比如getOrderList
打开其中的index.js文件，下面是一个带分页和排序的列表云函数
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
// 你刚才新建数据的环境的id
env: 'test-xxx'
})
// 获取数据库的引用
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
/**
* @param orderBy [排序字段]
* @param dir [排序方向]
* @param page [分页，从1开始]
* @param pageSize [每页展示条数]
* @param mine [是否我的订单]
*/
try {
const wxContext = cloud.getWXContext()
// 传入的参数都在event中获取
const { orderBy = 'orderDate', dir = 'desc', page = 1, pageSize = 20, mine } = event
const skip = (page - 1) * pageSize
const limit = skip + Number(pageSize)
const myOrder = mine ? { openid: wxContext.OPENID } : {}
// 获取当前查询条件下的总数
const count = await db.collection('orders').where(myOrder).count()
const res = await db.collection('orders')
.where(myOrder)
.orderBy(orderBy, dir)
.skip(skip)
.limit(limit)
.get()
return {
data: res.data,
total: count.total,
page,
pageSize,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
} catch (e) {
return e
}
}
3. 云函数的调试
你可能已经发现了一个问题，就是云函数中写的console.log不会在开发者工具的控制台打印，所以调试云函数的正确做法是：
- 在terminal中cd进你要调试的云函数文件夹并执行
npm i - 在开发者工具中右键点击云函数名，选择本地调试
如果依赖安装正确的话右上角那个“开启本地调试”应该是默认勾选的，最好把第二个也一起勾选；你输入的参数也可以保存起来留着下次用
点击调用了，云函数中的console.log会在这个控制台输出
4. 云函数的调用
在调用之前记得在app启动的时候初始化云能力，传入的环境id也要对应
mpvue云函数的初始化在上面，原生的就参考quickStart，在app.js中
// 调用云函数
wx.cloud.callFunction({
// 函数名
name: 'getOrderList',
data: {
page: 1,
pageSize: 20,
orderBy: 'orderDate',
dir: 'desc'
},
success: res => {
console.log(res.result.data)
},
fail: err => {
console.error(err)
}
})
小程序遇到的坑
小程序hidden不能用在自定义组件上
解决方案：在组件外面包一层view，把hidden写在view上小程序的云函数每次修改完都要在微信开发者工具里手动右键，上传并部署，不然不生效
给云函数接口传参的时候不能有userInfo字段，因为他会默认传递同名字段把你传的覆盖掉，导致你获取不到你想要的参数
vant weapp的van-dialog组件，在页面的onshow方法中弹出时有时候会没有后面的遮盖层
解决方案：把页面中的如下类名加一个样式：
.transition-index--van-fade-leave-to {
opacity: 1;
}
van-field组件设置了type="textarea"，在弹出van-dialog的情况下仍能点击弹出键盘
解决方案：在van-dialog弹出的时候给field组件设置disabledvan-swipe-cell组件的左右按钮样式需要自理。。组件默认无样式，在页面中添加如下样式就跟官方的一样了
/*van-swipe-cell*/
.van-swipe-cell__left, .van-swipe-cell__right {
display: inline-flex;
align-items: center;
justify-content: center;
width: 65px;
height: 48px;
font-size: 15px;
color: #fff;
text-align: center;
background-color: #f44;
}
.van-swipe-cell__left {
background-color: #07c160
}
小程序的page页面没有observers属性
van-submit-bar组件在tabBar页面中使用的时候不需要添加safe-area-inset-bottom属性来兼容iPhoneX，加了反倒样式错乱
vant中的Dialog、Notify、Toast组件使用的时候都要先在Page页WXML中写出对应标签，如果是component要用到，就要往上找到最近的Page并在WXML中定义
云函数环境变量切换问题
今天一看小程序文档，发现更新了一些东西，环境变量切换的问题终于解决了，以后只需要修改app.js中wx.cloud.init()中的env，就可以同步切换云函数的环境变量了，云函数中只需要这样：
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
...
