云开发（微信-小程序）笔记（十四）---- 收藏，点赞（上）
云开发（微信-小程序）笔记（十三）---- 注册登陆
1.简介
点赞，收藏等都是程序的最简单的功能，在现实的应用中也很常见。这里我就来给大家介绍一下小程序的这个功能。
图标下载地址
先去网站上https://www.iconfont.cn，下载收藏图标（已收藏图，未收藏图）
先去网站上https://www.iconfont.cn，下载点赞图标（已点赞图，未点赞图）
2.收藏图标
2-1.在app.json页面添加图标页面
"pages": ["pages/tubiao/tubiao",
2-2.编写tubiao.js文件
// pages/tubiao/tubiao.js
let chang = false
Page({data: {shouchangUrl: "../../imgs/chang-no.png "},//收藏clickMe1(){if (chang){//未收藏this.setData({shouchangUrl: "../../imgs/chang-no.png"})chang = false}else{//已收藏this.setData({shouchangUrl:"../../imgs/chang-yes.png"})chang = true}},
2-3.编写tubiao.wxml文件
<!--pages/tubiao/tubiao.wxml-->
<text>pages/tubiao/tubiao.wxml</text>
<view>
<image class = "image" src = "{{shouchangUrl}}" bindtap="clickMe1"></image>
</view>
2-4.编写tubiao.wxss文件
/* pages/tubiao/tubiao.wxss */
.image{width: 120rpx;height: 120rpx;
}
2-5.效果图（视频）
收藏效果
收藏
3.点赞图标
3-1.编写tubiao.js文件
let zan = false
Page({data: {dianzanUrl: "../../imgs/zan-no.png",},//点赞clickMe2(){if (zan){//未点赞this.setData({dianzanUrl: "../../imgs/zan-no.png"})zan = false}else{//已点赞this.setData({dianzanUrl:"../../imgs/zan-yes.png"})zan = true}},})
3-2.编写tubiao.wxml文件
<!--pages/tubiao/tubiao.wxml-->
<view>
<image class = "image" src = "{{dianzanUrl}}" bindtap="clickMe2"></image>
</view>
3-3.编写tubiao.wxss文件
.image{width: 120rpx;height: 120rpx;
}
3-4.效果图（视频）
点赞效果
微信小程序-点赞
4.功能（代码）优化
运用三目运算符实现代码的优化
4-1.优化tubiao.js文件
// pages/tubiao/tubiao.js
let chang = false
let zan = false
Page({data: {shouchangUrl: "../../imgs/chang-no.png ",dianzanUrl: "../../imgs/zan-no.png",},//收藏（三目运算符）clickMe1(){this.setData({shouchangUrl:chang?"../../imgs/chang-no.png":"../../imgs/chang-yes.png"})chang = !chang //取反（收藏与未收藏之间的切换）},//收藏（三目运算符）clickMe2(){this.setData({dianzanUrl:zan?"../../imgs/zan-no.png":"../../imgs/zan-yes.png"})zan = !zan //取反（点赞与未点赞之间的切换）},
})
4-2.优化tubiao.wxml文件
<!--pages/tubiao/tubiao.wxml-->
<view>
<image class = "image" src = "{{shouchangUrl}}" bindtap="clickMe1"></image>
<image class = "image" src = "{{dianzanUrl}}" bindtap="clickMe2"></image>
</view>
4-3.优化tubiao.wxss文件
/* pages/tubiao/tubiao.wxss */
.image{width: 120rpx;height: 120rpx;
}
4-4.效果图（视频）
点赞，收藏效果图
微信小程序-点赞收藏
云开发（微信-小程序）笔记（十五）---- 收藏，点赞（下）
感谢大家，点赞，收藏，关注，评论！
云开发（微信-小程序）笔记（十四）---- 收藏，点赞（上）相关推荐
- Free校园小程序 开源发布，一款集合表白墙、失物招领、兼职和闲置二手买卖的云开发微信小程序
前言 一个集合表白墙.失物招领.兼职和闲置二手买卖的云开发微信小程序 校园服务小程序 拥有 表白墙.失物招领.兼职.闲置物品等功能,无后台,云开发,只需要搭建云数据库即可 开源地址 GitHub开源地 ...
- 基于腾讯云开发微信小程序（新闻发布及共享平台）上
基于腾讯云开发微信小程序(新闻发布及共享平台)上 文章目录 传统的微信小程序开发 一.云开发是什么? 二.使用步骤 1.创建云环境 2.云数据库的创建 3.云储存 4.云函数 总结 传统的小程序开发 ...
- 使用牛刀云开发微信小程序（问题集锦）
前不久,起步科技正式推出牛刀云1.0,我想这也应该是许多WeX5的忠诚追随者(我也算是其中之一吧)期望的结果了.使用牛刀云开发微信小程序,能够实现使用类似于WeX5的所见即所得组件积木搭建方式构建前端 ...
- 云开发微信小程序聊天群
功能支持创建群,邀请群成员,群成员列表展示,图片发送,设置群公告,踢人,全体禁言,个人禁言,发送语音信息等 相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音 ...
- 月老办事处月云开发微信小程序源码
简介: 这是一套云开发的小程序源码,月老办事处月微信云开发小程序源码,云开发无需服务器与域名就能搭建. 网盘下载地址: http://kekewl.net/0tEowy2Kznz0 图片:
- 手把手教你如何结合腾讯云开发微信小程序
目前,微信小程序越来越流行,而且功能越来越强大,在性能方面也越做越好.因为能够原生调用小程序提供的组件和 API ,小程序的开发快捷,使用方便,越来越多的产品会落地到微信小程序上.但传统的微信小程序开 ...
- 微信小程序云开发-微信小程序账号申请及新手环境配置
申请一个微信小程序账号 在微信开发时,我们yx时候可能需要用到微信小程序,微信小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能,所以我们需要注册一个微信小程序账号.在注册账 ...
- uniapp 阿里云开发微信小程序一键登录
1.插件市场导入uni-id公用模块 插件市场 uni-id : https://ext.dcloud.net.cn/plugin?id=2116 导入成功后会在项目云文件夹下自动生成common目录 ...
- 微信小程序(第十四章) - 信息查询页面的实现
微信小程序(第十四章)- 信息查询页面的实现 前言 页面标题实现 信息框的实现 页面结构实现 页面样式实现 学生到校离校信息查询列表实现 页面结构实现 页面样式实现 正在加载实现 页面结构实现 页面样 ...
- 微信小程序+.NET(十四) 悦听小说小程序（待续）
微信小程序之第二版展示 悦听小说(YueTingBook) ==>2019.12.16 今天知道个人微信号无法使用web-view,直接影响该项目很多功能,该项目待商城项目完成后继续研究... ...
最新文章
- JVM GC参数以及GC算法的应用
- 如何改变cmd的编码格式？
- 基于JAVA+SpringMVC+Mybatis+MYSQL的会议室预约管理系统
- Win7系统解决JAVA或者APKtool不是内部或者外部命令
- kubeadm部署k8s1.9高可用集群--1集群概述
- 【麒麟操作系统】查看和关闭139、445端口的方法
- NSIS 封装软件工具封装的软件，安装后快捷方式没有图标显示问题
- matlab雷达噪声模型,雷达信号处理MATLAB仿真.doc
- Windows卓越性能概念以及如何打开
- 巨佬就是巨佬，乔布斯 1973 年求职申请表，拍出22万美元高价！
- 【君思智慧园区】产业园区合作运营模式，现代农业产业园的运营模式有哪些？
- ul阻燃标准有几个等级_塑料制品中的UL 阻燃等级防火等级划分标准
- 安装andriod studio的过程中遇到的问题
- java兔子繁殖总数_兔子繁殖问题即斐波那契数列的java实现
- 精确休息法——《万维钢.精英日课3》笔记
- 个人整理可编辑PDF值得一读的电子书大全（持续更新）
- 2020安徽省大学生程序设计大赛题解——E 收集圣物
- 安全帽识别软件能够解决现场管理诸多问题
- 如何windows中cmd命令行下怎么切换目录
- python实践3——利用爬虫爬取“广州各大行业微信群二维码信息”及存入数据到MySQL数据库