小程序云开发入门

最近用小程序的云开发功能写了个小程序，发现云开发这个东西真的是前端开发者的福音，因为你几乎不需要懂任何后端的东西就可以把数据库、接口全搞定

最重要的是现在免费！不过以后就不知道了。

云开发个小程序，假装自己是个“小程序全栈开发工程师”，哈哈，虽然跟真正的全栈开发还差得远，但是也算迈出了一小步

云开发介绍

开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。

云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

云开发提供了几大基础能力支持：

能力	作用	说明
云函数	无需自建服务器	在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
数据库	无需自建数据库	一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
存储	无需自建存储和 CDN	在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
云调用	原生微信服务集成	基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力

起步

1. 新建云开发模板

新建项目选择小程序·云开发（没有这项就更新软件），如果你选择了这项则APPID必填且不能使用测试号。

点击新建，你就得到了一个quickStart默认小程序

新建项目

2. 开通云开发

在开发者工具工具栏左侧，点击 “云开发” 根据提示开通云开发。默认配额下可以创建两个环境，一般就是一个测试环境一个生产环境，名字创建完就不能修改了。

3. 云开发控制台

点云开发按钮进入云开发控制台，其提供以下能力：

• 运营分析：查看云开发监控、配额使用量、用户访问情况
• 数据库：管理数据库，可查看、增加、更新、查找、删除数据、管理索引、管理数据库访问权限等
• 存储管理：查看和管理存储空间
• 云函数：查看云函数列表、配置、日志

控制台

小程序前端开发

接下来你有两个选择：

1. 小程序前端用原生编写，附上小程序框架参考文档
2. 用其他框架编写

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

image.png

打开其中的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不会在开发者工具的控制台打印，所以调试云函数的正确做法是：

1. 在terminal中cd进你要调试的云函数文件夹并执行npm i
2. 在开发者工具中右键点击云函数名，选择本地调试

如果依赖安装正确的话右上角那个“开启本地调试”应该是默认勾选的，最好把第二个也一起勾选；你输入的参数也可以保存起来留着下次用

点击调用了，云函数中的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)
  }
})

小程序遇到的坑

1. 小程序hidden不能用在自定义组件上
   解决方案：在组件外面包一层view，把hidden写在view上

2. 小程序的云函数每次修改完都要在微信开发者工具里手动右键，上传并部署，不然不生效

3. 给云函数接口传参的时候不能有userInfo字段，因为他会默认传递同名字段把你传的覆盖掉，导致你获取不到你想要的参数

4. vant weapp的van-dialog组件，在页面的onshow方法中弹出时有时候会没有后面的遮盖层
   解决方案：把页面中的如下类名加一个样式：

.transition-index--van-fade-leave-to {
  opacity: 1;
}

5. van-field组件设置了type="textarea"，在弹出van-dialog的情况下仍能点击弹出键盘
   解决方案：在van-dialog弹出的时候给field组件设置disabled

6. van-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
}

7. 小程序的page页面没有observers属性

8. van-submit-bar组件在tabBar页面中使用的时候不需要添加safe-area-inset-bottom属性来兼容iPhoneX，加了反倒样式错乱

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