WeChat applet is based on local cache implementation of personal skills

This example describes how WeChat applets realize personal skills based on local cache implementation. Share to everyone for reference, specifically:


1. Use

wx: if = “{{condition}}” wx: Else implements the switching effect of icons; 2. Bind the event for the picture
bindtap = “Tocolect” , both image tags are bound to bind !

     JS in JS:   
Page ({DATA: {}, online: function (option) {// Get the received ID value var getId = option.id; // Let the received ID value to Data: {} this.SetData ({currentid: getId}); // Read all article list Pointspike Cache Status VAR Cache = wx.getStorageSync (‘cache_key’); // If the cache status exists if (cache) {// gets 1 var currentcache = cache [getId] in all cached status; / / 1 assignment in the cache status to the Collection in Data, if the current article There is no cache state, the value of currentcache is false, if the cache of the current article exists, then CurrentCache is worthless, the value of the value of currentcache is true this.s.Else {// If all cached status does not exist, there is no cache = {}; // Since all caches do not exist, then the current article is like The cache does not exist. We can set the cache value of this article to false cache [getId] = false; // Put the current article of the settings in the overall cache wx.setStorageSync (‘cache_key’, Cache);}}, // Click on the picture to use the synchronous way to use TOCOLLECT: FUNCTION (Event) {// Get all cache var cache = wx.getStorageSync (‘cache_key’); // Get the current Whether the article is praised by a cache = cache [this.data.currentid]; // Reverse, the point of praise is not a bit praised by a bit of praise CurrentCache; // Update Cache The corresponding 1 cache value is equal to the currently reversed caching value cache [this.data.currentid] = currentcache; // Reset Cache wx.setStorageSync (‘cache_key’, cache); // Update data tied Type, switch the picture this.SetData ({// collection default is false collection: currentcache}); // Interactive feedback wx.showtoast ({Title: currentcache? ‘点赞’: ‘Cancel’Icon: ‘Success’, Duration: 2000});}})

JS operation feedback – Wx.ShowModal Writing:

// Click on the image of the picture This is the way the synchronization method TOCOLLECT: FUNCTION (Event) {// Get the cache, get the current article is praised by VAR Cache = wx.getStorageSync (‘cache_key’); // Get the current article is a cache, VAR CurrentCache = Cache [this.data.currentid]; // Reverse, the thoughts changed to the unforgettable change Cultivation CurrentCache =! Currentcache; // Update 1 cache value in cache, etc., allowing it to equal the currently reversible cache value cache [this.data.currentid] = currentcache; // Call ShowModal Method this.showModal (cache, currentcache);}, showmodal: function (cache, currentcache) {var this = this; wx.showmodal ({Title: “Site” Content: CurrentCache? “Be praise?”: “To cancel it?” “, ShowCancel:” True “, CancelText:” Cancel “, CancelColor:” # 666 “, ConfirmText:” OK “, Confirmcolor:” # 222 “, Success: Function (Res) {if (res.confirm) {// Reset Cache wx.setStorageSync (‘cache_key’, cache); // Update data binding, to switch the picture try.SetData ({Collection: CurrentCache})}}})
It is hoped that this article will help the WeChat applet development.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment