微信小程序云开发(3)— 云函数_DanownWang的博客-程序员ITS203_云开发云函数

技术标签: 微信小程序  小程序  

云函数基础介绍

一般选择云开发,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
          })
        })
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Danown/article/details/120615156

智能推荐

Java 泛型 ? T ; extends super_Javvi的博客-程序员ITS203_?t extends super

泛型:主要是运用参数化类型实现了代码复用,在创建对象时再指定持有的某一类型,并对代码进行编译期检查,有效减少coder负担,和C++的那种膨胀式(每有一个泛型就产生一个新的类)不同,Java采用了擦除法,通过在编译期加上强制类型转换,并将编译后的类型变为Object来实现泛型。?和T区别:?代表通配,而T代表某一个固定的类型,再使用T之前,需要提前声明(泛型类要在类名之后声明,泛型方法要在返回...

AMiner必读论文推荐#基于图的深度学习#_AMiner学术搜索和科技情报挖掘的博客-程序员ITS203

论文集地址:https://www.aminer.cn/topic/6114937a92c7f9be21454344近年来,人们对深度学习方法在图上的扩展越来越感兴趣。在多方因素的成功推动下,研究人员借鉴了卷积网络、循环网络和深度自动编码器的思想,定义和设计了用于处理图数据的神经网络结构,由此一个新的研究热点——“图神经网络”应运而生。注册AMiner,让AI帮你理解科学:https://www.aminer.cn/...

MySql中explain的时候出现using filesort,优化之_imzoer的博客-程序员ITS203

在使用order by关键字的时候,如果待排序的内容不能由所使用的索引直接完成排序的话,那么mysql有可能就要进行文件排序。【这个 filesort 并不是说通过磁盘文件进行排序,而只是告诉我们进行了一个排序操作而已】。当然,using filesort不一定引起mysql的性能问题。但是如果查询次数非常多,那么每次在mysql中进行排序,还是会有影响的。此时,可以进行的优化:1

处理 MQL5“EA 交易”的 GSM 调制解调器_ABCDLEE的博客-程序员ITS203_mql5 两个ea 通讯

简介当前,有相当数量的方式可以对交易账户进行轻松的远程监视:移动终端、推送通知、ICQ 。但都需要互联网连接。本文描述了“EA 交易”的创建程序,即使在移动互联网不可用的情况下,其也允许您通过电话或短信与交易终端保持联系。此外,在与交易服务器失去连接或重新建立连接时,该“EA 交易”将能够通知您。几乎任何 GSM 调制解调器,以及带调制解调器功能的大多数手机均可实现该目标。例如,我选择Huawei E1550,该调制解调器是同类产品中应用范围最广的产品之一。此外,在本文结尾处,我们将尝试用旧款手机.

Volley框架 xUtils 框架_离人泪--FENG的博客-程序员ITS203_volleyutils.getdevicecodeutils

代码中用到的是POST方法,写了一个匿名内部类,复写了一个protected Mappublic class VolleyActivity extends Activity implements View.OnClickListener { private Button mButtonVolley; private Button mButtonImage; privat

linux服务器因磁盘空间满导致oracle数据库无法连接问题探索_豆趣编程的博客-程序员ITS203

记录一下程序连不上库问题解决过程:此前没接触过linux,所以过程比较繁琐首先我部署在linux服务器上的项目莫名其妙连不上oracle库了,用plsql连接报这个:然后我就上putty,ssh连接服务器,sqlplus登录库时报这个:ORA-01034 - Oracle not availableORA-27101 - shared memory realm does n...

随便推点

centos7设置EPEL源、docker-ce-stable源、kubernetes源、ceph源_Locutus的博客-程序员ITS203_centos 配置更新 ceph源

国内镜像源有很多,阿里云的不错,选择一个好的镜像源加快Centos7系统的更新升级或者安装软件的速度吧!以下方法来自网络,亲测有效。 备份原来的yum源# cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 设置aliyun的yum源# wget -O /etc/yum.rep...

arduino烧录_Arduino 安装教程_weixin_39540271的博客-程序员ITS203

简明:Arduino是一款便捷灵活、方便上手的开源电子原型平台。包含硬件(各种型号的Arduino板)和软件(ArduinoIDE)。由一个欧洲开发团队于2005年冬季开发。其成员包括Massimo Banzi、David Cuartielles、Tom Igoe、Gianluca Martino、David Mellis和Nicholas Zambetti等。它构建于开放原始码si...

python分位数回归模型_如何理解分位数回归风险价值 (VaR) 模型?_weixin_39820437的博客-程序员ITS203

风险价值(下称VaR)的计算方法主要有历史模拟法(非参数法)、分析方法、蒙特-卡罗模拟法三类。不同的计算方法、计算参数下所得的VaR都是不同的。若某机构宣称其产品的VaR较低即投资风险较低,投资者还需在投前明确其计算方法和参数以辨真伪。历史模拟法来在收益率分布尾部较厚时比传统参数法更为可靠。下面介绍几个历史模拟法的变形。简单历史模拟法:历史模拟法的基本思想是用给定历史时间段上所观测到的市场因子的变...

NoSQL数据库介绍(7)_damipingzi的博客-程序员ITS203

7 总结     本文的目的是提供一个全面的NoSQL数据库潮流的概述和介绍,其于最近几年出现,为占优势地位的RDBMS提供了替代品。第2章讨论了开发和使用非关系型数据库系统的原因、理由和动机。这可以概括为高扩展性的需要,海量数据处理,在众多(通常是商品)服务器之间分布数据的能力,继而产生DBMS的面向分布式的设计(而不是在上层增加分布式能力),以及与编程语言和其数据结构的平滑整合

H5第二次博客(其实是我的课堂笔记)_DxzLLL的博客-程序员ITS203

H5第二次博客DOM中获取元素节点常用的几种方式// 通过ID获取元素节点document.getElementById('own');// 通过标签名document.getElementsByTagName('div');// 通过name属性来获取元素,结果是类数组(获取多个标签)document.getElementsByName("name属性");// 通过class获取元素,结果是类数组(获取多个标签)document.getElementsByClassName("cla

推荐文章

热门文章

相关标签