小程序云開發(fā)教程如何使用云函數(shù)實(shí)現(xiàn)點(diǎn)贊功能
本文我們就要使用高大上的云函數(shù)了,實(shí)現(xiàn)點(diǎn)贊功能
什么是云函數(shù)?
云函數(shù) 云函數(shù)即在云端(服務(wù)器端)運(yùn)行的函數(shù)。 在物理設(shè)計(jì)上,一個(gè)云函數(shù)可由多個(gè)文件組成,占用一定量的CPU 內(nèi)存等計(jì)算資源;各云函數(shù)完全獨(dú)立;可分別部署在不同的地區(qū)。 … 當(dāng)云函數(shù)被小程序端調(diào)用時(shí),定義的代碼會(huì)被放在Node.js 運(yùn)行環(huán)境中執(zhí)行。
新建的項(xiàng)目中其實(shí)有云函數(shù)的示例可以參考。
首先,我們?cè)赾loudfunctions 文件夾右鍵,新建一個(gè)nodeJs云函數(shù), 然后命名為vote, 點(diǎn)擊回車,等一會(huì)它會(huì)彈窗,告訴我們要安裝云函數(shù)的環(huán)境, 但前提是你已經(jīng)安裝了node環(huán)境和npm。

安裝node可以直接去node的官方網(wǎng)站,下載一個(gè)msi文件,一路安裝就可以了。
安裝完node之后,其實(shí)默認(rèn)是安裝了npm的.
點(diǎn)擊確定,等會(huì)它安裝完成后,我們點(diǎn)擊關(guān)閉命令行的窗口。
接下來, 在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',
//點(diǎn)贊需要的參數(shù):
// 點(diǎn)贊數(shù) +1
// 該條的id
data: {
vote: Number(D[id].vote) + 1,
id: D[id].id,
},
success: res => {
wx.showToast({
title: '點(diǎn)贊成功',
})
this.setData({
datas: D
})
},
fail: err => {
wx.showToast({
icon: 'none',
title: '點(diǎn)贊失敗',
})
console.error('[云函數(shù)] 調(diào)用失?。?, err)
}
})
}
},
再接下來,我們編寫云函數(shù)vote下面的index.js:
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函數(shù)入口函數(shù)
exports.main = async (event, context) => {
//取得傳過來的參數(shù), 可以使用{vote,id } = event 更簡(jiǎn)潔
var vote = event.vote, id = event.id;
console.log('云函數(shù)zan成功', vote, id)
// console.warn(data)
try {
return await db.collection('funnys').where({
id: Number(id)
}).update({
data: {
vote: vote
},
success: res => {
console.log('云函數(shù)成功', vote, id)
},
fail: e => {
console.error(e)
}
})
} catch (e) {
console.error(e)
}
}
編寫好后,我們右鍵vote文件夾, 點(diǎn)擊上傳云函數(shù),上傳完成后就可以測(cè)試了。
點(diǎn)擊贊, 我們發(fā)現(xiàn)圖片會(huì)變成黃色的贊icon了,這個(gè)是通過this.setData 替換的, 沒有使用后臺(tái)的數(shù)據(jù)庫。
之后, 會(huì)調(diào)用到云函數(shù)vote, 如果成功, 會(huì)有一個(gè)toast顯示,點(diǎn)贊成功;如果失敗, 控制臺(tái)也會(huì)提示相關(guān)的錯(cuò)誤。
那么,到此為止,點(diǎn)贊功能就基本完成了, 請(qǐng)看:詳細(xì)代碼
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)點(diǎn)贊業(yè)務(wù)
- 微信小程序?qū)崿F(xiàn)點(diǎn)贊、取消點(diǎn)贊功能
- 小程序?qū)崿F(xiàn)列表點(diǎn)贊功能
- 微信小程序?qū)崿F(xiàn)列表頁的點(diǎn)贊和取消點(diǎn)贊功能
- 小程序點(diǎn)贊收藏功能的實(shí)現(xiàn)代碼示例
- 微信小程序項(xiàng)目總結(jié)之點(diǎn)贊 刪除列表 分享功能
- 微信小程序基于本地緩存實(shí)現(xiàn)點(diǎn)贊功能的方法
- 微信小程序小組件 基于Canvas實(shí)現(xiàn)直播點(diǎn)贊氣泡效果
- 小程序animate動(dòng)畫實(shí)現(xiàn)直播間點(diǎn)贊
相關(guān)文章
JS 實(shí)現(xiàn)請(qǐng)求調(diào)度器
這篇文章主要介紹了JS 實(shí)現(xiàn)請(qǐng)求調(diào)度器的方法,幫助大家更好的理解和學(xué)習(xí)使用js,感興趣的朋友可以了解下2021-03-03
JavaScript捕捉事件和阻止冒泡事件實(shí)例分析
這篇文章主要介紹了JavaScript捕捉事件和阻止冒泡事件,結(jié)合實(shí)例形式分析了冒泡的原理及javascript阻止冒泡的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
微信小程序全局變量GLOBALDATA的定義和調(diào)用過程解析
這篇文章主要介紹了微信小程序全局變量GLOBALDATA的定義和調(diào)用過程解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
js實(shí)現(xiàn)帶圓角的兩級(jí)導(dǎo)航菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)帶圓角的兩級(jí)導(dǎo)航菜單效果代碼,涉及javascript鼠標(biāo)事件及頁面元素樣式動(dòng)態(tài)變換技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
JavaScript二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單
這篇文章主要介紹了使用二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單,通過二維數(shù)組存儲(chǔ)城市列表項(xiàng),需要的朋友可以參考下2014-05-05

