Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Like-Funktion im WeChat-Miniprogramm

So implementieren Sie die Like-Funktion im WeChat-Miniprogramm

亚连
亚连Original
2018-06-20 14:00:4314020Durchsuche

In diesem Artikel wird hauptsächlich die Methode des WeChat-Applets zur Implementierung der Like-Funktion basierend auf dem lokalen Cache vorgestellt, einschließlich verwandter Implementierungstechniken wie dem Layout der WeChat-Applet-Schnittstelle, der Ereignisantwort und dem Cache-Betrieb. Freunde in Not können sich darauf beziehen

Das Beispiel in diesem Artikel beschreibt, wie das WeChat-Applet die Like-Funktion basierend auf dem lokalen Cache implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Schreiben in wxml

Hinweis:

1 Symbole wechseln Wirkung; wx:if="{{condition}}" wx:else2. Binden Sie das Klickereignis an das Bild
, beide Bild-Tags müssen gebunden sein! 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>

Schreibmethode in 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
  });
 }
})

Operationsfeedback in js - Schreibmethode von 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
    })
   }
  }
 })
}

Ich habe es oben für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

JSON-Format in Excel-Tabelle konvertieren (ausführliche Anleitung)

So implementieren Sie das mobile Touch Wheel in js Play

Über Multithread-Laufzeitbibliothek (ausführliches Tutorial) in JavaScript

So fügen Sie Inhalte an einer bestimmten Position in JS ein

So implementieren Sie ein Singleton-Muster in JavaScript

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Like-Funktion im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn