云开发（微信-小程序）笔记（十四）---- 收藏，点赞（上）

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

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.效果图（视频）

点赞，收藏效果图

微信小程序-点赞收藏

云开发（微信-小程序）笔记（十五）---- 收藏，点赞（下）

感谢大家，点赞，收藏，关注，评论！