微信小程序云开发(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
          })
        })
  • 0
    点赞
  • 7
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

DanownWang

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值