微信小程序云开发（3）— 云函数

云函数基础介绍

一般选择云开发，project.config.json 文件中已经配置好了云开发的本地根目录

{
   "cloudfunctionRoot": "cloudfunctions/"
}

假设我们在云函数目录里已经创建了一个getData文件夹
cloudfunctions/getData/index.js

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

cloud.init()
const db = cloud.database()  //初始化

// 云函数入口函数
exports.main = async (event, context) => {
   return await db.collection("demolist").get()    //等待异步请求进行返回
}

在demo里的js里的onLoad进行调用
miniprogram\pages\demo4\demo4.js

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        wx.cloud.callFunction({   //寻找云函数的函数
            //云函数名称
            name:"getData"
        })
        .then(res=>{
            console.log(res)
        })     
    },

注意：在小程序中调用云函数前，我们还需要先将该云函数部署到云端。在云函数目录上右键，在右键菜单中，我们可以将云函数整体打包上传并部署到线上环境中。

传递数据给云函数

云函数的传入参数有两个，一个是 event 对象，一个是 context 对象
event：指的是触发云函数的事件，当小程序端调用云函数时，event 就是小程序端调用云函数时传入的参数，外加后端自动注入的小程序用户的 openid 和小程序的 appid。
context：context 对象包含了此处调用的调用信息和运行状态，可以用它来了解服务运行的情况。
eg：下面代码的意思是，获取num个数据
在miniprogram\pages\demo4\demo4.js文件中

        wx.cloud.callFunction({   //寻找云函数的函数
            //云函数名称
            name:"getData",
            //传给云函数的参数
            data:{
                num:1
            }
        })

在cloudfunctions/getData/index.js文件中

// 云函数入口函数
exports.main = async (event, context) => {         //event接受前端参数
   var num = event.num
   return await db.collection("demolist").limit(num).get()    //await 等待异步请求进行返回
}

案例：触底加载新数据

在cloudfunctions/getData/index.js文件中

    data: {
        dataList:[]  //若提示没初始化，则加上这个
    },

// 云函数入口函数
exports.main = async (event, context) => {
    var num = event.num;
    var page = event.page;
   return await db.collection("demolist").skip(page).limit(num).get()
}

在miniprogram\pages\demo5\demo5.js文件中

    getData(num=5,page=0){
        wx.cloud.callFunction({
            name:"demoGetList",
            data:{
                num:num,
                page:page
            }       //请求云函数
        })   
        .then(res=>{
            //console.log(res.result.data)  result是一个集合，我们需要里面的data
            // var oldData = this.data.dataList
            // var newData = oldData.concat(res.result.data);
            this.setData({
                dataList:(this.data.dataList).concat(res.result.data) 
                //dataList:newData
            })
        })
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        var page = this.data.dataList.length      
        this.getData(5,page)
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.getData()
    },

案例：获取实时阅读次数

在view里添加bindtap=“clickRow"点击事件
1、获取点击的id，必要时候也要获取点击的索引值data-idx=”{{item.index}}"
因为要让系统知道点击的对象是谁，所以添加data-id="{{item._id}}

<view bindtap="clickRow" data-id="{{item._id}}" data-idx="{{item.index}}"
      class="row" 
      wx:for="{{dataList}}" wx:key="index">
  <view class="title">{{index+1}}、{{item.title}}</view>
  <view>阅读量：{{item.hist}}</view>
</view>

console.log(res)后，数据在currentTarget里的dataset
获取点击的id和索引值

    clickRow(res){
        var {id,idx} = res.currentTarget.dataset
    },

2、云函数进行更新操作

// 云函数入口函数
exports.main = async (event, context) => {
    db.collection("demolist").update({
        data:{
            hist:_.inc(1)  //设置自增
        }
    })
}

如果不筛选条件的话，所有数据都会更新，所以添加筛选条件doc(id)

3、前端连后端，将数据传输给后端，后端再返回数据
前端接收id

    clickRow(res){
        var {id,idx} = res.currentTarget.dataset
        //console.log(res)
        wx.cloud.callFunction({
            name:"demoUpList",
            data:{       
                id:id    //这里的id是上面我们接受到的id
            }
        })
        .then(res=>{
            console.log(res)
        })
    },

将数据传给后端

// 云函数入口函数
exports.main = async (event, context) => {
    var id = event.id;
    db.collection("demolist").doc(id).update({  //筛选条件，doc(id)
        data:{                                  //doc可以根据id更改某一条
            hist:_.inc(1)  //设置自增
        }
    })
}

4、重新渲染列表数据

        .then(res=>{
          //console.log(res)
          var newData = this.data.dataList;
          newData[idx].hist += 1; 
          this.setData({
              dataList:newData
          })
        })