微信小程序云开发实战_微信小程序全栈开发实战 李艺 百度网盘

1. 开通微信云开发

首先需要准备以下环境
1

• 微信小程序（含真实AppID）
• 小程序开发工具

2. 新建云函数

在小程序项目根目录找到 project.config.json 文件，新增 cloudfunctionRoot 字段，指定云函数的本地根目录，如下：

{
   "cloudfunctionRoot": "./functions/"
}
1
2
3

然后在小程序下建立对应的目录./functions/
完成后该目录会如下显示：

右键点击functions目录，选择“新建Node.js云函数”，输入云函数名称（例如：newTest），然后等待数秒，右上角会提示如下：

此时云函数就自动上传并部署在远程服务端上了，新建的newTest目录及结构就会变成如下所示：

打开index.js，会看到官方提供的的云函数样例。

3. 本地调试

本地调试云函数，相当于在本地搭建了一套云函数服务端，可以直接调用本地的云函数进行测试
1

右键点击云函数，选择“开启云函数本地调试”。会进入云函数本地调试页面。如下图所示：

此时点击右边的开启本地测试，会提示：node modules 未安装，是否忽略并继续？

点击确定，会弹出报错窗口。
解决方法如下：

• 首先，你要先安装好node
• 然后右键点击云函数，选择“在外部终端窗口打开”
• 输入 npm install，等待安装
• 安装成功后会在云函数目录下多出一个目录“node_modules”
• 此时再重新打开本地调试，则会显示如下：
  
  此时本地调试就已经开启了，但是云函数还没有被调用，这里调用云函数有两种方式，第一种是默认的模拟器触发：就是直接在代码中调用云函数，则会直接调用本地的进行测试。第二种就是手动触发，操作如下：
• 请求方式选择手动触发
• 点击下方的“调用”按钮
• 观察中间的console窗口，会提示函数触发执行的日志，则执行成功！

4. 上传并部署

当我们新建云函数的时候，工具就会自动同步本地云函数到线上。
可以在云函数里的index.js中编写逻辑代码，编写完后需要更新部署到线上，则右键选择“上传并部署，云端安装依赖”。这样，云函数就部署到线上了。

5. 云数据库

	微信云开发提供的JSON 数据库很简单，这里直接引用官方原话
1

数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。
关系型数据库和 JSON 数据库的概念对应关系如下表：

如下图：我们点击“+”号，在当前环境新建一张表“goods”

下面列表中会显示已经建好的表，我们选中刚刚新增的“goods”，点击新增记录，如下图：

弹出的页面如下，文档id就是记录的主键，我们用系统默认的不需要修改。

点击下边的“+”号，第一个字段我们输入name，值为“小米手机”；继续点击下面的“+”号，追加字段：value，值为2999。点击确定。

一条记录就添加好了，结果如下：

同学们可能发现，我从创建表名到添加记录，中间并没有设计表结构的过程，而是通过添加记录直接生成了表数据，这时有同学可能会想，如果我再添加一条结构不一样的记录会怎样？马上试试：

这次我添加了三个字段的记录，也添加成功了，说明小程序云开发json数据库并不强制要求每条记录的数据结构一致。

	在小程序端拉取云数据库数据，js代码如下：
1

//初始化云函数的sdk，这里需要填写你的环境ID，可以在环境设置里看到环境ID
wx.cloud.init({env:'这里填环境ID'})

const db = wx.cloud.database()//这里还没有拉取数据
const watcher = db.collection('goods')
const promise = watcher.get();//这里异步获取数据
promise.then(res=>{
  console.log(res)
});
  
1
2
3
4
5
6
7
8
9
10

执行结果如下：

6. 云函数调用

现在我们修改一下之前的云函数，使其能够获取我们刚刚新建的数据库记录

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 1. 获取数据库引用
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  // get 方法会触发网络请求，往数据库取数据, 返回promise对象
  const promise = db.collection('goods').get()
  // 必须等待请求返回后才return
  return promise.then(res=>{
    return res
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

本地调试一下，成功会返回如下信息

接下来我们编写小程序端调用的代码：
1

在util目录下新建一个cloudFS.js，专门用来调用云函数，代码如下：

//初始化云函数的sdk，这里需要填写你的环境ID，可以在环境设置里看到环境ID
wx.cloud.init({env:'这里填环境ID'})

const test=()=>{
  wx.cloud.callFunction({
    name: 'newTest'
  }).then(res=>{console.log(res)})
}

module.exports = {
  test:test,
}
1
2
3
4
5
6
7
8
9
10
11
12

在页面js中调用这个方法：

var util = require('../../utils/cloudFS.js')
Page({
  test:function(){
    util.test()
  },
})
1
2
3
4
5
6

wxml的代码：

<view ><button style="margin:100rpx;" type="primary" bindtap="test">测试</button></view>
1

点击“测试”按钮即可调用云函数，控制台打印结果如下：

提示：云函数更新后记得重新上传部署到服务端哦
1