微信小程序云开发从头到尾详细全过程教程！（一）

hello，大家好，我是disguiseFish！我最近在搞云开发呀，然后决定把自己从头到尾的每一步都分享出来，供大家一起学习进步。

第一步：创建一个小程序号第二步：完善基础信息后，添加开发者第三步：我们开发者开始开发小程序~（一）创建一个我们的云开发项目

我们先打开微信小程序开发者工具在我们的 mp.weixin.qq.com/ 网站上找到我们小程序的appID

将这个id填入到里面，并且勾选云开发，点击新建

首先笔者认为，自己如果还不太熟悉云开发的话，建议首页先保留着，里面有一些基础的教程，可以自己尝试体验学习一下

进去后就是这样

我们可以先尝试一下获取openid，如果获取不到的话，要先在小程序中右键点击cloudfunctions，选择当前环境，然后可以获取到openid

（二）下载一个ui框架（vant-weapp）

开发步骤我这边是打算，先写前端静态页面，之后再新建云函数~~接着再联调

在这里我选择使用vant框架，其实用什么框架最后效果都差不多，正好笔者之前没用过vant，想试试看。

1.查看组件库样式

vant-weapp组件库链接：

2.初始化package.json文件

打开终端

然后输入命令：npm init之后可以全部回车默认选项

成功后会弹出一个json 文件

接下来我们继续输入安装vant-weapp的命令：npm i vant-weapp -S --production

因为种种原因，云开发的npm需要我们手动构建：点击工具然后点击构建npm

构建成功后会有一个弹窗：

这个时候我们能看到，我们的ui框架加进去啦~

引进成功后我们勾选一下使用npm模块

（三）使用ui框架（vant-weapp）

这个时候我们可以切到ui框架weapp组件库链接：

找到我们要用的组件，例如我现在要使用该框架的tab标签：

可以先试着把官网中的示例弄到我们的项目中~

在app.json中先根据自己实际情况改变路径

在wxml中引入文件标签

在js中写入变量以及方法

最后能成功引用接下来想实现：创建一个新页面，首页还留着，加一个按钮，点击它跳到新增的页面（我们的第一个页面）

先右键点击pages，新建文件夹，在新的文件夹里，可以先把index文件夹里的文件们copy过来，再把不用的删掉当然你也可以在pages下新建文件夹，再右键该文件夹点击新建page，接下来你就能拥有干净的文件了，这种添加方式会自动在路由里给你添加上路由，你就不用手动添加了

然后我们再配置路由，接下来在首页中新增按钮跳转到我们真正的首页去（选择暂时保留首页，为了之后学习创建云函数）

接下来在真正的首页中创建了三个按钮，这个页面比较简单，这个项目之后会涉及到鉴权，之后我总结的时候会分开写让逻辑清晰一些

再分别创建这三个按钮跳转到的页面

点击事件和跳转的方法和原生的微信小程序一样的写法

今天我就先写到这，之后会一点点更新，把自己接下来遇到的问题和解决方法贴出来~

接下来我要写我的第二个页面了，订单列表，订单列表就打算上部分写一个tabs，下部分可以做一个列表

我在引入vant的一个组件的时候，遇到一个问题，和其他引入组件的提示不一样了，感觉是他们的一个问题吧

就是会提示

这个时候我去我相关目录下的文件夹查看 确实没有我要引进来的这个文件。。。。。 那么。。。我查了一些资料，最后选择重新安装之前安装的依赖项，我先删掉一个文件和package.json文件内的这行代码，接着用官网的下载依赖性代码

npm i @vant/weapp -S --production

重新用工具构建npm 这个时候发现刚才删除的文件夹 文件夹名字变了，里面的文件也有我们要的文件了，估计之前下载的依赖项不完整导致的，

接下来我们需要改一下路径，因为文件夹的名字变了但这个时候 我们发现 虽然组件不报错了 但是样式没了。。。。

最后研究了一会儿后发现，重启后样式就正常了。。。。。。然后继续敲代码

中途还遇到一个小问题，在引入van-swipe-cell的时候，发现不起作用，在排查了是否下载的是最新组件库以及是否真的有这个文件的时候，确实存在我引入的这个文件，引入也没报错，但是就是没起作用。百度查了很久后，发现问题在于。。。没有引入他的父级组件。。。。是不是很坑。。然后官网里也没让你引入，所以我们是不知道的。。。

这样引入之后，就能正常显示我们要的效果辣~

然后现在我写到一个分享按钮的功能，然后我分享给小伙伴，小伙伴那边因为不是开发者无法点开查看，他提议让我把代码开放到体验版，，，然后 我目前还不知道怎么弄 ，接下来一步步来然后，，，，其实很简单，因为这个项目一开始是在本地上启动的一个，我直接在微信开发者工具上

点击右上方的上传,然后一路确定，最后去 微信公众平台 的版本管理 把开发版本放到体验版就好~~~

（四）创建云函数一. 创建云函数前 （感觉其实就是写接口啦~）（1）指定该目录为云函数的跟目录。

在项目的project.config.json文件中，将"cloudfunctionRoot": 字段的值设置为你的云函数根目录，如"cloudfunctionRoot": "云函数根目录"样式，如下图所示

完成该步骤后，左侧新建的那个云函数根目录会变成一个有云朵符号的文件夹。就说明我们设置路径成功啦~如果原本就有的话，就不用专门设置这个

（2）在项目的app.js文件中指定云开发的环境ID

env字段即为云开发的环境ID，然后在云函数根目录右键之后选择云环境为下图env变量设置的云环境。至此云开发的云函数环境已经搭建好了。不过我这里是没填，表示的是使用默认环境

二. 新建云函数步骤：（1）在云函数根目录右键点击新建node.js云函数

右键cloudfunctions文件，点击新建node.js云函数，然后给你的这个方法起一个符合业务的名字，因为我这里想做一个用户一进入小程序，便要查询该用户的身份是管理人员还是负责人，或是路人~~ 所以起的这个名字：获取权限

（2）在新建的云函数处右键在终端打开

在新建的云函数处右键在终端打开，然后输入npm install node-xlsx该命令为使用node.js的npm管理工具安装依赖模块，安装完成之后会在新建的云函数目录下生成一个node_modules和package-lock.json的文件，至此云函数依赖安装完成。

（3）编写云函数内容

云函数的业务逻辑都是在云函数的入口出开始编写

最初是这样的：

const cloud = require('wx-server-sdk')
 
cloud.init()
 
// 云函数入口函数
exports.main = async (event, context) => {
  return await cloud.database().collection('guest').get({
    success: function (res) {  
      return res;
    },
    fail: function (res) {
      return res;
    }
  });

云函数的传入参数有两个，一个是 event 对象，一个是 context 对象。event 指的是触发云函数的事件，当小程序端调用云函数时，event 就是小程序端调用云函数时传入的参数，外加后端自动注入的小程序用户的 openid 和小程序的 appid。context 对象包含了此处调用的调用信息和运行状态，可以用它来了解服务运行的情况。在模板中也默认 require 了 wx-server-sdk，这是一个帮助我们在云函数中操作数据库、存储以及调用其他云函数的微信提供的库

我们可以试一下：我们修改一下模板的返回值，

// ...
exports.main = async (event, context) => {
  // ...
  return {
    sum: event.a + event.b
  }
}

这几行代码代表的是，将传入的 a 和 b 相加并作为 sum 字段返回给调用端。在小程序中调用这个云函数前，我们还需要先将该云函数部署到云端。在云函数目录上右键，在右键菜单中，我们可以将云函数整体打包上传并部署到线上环境中。

本地调试的方法1 编写如下云函数代码

2 对云函数目录右键，选择 “启动云函数本地调试”

然后我们本地调试一下，先对该云函数 右键打开终端 npm install 一下，接着右键该函数开启本地调试

3 此时应该看到本地调试窗口打开，同时该云函数的 tab 也已打开，如果没有，在左侧列表中选择该函数，双击打开 tab4 如果右侧的控制面板中的 “开启本地调试” 没有勾选，勾选上，勾选后会开启对该云函数的本地调试，所有模拟器中的请求会请求到本地调试的云函数实例

5 在小程序模拟器中操作，发起对该云函数的调用

6 此时云函数本地实例被触发，可以进行断点等调试操作

点击了一下 确实执行成功啦！！！ 接下来我准备写一个查询数据库的云函数

（一）云开发如何操作数据库，查询数据库里的数据？

一开始我按着官方给的教程编写，，，不知道为啥就是有问题 提示了已经调用该函数 但就是没有返回值。。后来我删掉后重新新建云函数后，就能正常编写返回了。。。一样的代码。。。就很神奇

然后我在数据库中写入一些东西，这里尝试写json传入失败，包括拿导出的json上传数据还是失败，应该是他们这个功能有问题吧然后我还是手动敲入了4条数据

这个时候我们把获取数据库的方法放到首页中执行，确实能拿到我们数据库的东西

我这边是打算把数据库的东西一下子获取出来存到小程序中，这样后期数据的获取就不用再调用接口了

现在我要做的是，在进入页面的时候 根据用户的openId来查询我userlist中id一样的那条数据，现在在原来的方法上修改：

首先数据库是这样的：

然后我们云函数可以这样写

在首页调用该方法 入参传入该用户的openId

成功拿到了我们要的数据，通过用户列表的type再去判断页面某个部件的展示和隐藏

（二）云开发如何操作数据库，往数据库中的新增数据呢？

在创建新增按钮里添加一个事件，在事件方法中直接写

还是很简单的 其实 不调用函数 其他地方想直接操作数据库 直接这样写 似乎也是可以的！但是考虑到方法的复用，所以还是写在了数据库里，然后去数据库查，新增成功啦！

（三）云开发如何操作数据库，删除数据库中的数据呢？

这里有文档：uniapp.dcloud.io/uniCloud/cf…

    //  db.collection('users_list').doc(_id).remove({
    //     success: function(res) {
    //       // console.log(res,'res')
    //       wx.showToast({
    //         title: '删除负责人成功',
    //       })
    //     }
    // })

在写云开发的删除的时候，我掉入了一个坑里，我直接在小程序端的js中像新增那样调用删除数据库的方法，因为查出来很多都这样写的，文档也是这样写的，但这时候，就算我的代码和他们的一样，也没删除成功（就是上面那只种写法）。。。。就是提示删除成功了，但是数据库里还是一样的。这个时候我查到了一种说法，说是小程序端的删除失效了。。必须要写到云函数端那边。

于是我把方法改到云函数端那边写，就能成功删除了代码如下

js代码：

云函数端的代码如下：

（四）云开发如何操作数据库，修改数据库中的数据呢？

云函数这边 ，修改和删除写法差不多

然后在小程序端，只要把我要修改的数据拼接好后直接传过去就好啦~

然后我这里遇到一个问题，就是当我编辑了这个订单后即使获取了最新的订单列表返回去页面不刷新数据~然后我查了一下发现可以这样解决：我是在获取了最新订单数据后返回页面并重新加载页面，四行解决问题！

        let pages = getCurrentPages()
        let prevPage = pages[pages.length - 2]
        prevPage.onLoad()
        wx.navigateBack()