小程序学习笔记 使用缓存

Posted by fsoooo Blog on April 10, 2018

微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。对于开发者而言,小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换。小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中,通过公众号关联,用户可以实现公众号与小程序之间相互跳转。 image.png

以前,用户需要下载、安装才可以使用App,安装时还会考虑App占用多大存储空间、那些程序应该卸载掉以释放空间。微信小程序则无需安装,直接使用,不占用存储空间,并在使用微信小程序后,用完即走。例如,我们去餐馆点菜,并不需要去下载这个餐馆的应用程序,只需要在餐馆扫一下二维码,即可在小程序里点菜,之后并不需要去卸载应用程序,直接关闭小程序即可。 1.JPEG

微信小程序看起来是程序,但它以完全不同于App的状态出现,具有更灵活的应用组织形态。

微信小程序提供的功能如下:

1、分享页功能。用户可以将小程序的当前页面分享给好友,如分享北京到上海火车票表界面,用户打开时是这个页面的实时数据,而不需要再次启动微信小程序。

2、分享对话功能。用户可以将对话分享给好友或者微信群。

3、线下扫码进入微信小程序功能。该功能提示用户附近有那些微信小程序可以使用,扫描二维码就可以使用微信小程序。

4、挂起状态功能。例如,来电话可以先接电话,接完电话后可以继续使用微信小程序进行相关操作。

5、消息通知功能。商户可以发送消息给接受服务的用户,用户同时可以使用微信小程序的客服功能联系商户。

小程序优势: 使用成本低。无需安装和更新,即搜即用。 技术门槛低。底层技术类似于HMTL+JS+CSS,对于程序猿而言,前端技术属于入门级别的技术,能够迅速上手。 开发成本低。相对于现行APP开发和维护成本居高不下,使用小程序无疑将大大缩短开发周期和节约人力成本。 跨平台。一套程序适用于Android、IOS、WP三大手机平台。 特别适用于MVP试错、快速验证产品模式。能够快速验证一个idea的可行性。 小程序凭借微信巨大的用户基数,可以获得流量红利,降低转化成本。 直接对接微信的账号体系,用户不需要注册登录即可体验小程序。

小程序劣势: 小程序的性能和流畅度远不及原生App。 框架封闭性强,不支持开发新的组件。 开发工具不方便,无法进行版本管理。 不能调起外部App,不能在手机浏览器内运行。 支付组件只支持腾讯体系支付,无法接入支付宝和银联。 与苹果公司存在利益冲突。

最近由于业务需要,我开始学习小程序。

file.png

下面是我的学习笔记(一)

微信小程序console打印json数据

微信小程序中如果 res.data数据是一个json格式数据。

console.log("===data===" + res.data);//如果这样打印出了是只会打印一个对象名称,不会打印数据

使用下面方法就可以实现了打印json格式数据出来了。

console.log("===data===" + JSON.stringify(res.data));

微信小程序使用本地缓存localStorage

每个微信小程序都可以有自己的本地缓存,可以通过同步和异步的方法对本地缓存进行设置、获取和清理。

同一个微信用户,同一个小程序 storage 上限为 10MB。

localStorage 以用户维度隔离,同一台设备上,A 用户无法读取到 B 用户的数据。

异步请求方法:(存,取,移除,清理)

wx.setStorageSync(key,value)

wx.getStorageSync(key)

wx.removeStoragesync(key)

wx.clearStorageSync()

Page({
  data: {
    testnum:""//设置测试参数
  },
  onLoad:function(option){
    var num = wx.getStorageSync('testNum');//wx.getStorageSync(key),获取本地缓存
    this.setData({
      testnum:testnum
    })
  }
})
同步请求方法:(存,取,移除,清理)

wx.setStorage(key,value)

wx.getStorage(key)

wx.removeStorage(key)

wx.clearStorage()

Page({
  data: {
    testnum:""//设置测试参数
  },
  test:function(){
    var Num = this.data.testnum;
    wx.setStorage({//存储到本地
      key:"testNum",
      data:Num
    })
  },
  onLoad:function(option){
    var that = this,
    wx.getStorage({//获取本地缓存
      key:"testNum",
      success:function(res){
        that.setData({
          testnum:res.data
        });
      },
    })
  }
})

storage有些小细节需注意:

1.localstorage,无时效性,除非手动清理,不然一直都在。

2.大量使用会造成储存空间不足,微信会清空最近最久未使用的小程序的本地缓存。

3.微信中的「发现」-「小程序」,长按不想要的小程序,然后点击「删除」按钮,这样删除才能彻底清理掉缓存删掉小程序。直接在页面顶部移除小程序,缓存没被清理掉。