最近，我用小程序的云开发功能编写了小程序，发现云开发确实是前端开发人员的福音，因为您不需要了解任何后端知识。完全集成数据库和接口。得到它

最重要的是它现在免费！但是我以后不会知道。

冒充“ 小程序全栈开发工程师”的云开发小程序，哈哈，尽管它离真正的全栈开发还很遥远，但这只是一小步。

云开发简介

开发人员可以使用云来开发微信小程序，小型游戏并使用云功能，而无需构建服务器。

云开发为开发人员提供了完整的本机云支持和微信服务支持，削弱了后端以及运维的概念，不需要构建服务器，并且使用平台提供的API进行核心业务开发以实现快速启动和迭代同时，此功能与开发人员已使用的云服务兼容，并且不互斥。

云开发提供了一些基本功能：

能力功能的描述

云功能

无需构建自己的服务器

代码在云中运行，微信私有协议自然认证，开发人员只需要编写自己的业务逻辑代码

数据库

无需构建自己的数据库

一个JSON数据库，可以在小程序的前端进行操作，也可以在云函数中进行读写

存储

无需构建自己的存储和CDN

直接在小程序前端上上传/下载云文件，并在云开发控制台上直观地管理它们

云通话

本地微信服务集成

无需认证即可使用基于云功能的小程序开放接口的能力，包括服务器端调用，对开放数据的访问等。

入门1.创建新的云开发模板

为新项目选择小程序·Cloud Development（不带此项的情况下更新软件）。如果选择此项，则必须输入APPID，并且无法使用测试编号。

点击新建，您将获得默认的快速入门小程序

新项目

2.开放云开发

在开发人员工具工具栏的左侧，单击“云开发”，然后按照提示启用云开发。可以在默认配额下创建两个环境，通常是一个测试环境和一个生产环境。名称创建后无法修改。

3.云开发控制台

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

控制面板

小程序前端开发

接下来，您有两个选择：

小程序前端是本地编写的，并附加了小程序框架参考文档。它是在其他框架1. mpvue

中编写的

我以前已经习惯使用vue。美团的mpvue是一个不错的选择。尽管有点cast割，但支持大多数功能。以下是一些不受支持的功能：

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 / execute npm run dev，运行成功，您可以在微信开发人员工具中看到mpvue的初始页面

然后初始化云函数，修改main.js，并添加以下代码

// /miniprogram/src/main.jsimport Vue from 'vue'import App from './App'Vue.config.productionTip = falseApp.mpType = 'app'// 初始化云函数if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力')} else { wx.cloud.init()}const app = new Vue(App)app.$mount()

接下来，只需找到一个页面并调用quickStart随附的cloud函数。如果您在控制台中看到输出，则操作完成。

// /miniprogram/src/pages/index/index.vuecreated () { wx.cloud.callFunction({ name: 'login', data: {}, success: (res) => { console.log(res) } })}

云功能开发

云函数也是js的语法，但是它散布在数据库的API中。以下是获取订单列表的界面示例

1.数据库

打开云开发控制台，首先在数据库中创建订单集合，然后添加一些数据，如果您感到麻烦，还可以导入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不会打印在开发人员工具的控制台上，因此调试云功能的正确方法是：

将CD放入要在终端中调试并执行npm i的云函数文件夹。右键单击开发人员工具中的云函数名称，然后选择本地调试

如果依赖项安装正确，则默认情况下应选中右上角的“启用本地调试”。最好也检查第二个。输入的参数也可以下次保存。

单击以调用，云功能中的console.log将在此控制台中输出

云功能的本地调试

4.云函数调用

在调用之前，请记住在应用启动时初始化云功能，并且传入的环境ID也应与之对应

上面已对mpvue云功能进行了初始化，本机版本指的是app.js中的quickStart

// 调用云函数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) }})

小程序遇到的坑

小程序隐藏不能在自定义组件上使用

解决方案：在组件外部添加一层视图，并在视图上隐藏显示

在每次修改，上传和部署后，必须在微信开发人员工具中手动右键单击小程序的云功能，否则不会生效

在将参数传递到云函数接口时，不能有一个userInfo字段，因为默认情况下它将以相同的名称传递该字段以覆盖您传递的内容，从而导致您无法获取所需的参数

Vant weapp的van-dialog组件有时在页面的onshow方法中弹出时没有后盖层。

解决方案：在页面上的以下类名称中添加样式：

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

van-field组件设置为type =“ textarea”，并且在弹出van对话框时仍可以单击弹出键盘。

解决方案：设置van对话框弹出时禁用字段组件

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}

小程序的页面页面没有观察者属性

在tabBar页面中使用van-submit-bar组件时，无需添加safe-area-inset-bottom属性以与iPhoneX兼容，并且添加了反向样式混乱。

在vant中使用Dialog，Notify和Toast组件时，必须首先在Page页面的WXML中编写相应的标记。如果组件使用它，则必须找到最近的Page并在WXML中定义它

云功能环境变量切换问题

今天看小程序文档，我发现有些事情已经更新，终于解决了环境变量切换的问题。将来，您只需要修改app.js中wx.cloud.init（）中的env即可同步切换云。该函数的环境变量已更改，而在云函数中只需要这样做：

const cloud = require('wx-server-sdk')cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV})...