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


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 相关文章推荐
javascript语句中的CDATA标签的意义
May 09 Javascript
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
谈谈node.js中的模块系统
Sep 01 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
php 可变函数使用小结
2018/06/12 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
JS常用函数使用指南
2014/11/23 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
Python中的__init__作用是什么
2020/06/09 Python
如何把python项目部署到linux服务器
2020/08/26 Python
利用python爬取有道词典的方法
2020/12/08 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
高一生物教学反思
2014/01/17 职场文书
二年级学生评语大全
2014/04/23 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
政风行风整改报告
2014/11/06 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
关于童年的读书笔记
2015/06/26 职场文书
大学同学聚会感言
2015/07/30 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电