微信小程序之收藏的实现2020-05-16

微信小程序之收藏的实现

最近一直在忙着写开发文档和概要，终于闲下来了。
首先感谢下B站的编程小石头，我是看他视频做的并进一步完善改进。

想实现的效果：初始化为未收藏，点击收藏，再次点击取消收藏。
1.初始化状态，需要下page外let shoucang=false,记录图标的状态的标志。

wx.cloud.database().collection('shoucang').where({num: options.num,openid: wx.getStorageSync('openid')})//上一篇博客动态生成页面，根据用户点击拿到的图片参数.get({success(res) {if (res.data.length == 0) {that.setData({shoucang: false,src: "../../images/weishoucang.png"})//请求到的数据长度为0，就是没有收藏过} else if (res.data[0].ifshoucang) {that.setData({shoucang: true,src: "../../images/shoucang.png"})}console.log(that.data.shoucang)},fail(res) {console.log("请求失败", res)}})

2.点击的click函数

 click() {let that = this// console.log("shoucang="+this.data.shoucang)if (that.data.shoucang) {that.setData({shoucang: false,src: "../../images/weishoucang.png"})//假如为真，就要改变标志状态和显示的图片的状态。wx.cloud.callFunction({name: "change",data: {showname: this.data.showname,openid: this.data.openid,}})//调用改变状态的云函数，凡是涉及用户往数据库写数据，就需要用云函数，读不需要，但是如果读取数据量过大，就建议用云函数来读。wx.showModal({title: '提示',content: '取消收藏成功！',})} else {that.setData({shoucang: true,src: "../../images/shoucang.png"})const promiseArr = []let db = wx.cloud.database()Promise.all(promiseArr).then(res => {wx.cloud.callFunction({name: "shoucang",data: {//这里写你要往数据库收藏时候写的记录的字段},})wx.showModal({title: "提示！",content: '收藏成功！',})console.log("收藏成功");})}},

3.注：用到的某些变量记得初始化！然后云函数就不发了，有需要的可以私聊我wx:xyflxyf拿。
4.附：用户的openid的云函数获取。

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {return event.userInfo;
}

 getOpenid() {let that = this;wx.cloud.callFunction({name: 'getOpenid',complete: res => {// console.log('openid:', res.result.openId)var openid = res.result.openId;that.setData({openid: openid})wx.setStorageSync("openid", openid)}})},

写了很长时间，觉得有收获加个关注或者打赏下呗，
持续更新更多优质代码相关学习心得。谢谢。

微信小程序之收藏的实现2020-05-16相关推荐

微信小程序：收藏、客服、分享、加入购物车、图片放大预览
微信小程序:收藏.客服.分享.加入购物车.图片放大预览微信小程序包含功能 ·轮播 ·图片放大预览 ·收藏 ·客服 ·加入购物车在goods_detail下的index.wxml写页面代码 < ...
微信小程序开发收藏经验（一）
收集了一些小程序开发中常用到的知识点,记录一下.(请各位大佬指正,萌新一名) 导航栏标题与iOS开发很相似,小程序的导航栏也可以全局设置一下,在公共文件app.json中设置了导航栏相关样式如下: ...
微信小程序蓝牙BLE开发——写入一串16进制数据，低字节在前（五）
微信小程序BLE发送一串16进制数据,低字节在前文章目录微信小程序BLE发送一串16进制数据,低字节在前场景获取UTC时间写入数据向设备发送16进制数据字节转换验证发送UTC时间场景 ...
微信小程序Object(env: Windows,mp,1.05.2108130； lib: 2.14.1)
报错做的项目中有几个页面需要循环跳转,循环2-3次以后就会出现如下错误,报错信息只有一行object,难以看出究竟是什么错误. 寻找原因为了看出到底是什么错误,我修改了小程序开发的基础库,从2.1 ...
微信小程序实现收藏和取消收藏功能
话不多说,直接上代码 js data:{isFavorite: false, },//收藏 collect: function(options) {console.log(options)var th ...
云开发（微信-小程序）笔记（十四）---- 收藏，点赞（上）
云开发(微信-小程序)笔记(十三)---- 注册登陆 1.简介点赞,收藏等都是程序的最简单的功能,在现实的应用中也很常见.这里我就来给大家介绍一下小程序的这个功能. 图标下载地址先去网站上http ...
微信小程序：【应用评测】，最强小程序推荐、测评、收录入口
今天学士为大家分享:超实用小程序收录入口,可对小程序进行测评.应用推荐!这对于小程序开发者以及运营者来说可以算得上是提升曝光和点击的入口点,废话不多比比,下面介绍: " 应用评测 " ...
《微信小程序开发实战》学习笔记chapter1微信小程序人门
Chapter01 微信小程序入门 1. 微信小程序介绍 1.1 什么是微信小程序微信小程序是腾讯于2017年1月19日推出的一种不需要安装即可在微信平台上使用的应用.微信小程序和微信的原生功能应用 ...
android微信分享走小程序流程,教你怎么把微信小程序分享到朋友圈
教你怎么把微信小程序分享到朋友圈 2020年07月13日 | 萬仟网移动技术 | 我要评论 7月8日收到邀请,可将小程序页面分享到朋友圈.适用于内容型页面的分享,不适用于有较多交互的页面分享.该功能为 ...
基于微信小程序的智能推荐点餐系统
摘要在社会高速发展的过程中,计算机系统在社会生产的过程中大量应用,并且随着相关技术的高速发展,这一过程在不断加速.因此,将智能推荐点餐系统管理与当前的网络相结合,利用计算机构建以微信小程序为基础 ...

微信小程序之收藏的实现2020-05-16

微信小程序之收藏的实现

微信小程序之收藏的实现2020-05-16相关推荐

最新文章

热门文章