집 > 기사 > 웹 프론트엔드 > WeChat 미니 프로그램에서 좋아요 기능을 구현하는 방법

WeChat 미니 프로그램에서 좋아요 기능을 구현하는 방법

亚连원래의: 2018-06-20 14:00:4314021검색

이 글에서는 주로 WeChat 애플릿 인터페이스 레이아웃, 이벤트 응답, 캐시 작업 등 관련 구현 기술을 포함하여 로컬 캐시를 기반으로 좋아요 기능을 구현하는 방법을 소개합니다.

이 글은 WeChat의 예 미니 프로그램은 로컬 캐시를 기반으로 like 기능을 구현합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

wxml에 작성

참고:

1. wx:if="{{condition}}" wx:else实现图标的切换效果；
2. 为图片绑定点击事件bindtap="toCollect"을 사용할 때 두 이미지 태그를 모두 바인딩해야 합니다!

<image wx:if="{{collection}}" src="/images/icon/pic1.png" bindtap="toCollect"></image>
<image wx:else src="/images/icon/pic2.png" bindtap="toCollect"></image>

js 작성 방법:

Page({
 data: {
 },
 onLoad: function(option) {
  // 获取接收到的id值
  var getId = option.id;
  // 让接收到的id值传递到data:{}里面
  this.setData({
   currentId: getId
  });
  // 读取所有的文章列表点赞缓存状态
  var cache = wx.getStorageSync(&#39;cache_key&#39;);
  // 如果缓存状态存在
  if (cache) {
   // 拿到所有缓存状态中的1个
   var currentCache = cache[getId];
   // 把拿到的缓存状态中的1个赋值给data中的collection，如果当前文章没有缓存状态，currentCache 的值就是 false，如果当前文章的缓存存在，那么 currentCache 就是有值的，有值的说明 currentCache 的值是 true
   this.setData({
    collection: currentCache
   })
  } else {
   // 如果所有的缓存状态都不存在 就让不存在的缓存存在
   var cache = {};
   // 既然所有的缓存都不存在，那么当前这个文章点赞的缓存也不存在，我们可以把当前这个文章点赞的缓存值设置为 false
   cache[getId] = false;
   // 把设置的当前文章点赞放在整体的缓存中
   wx.setStorageSync(&#39;cache_key&#39;,cache);
  }
 },
 // 点击图片的点赞事件 这里使用的是同步的方式
 toCollect: function(event) {
  // 获取所有的缓存
  var cache = wx.getStorageSync(&#39;cache_key&#39;);
  // 获取当前文章是否被点赞的缓存
  var currentCache = cache[this.data.currentId];
  // 取反，点赞的变成未点赞 未点赞的变成点赞
  currentCache = !currentCache;
  // 更新cache中的对应的1个的缓存值，使其等于当前取反的缓存值
  cache[this.data.currentId] = currentCache;
  // 重新设置缓存
  wx.setStorageSync(&#39;cache_key&#39;,cache);
  // 更新数据绑定,从而切换图片
  this.setData({
   // collection 默认的是 false
   collection: currentCache
  });
  // 交互反馈
  wx.showToast({
   title: currentCache?&#39;点赞&#39;:&#39;取消&#39;,
   icon: &#39;success&#39;,
   duration: 2000
  });
 }
})

js의 작업 피드백 - wx.showModal 작성 방법:

// 点击图片的点赞事件 这里使用的是同步的方式
toCollect: function(event) {
  // 获取缓存，得到当前文章是否被点赞
  var cache = wx.getStorageSync(&#39;cache_key&#39;);
  // 获取当前文章是否被点赞的缓存
  var currentCache = cache[this.data.currentId];
  // 取反，点赞的变成未点赞 未点赞的变成点赞
  currentCache = !currentCache;
  // 更新cache中的对应的1个的缓存值，使其等于当前取反的缓存值
  cache[this.data.currentId] = currentCache;
  // 调用 showModal方法
  this.showModal(cache,currentCache);
}，
showModal: function(cache,currentCache) {
 var that = this;
 wx.showModal({
  title: "点赞"
  content: currentCache?"要点赞吗？":"要取消赞吗？",
  showCancel: "true",
  cancelText: "取消",
  cancelColor: "#666",
  confirmText: "确定",
  confirmColor: "#222",
  success: function(res) {
   if (res.confirm) {
    // 重新设置缓存
    wx.setStorageSync(&#39;cache_key&#39;,cache);
    // 更新数据绑定,从而切换图片
    that.setData({
     collection: currentCache
    })
   }
  }
 })
}

위 내용은 앞으로 모든 분들을 위해 정리한 내용입니다.

WeChat 미니 프로그램에서 좋아요 기능을 구현하는 방법

관련 기사