小程序云开发教程如何使用云函数实现点赞功能


Posted in Javascript onMay 18, 2019

本文我们就要使用高大上的云函数了,实现点赞功能

什么是云函数?

云函数 云函数即在云端(服务器端)运行的函数。 在物理设计上,一个云函数可由多个文件组成,占用一定量的CPU 内存等计算资源;各云函数完全独立;可分别部署在不同的地区。 … 当云函数被小程序端调用时,定义的代码会被放在Node.js 运行环境中执行。

新建的项目中其实有云函数的示例可以参考。

首先,我们在cloudfunctions 文件夹右键,新建一个nodeJs云函数, 然后命名为vote, 点击回车,等一会它会弹窗,告诉我们要安装云函数的环境, 但前提是你已经安装了node环境和npm。

小程序云开发教程如何使用云函数实现点赞功能

安装node可以直接去node的官方网站,下载一个msi文件,一路安装就可以了。
安装完node之后,其实默认是安装了npm的.
点击确定,等会它安装完成后,我们点击关闭命令行的窗口。

接下来, 在index.js里面添加:

vote: function(e){
 var arr = this.data.voteArr;
 var id = Number(e.currentTarget.dataset.index),
 D = this.data.datas;
 console.log(id)
 if (arr.indexOf(D[id].id) != -1){
 D[id].vote -= 1;
 arr.splice(arr.indexOf(D[id].id), 1)
 this.setData({
 datas: D,
 voteArr: arr
 })
 }else{
 arr.push(D[id].id)
 this.setData({
 voteArr: arr
 })
 if (id || id == 0) {
 D[id].zanUrl = this.data.zanIcon1
 D[id].vote = Number(D[id].vote) + 1
 }

 let data = {
 vote: Number(D[id].vote) + 1,
 id: D[id].id,
 userId: wx.getStorageSync('userId'),
 }
 console.log(data)

 wx.cloud.callFunction({
 name: 'vote',
 //点赞需要的参数:
 // 点赞数 +1
 // 该条的id
 data: { 
  vote: Number(D[id].vote) + 1,
  id: D[id].id,  
 },
 success: res => {
  wx.showToast({
  title: '点赞成功',
  })
  this.setData({
  datas: D
  })

 },
 fail: err => {
  wx.showToast({
  icon: 'none',
  title: '点赞失败',
  })
  console.error('[云函数] 调用失败:', err)
 }
 })
 }
 
 
 },

再接下来,我们编写云函数vote下面的index.js:

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


// 云函数入口函数
exports.main = async (event, context) => { 
//取得传过来的参数, 可以使用{vote,id } = event 更简洁
 var vote = event.vote, id = event.id;
 console.log('云函数zan成功', vote, id)

 // console.warn(data)

 try {
 return await db.collection('funnys').where({
 id: Number(id)
 }).update({
 data: {
 vote: vote
 },
 success: res => {
 console.log('云函数成功', vote, id)
 
 },
 fail: e => {
 console.error(e)
 }
 })
 } catch (e) {
 console.error(e)
 }

}

编写好后,我们右键vote文件夹, 点击上传云函数,上传完成后就可以测试了。

点击赞, 我们发现图片会变成黄色的赞icon了,这个是通过this.setData 替换的, 没有使用后台的数据库。
之后, 会调用到云函数vote, 如果成功, 会有一个toast显示,点赞成功;如果失败, 控制台也会提示相关的错误。

那么,到此为止,点赞功能就基本完成了, 请看:详细代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
Vuex实现购物车小功能
Aug 17 Javascript
React实现轮播效果
Aug 25 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 #Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 #Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 #Javascript
小程序云开发之用户注册登录
May 18 #Javascript
小程序云开发实现数据库异步操作同步化
May 18 #Javascript
微信小程序云开发之数据库操作
May 18 #Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 #Javascript
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
js实现简单扫雷
2020/11/27 Javascript
python使用webbrowser浏览指定url的方法
2015/04/04 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
python实现ID3决策树算法
2017/12/20 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python如何统计代码运行的时长
2019/07/24 Python
pandas数据处理进阶详解
2019/10/11 Python
python爬虫之遍历单个域名
2019/11/20 Python
Django 解决由save方法引发的错误
2020/05/21 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
工厂保安员岗位职责
2014/01/31 职场文书
节约粮食标语
2014/06/18 职场文书
销售员试用期自我评价
2014/09/15 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
社团招新宣传语
2015/07/13 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript