环境

• 微信开发者工具 Stable 1.06.2303220
• 云开发控制台 v1.5.47

概述

云函数即在云端（服务器端）运行的函数，代码运行在云端Node.js中。我们可以使用云函数SDK中提供的数据库和存储API进行数据库和存储的操作。

云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的 openid，开发者无需校验 openid 的正确性因为微信已经完成了这部分鉴权，开发者可以直接使用该 openid。

准备

在微信开发者工具中，创建一个新项目 miniprogram-9 ，输入AppID，并选择“微信云开发”。

示例

示例1：Helloworld

右键单击 cloudfunctions ，选择“新建Node.js云函数”：

命名为“helloworld”，并回车，系统自动创建 helloworld 文件夹，以及 config.js 、 index.js 、 package.json 三个文件。

打开 index.js 文件，编辑如下：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return 'Hello world!'
}

右键单击 index.js ，选择“云函数增量上传：更新文件”。

注意：云函数是在后台工作的，所以每次修改完云函数，别忘了要上传一下，否则修改不起作用。

打开“miniprogram -> pages -> index -> index.wxml”，把内容全部清空，并添加如下内容：

<button type="primary" bindtap="getHelloworld">Hi</button>
<view>{{dataObj}}</view>

打开“miniprogram -> pages -> index -> index.js”，添加/修改如下内容：

  data: {
    dataObj: ""
  },

  getHelloworld() {
    wx.cloud.callFunction({
      name: 'helloworld'
    })
    .then(res => {
      console.log(res)
      this.setData({
        dataObj: res.result
      })
    })
  },

测试效果如下，当点击查询按钮时，就会显示“Hello world!”：

示例2：操作数据库

添加云函数 getData ，修改其 index.js 如下：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境

const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  return await db.collection('table0508').get()
}

编辑完后别忘了上传云函数。

修改 index.wxml 文件如下：

<button type="primary" bindtap="getData">查询</button>

<view wx:for="{{dataObj}}" wx:key="index">
  <view>{{index + 1}}：</view>
  <view>姓名：{{item.name}}</view>
  <view>性别：{{item.sex}}</view>
  <view>年龄：{{item.age}}</view>
  <view>功夫：{{item.kongfu}}</view>
  <text>\n\n</text>
</view>

修改页面的 index.js 文件内容如下：

......
  data: {
    dataObj: ""
  },

  getData() {
    wx.showLoading({
      title: '加载中……',
      mask: true
    })
    wx.cloud.callFunction({
      name: 'getData',
    })
    .then(res => {
      console.log(res.result.data)
      this.setData({
        dataObj: res.result.data
      })
      wx.hideLoading()
    })
  },
......

测试效果如下，当点击“查询”按钮时，就会从后台获取数据：

示例3：触底加载新数据

如果数据量较大，则没必要一次性取回所有数据，可以考虑逐步获取数据。设计思路是：首先在页面加载时（ onLoad ），从后台取回一部分数据（比如第1到3条），然后当页面到达底部时（ onReachBottom），从后台再取回一部分数据（比如第4到6条），以此类推。

添加云函数 getLimitedData ，修改其 index.js 如下：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境

const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  var limitNum = event.limitNum
  var skipNum = event.skipNum

  return await db.collection('table0508').limit(limitNum).skip(skipNum).get()
}

修改 index.wxml 如下：

<view wx:for="{{dataObj}}" wx:key="index" style="font-size:30px">
  <view>{{index + 1}}：</view>
  <view>姓名：{{item.name}}</view>
  <view>性别：{{item.sex}}</view>
  <view>年龄：{{item.age}}</view>
  <view>功夫：{{item.kongfu}}</view>
  <text>\n\n</text>
</view>

注：这里特意把字体设置的较大，以便3条记录就超过一屏（否则无法触发 onReachBottom 事件）。

修改页面的 index.js 文件内容如下：

......
  data: {
    dataObj: [] // 设置为数组，方便追加
  },
  
  getLimitedData(limitNum, skipNum) {
    wx.showLoading({
      title: '加载中……',
      mask: true
    })
    wx.cloud.callFunction({
      name: 'getLimitedData',
      data: {
        limitNum: limitNum,
        skipNum: skipNum
      }
    })
    .then(res => {
      var oldData = this.data.dataObj
      var newData = oldData.concat(res.result.data)

      console.log(res.result.data)
      this.setData({
        dataObj: newData
      })

      wx.hideLoading()
    })
  },

  onLoad: function (options) {
    this.getLimitedData(3, 0)
  },

  onReachBottom: function () {
    var skipNum = this.data.dataObj.length
    this.getLimitedData(3, skipNum)
  },

测试效果如下，当页面加载后，初始时会显示3条记录：

当页面滚动到底部时，就会触发获取更多记录：

当页面再次滚动到底部时，就又会触发获取更多记录，以此类推。

参考

• https://www.bilibili.com/video/BV1MY411Y7Ak/?p=17&vd_source=2ec1bf89a54b0d3afd52d89760b0dd55
• https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions.html