云开发(微信-小程序)笔记(十四)---- 收藏,点赞(上)

云开发(微信-小程序)笔记(十三)---- 注册登陆

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.效果图(视频)

点赞,收藏效果图

微信小程序-点赞收藏

云开发(微信-小程序)笔记(十五)---- 收藏,点赞(下)

在这里插入图片描述

感谢大家,点赞,收藏,关注,评论!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cat God 007

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值