Uniapp (app端) 缓存、加载、刷新机制

一、缓存机制

1、为什么要加缓存？

场景一：【等待】，在向服务器请求新的数据时。我们让用户看到什么？第一种是漂亮的等待加载页面；第二种是缓存的内容。对于第二种，用户可以对页面进行操作，等待新数据时可以查看旧数据，更具有“可操作性”与“可用性”，从而减轻了从服务器获取数据这一动作的大小和时间长短，增强了用户体验。另一方面，如果内容更新的间隔较长或者用户刷新的间隔较短，在没有缓存的情况下，很多数据我们会多次重复的向服务器获取，增加了成本。

场景二：【结果】没有联网，或者在地铁上网络太差无法加载数据时，如果留给用户一个空白页面，实在是感觉有点不负责任啊。并且很多功能在没有联网的情况下也有使用的可能性，比如：APP中的通讯录，查看一些聊天记录，通知信息，文章列表等。因为用户打开APP不一定是要看新信息，说不定是回顾老信息（或许老信息里也有用户之前没看的），所以恰当的缓存可以满足更多的用户场景。

场景三：【金钱】有一天，一个用户发现自己装了某个APP后流量用的特别快，Ta可能永远将这个APP打入冷宫了，而增加缓存正是节省流量的一个方法。虽然节省的不多或者用户也察觉不到，但是作为一个有态度的产品经理，应该多做一些思考。

2、什么是缓存？

缓存可分为如下几类：

（1）app缓存。

（2）固定缓存。

（3）可手动清理的缓存。

（4）不可手动清理的缓存。

（5）临时缓存。

其中，临时缓存常用于一个功能页面内，保存各栏目的缓存。同一个功能里会把子功能分为多个栏目进行划分，每个标签栏目下的内容在本次使用中都可保存为临时缓存，在该功能里切换栏目，不需要重新加载数据，使用缓存显示。

对于用户来说，使用时达到了无缝切换浏览，对于服务器来说，在短时间内数据很少会有更新，所以在一般情况下能满足用户的正常需求，并达到体验优秀。

临时缓存的清理机制是：退出该功能模块就清除之前的缓存。也就是说下次进入该功能模块，需要重新获取一次数据。

很多时候我们都会用到临时缓存，因为那些信息真的不是那么重要，而且不需要经常反复查看，那对于那些我们经常使用而且经常需要反复查看的信息，马海祥建议采取固定缓存，保存在本地，方便下次翻阅时不需要再一次向服务器请求数据了。

对于固定缓存又会细分为可手动清理的缓存和不可手动清理的缓存。

第一种是我们最常见的缓存，几乎所有产品都采用这种缓存方式。平时用户浏览文章、图集加载的数据就以这种形式缓存在本地，下次看回这篇文章、图集时就不需要加载了。用户也可以手动把这些缓存清理了，释放空间。

而对于某些特殊场景，例如一些相对固定的数据，我们不愿意一开始就打包进App里，这样会占太大容量，造成产品包很大，也不愿意每次进入页面都向服务器加载这些信息，那怎么办？建议的解决方法就是我们可以只加载一次就永远存在本地了，这样安装包也不会大，以后也不用加载了。

3、如何清理缓存？

一般App都会在“设置”里提供一个清理缓存的功能，一键把空间释放。除此之外，App最好要设计自动清理机制，可以通过两个维度来设计这个机制。

（1）、时间

通过设定一个固定的时间，或者根据用户使用周期灵活设定时间来清理缓存。每个产品的场景不一，用户使用频率不一，设定这个机制的时候就需要结合实际情况考虑了。

（2）、容量

一般是设定一个容量上限，采用堆栈的设计原理进行缓存清理，溢出堆栈的旧数据将自动清除。

4、实现
uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

uni.setStorage({    key: 'storage_key',   //key String 本地缓存中的指定key    data: 'hello', //data Any 需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象    success: function () {//success Function接口调用成功的回调函数 console.log('success');    }});

uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

try {    uni.setStorageSync('storage_key', 'hello');  //keyString 本地缓存中的指定的 key} catch (e) {     //dataAny需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象    // error}

uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。

uni.getStorage({    key: 'storage_key', //String本地缓存中的指定的 key    success: function (res) {  //Function 接口调用的回调函数，res = {data: key对应的内容} console.log(res.data); //data key 对应的内容    }});

uni.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。

try {    const value = uni.getStorageSync('storage_key');  //keyString本地缓存中的指定的 key    if (value) { console.log(value);    }} catch (e) {    // error}

uni.getStorageInfo(OBJECT)
异步获取当前 storage 的相关信息。

uni.getStorageInfo({    success: function (res) { //Function 接口调用的回调函数. console.log(res.keys);  //keysArray＜String＞当前 storage 中所有的 key console.log(res.currentSize); //currentSizeNumber当前占用的空间大小, 单位：kb console.log(res.limitSize);  //limitSizeNumber限制的空间大小, 单位：kb    }});

uni.getStorageInfoSync()
同步获取当前 storage 的相关信息。

try {    const res = uni.getStorageInfoSync();    console.log(res.keys);    console.log(res.currentSize);    console.log(res.limitSize);} catch (e) {    // error}

uni.removeStorage(OBJECT)
从本地缓存中异步移除指定 key。

uni.removeStorage({    key: 'storage_key', //key String 本地缓存中的指定的 key    success: function (res) { //success Function 接口调用的回调函数 console.log('success');    }});

uni.removeStorageSync(KEY)
从本地缓存中同步移除指定 key。

try {    uni.removeStorageSync('storage_key');  //keyString本地缓存中的指定的 key} catch (e) {    // error}

uni.clearStorage()
异步清理本地数据缓存。

uni.clearStorage();

uni.clearStorageSync()
同步清理本地数据缓存。

try {    uni.clearStorageSync();} catch (e) {    // error}

注意
uni-app的Storage在不同端的实现不同：

• H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
• App端为原生的plus.storage，无大小限制，不是缓存，是持久化的
• 各个小程序端为其自带的storage
  api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
• 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
• 支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。
• 百度、字节跳动小程序文档未说明大小限制

二、加载机制

1、页面加载

方案1：单页面整体加载

这种加载比较简单，一般运用在页面内容比较单一的情况下，所以直接一次性加载完所有数据后再显示内容。其单页面加载失败的状态相对来说也比较好处理。

方案2：单页面分块加载

这种方案的特点是，能让用户逐步看到内容，在这个渐进的过程中降低用户的焦虑心理。

其中又可以分为，模块间有关联性的，先加载父内容，再加载子内容。如优酷，先把栏目加载出来，再加载各栏目的内容。

模块间没有绝对关联性的，可独自加载各自模块内容，根据请求的速度不同分别显示。这样处理有一定几率让用户在没完全刷出数据的情况下就能找到自己需要的功能，如大众点评、淘宝客户端等。

框架固定，内容更新的，可先把框架显示出来，再把各模块的数据各自加载显示，如各种iOS自带应用。

这种分模块加载的需要特别注意加载失败的状态，毕竟每个模块都提示加载失败，点击重试是很挫的一件事，可以根据信息的优先级来决定哪些数据失败了采用默认状态，哪些数据采用失败提示。

方案3：跨页面加载

父页面&子页面 or 同一app内，页面间字段可以复用的，在加载子页面时不需要重新加载新数据。

方案4：预加载

这种加载方式的特点是，在加载一个页面内容的同时，预测用户的下一步行为，并为他下一步需要使用的页面加载内容，使得他在下一步的操作中能立刻获取信息而不需要加载等待。

预加载提供给用户无缝的产品使用体验，使得用户在使用产品的过程中更直接流畅，没有被打断的感觉。

具体的例子有：

在浏览图集的时候，当看到第一张的图片时，就自动后台加载第二第三第四张图片，用户浏览完第一张图片切换到第二张时就不会有加载等待的过程。

在浏览新闻列表时，就把每篇新闻的内容在后台进行预加载，用户选择看某篇新闻时，能立刻阅读到内容。

但是这种方案也需要面临很多的问题，马海祥觉得最直接的就是流量问题，因为会自动跑掉很多用户可能根本用不上的数据流量，所以，一般情况下马海祥建议可以设定在wifi环境才采用这种加载模式。又或者设定加载规则，只把主要内容预加载，而部分次要内容可以在用户真的用到的时候才加载，例如预加载新闻正文的情况，可以只加载文本信息，图片信息等到用户进入内页才加载。这种预加载与分块加载结合的方式也普遍运用在各个场景。

另外，预加载也需要时间的，他只是不在客户端显示给用户，默默在后台运作而已，需要特殊考虑未加载完用户就使用到那些信息的情况，所以在做预加载设计时需要同时考虑另一种适合该情况的普通加载方式。

预加载需要根据具体的场景来进行设计，设定好信息优先级，综合考虑各种类型信息的具体大小流量，整体考虑预加载的方式，这些都是需要经过精心分析思考的。

随着网络环境的发展，预加载将成为以后产品普遍的加载方式，他提供给用户的无缝使用体验大大地提升了产品的可用性。

2、操作加载

除了页面的信息需要加载，页面内的操作也是需要通过给服务器发送请求记录的。

方案1：加载层

进行一个操作后，弹出模态的提示层，告知用户正在加载。采用模态的提示主要是防止用户在该过程中进行其他操作，导致当前加载出错。由于采用模态的提示，并且有可能因为网络原因导致长时间处于加载状态，建议提供一个“关闭”的操作，中止本次加载，恢复App可用状态。加载失败时可在当前浮层变换为失败提示。模态提示层是最稳妥的方式，但他会使用户在使用过程中有打断的感觉。

方案2：控件自身加载状态

这种方式是把操作加载的状态与控件的样式结合起来了，对某个控件进行操作后，控件变换为加载状态，此时控件不能重复操作。由于这种加载方式是控件的自身状态，不影响其他操作，所以用户也可以对页面进行其他操作，可能会导致同时有多个请求的情况，增加了加载失败的风险，这也算是这种方式的弊端，不过这种极端情况很少出现。请求失败后，可配合Toast提示告知用户失败的原因。

方案3：后台加载

用户在操作后，客户端立刻反馈操作成功，然后把请求放到后台与服务器交互，这一过程用户不需要了解，不需要等待，在正常情况下体验是非常棒的。

但是在极端情况下会出现一些莫名其妙的状况，由于是后台记录请求并与服务器交互，所以实际请求是否成功客户端是不说明的，全部以操作成功来显示，这就会导致用户误以为操作成功了，但实际上下次来看发现没有成功。

所以，这种加载方式是需要根据具体使用场景来权衡使用的，对于一些重要的操作，建议还是使用模态的方式加载，对于一些小操作，如点赞、订阅、关注，可采用后台加载的方式。

3、下一页加载还是当前也加载

用户进入首页，正式迈出体验的第一步，接下来迎接的就是基于用户目标的界面间跳转。完成界面的跳转，会有各种加载策略，但无论形式如何，我们都可以将其归为两大类：“下一页加载”、“当前页加载”。

（1）“下一页加载”满足了用户提前窥视的需求

我们把页面看成“点”，页面流是连接这些点的“线”，我们以“用户想买一条牛仔裤”这一场景作为案例做了简单的眼动研究，从应用启动到商品浏览再到商品确定最后进入下单页，用户所呈现的瞳孔梯次增大，即E>D>C>B>A，为了解释这一现象，通过与被试交流，我们发现相比于各种浏览，用户更期待看到他们想看到的东西。因此此时的”下一页加载“正好，满足了用户提前窥视的需求。

（2） Wait！I Need Think Think

我们以同样的方式又对“使用支付宝对手机充值”这一场景做了研究，从开始支付到二次确认支付，用户所呈现的瞳孔都比较大，即A与B近似相等，通过访谈，我们发现与“递增体验流”不同的是，当用户遇到判断逻辑的界面时，用户并非急于想看下一页面到底包含怎样的内容，而是非0即1的验证心态，即我的操作效成功了吗？因此在判断逻辑界面中，用户的内容窥视需求并不强，当然也没什么内容，要么仅是一个小小的Toast，再大一点就是一个简单的信息反馈界面（意味着“下一页加载”在这里就是个鸡肋），用户反而对非0即1的验证需求较为强烈，其中还伴随着等待结果过程中的紧张感、激动感，因此界面通过当前页加载表明系统正在努力地处理用户交代的指令迎合了用户的紧张感、激动感，直到结果显现——“处理成功”，完成了非0即1验证的满足感。

4、先加载还是先展示

当需加载的是功能时，可以先展示再加载，当需加载的是内容时，则反过来。

淘宝

打开APP的第一个页面是功能，所以先展示再加载的：

随便点击一个模块（不要点菜单），下面要展示的将要是内容（商品），所以是先加载再展示的，没有加载完都不展示：

京东

同样的，功能模块先展示后加载：

内容先加载，没加载完不展示：

两种方式各有利弊：

先展示，后加载：

优点：给用户0等待的错觉

缺点：当前数据有可能是错的，而且得等用户操作到最后一步才会发现

先加载，后展示：

优点：保证数据的质量和准确

缺点：网络不好时，造成等待

显然，功能模块对于一个产品来说是既有固定的，在短时间内几乎不会更新，所以这种数据出现错误或与当前状态不同的几率小得多，因此，可以使用先展示后加载的方式。

另一方面，内容（特别是商品数据）是最容易产生变动的，为了保证每一个消费者看到的数据都是最真实，最准确的，所以务必要先加载再展示。

5、实现

 //加载更多的新闻     getMoreNews(){  this.loadingTxt='加载中'  uni.showNavigationBarLoading()  uni.request({      url:'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=List1&page='+page,      success: (res) => {   if(res.data===null){this.loadingTxt="已经加载全部"return   }   this.newList=this.newList.concat(res.data.split('--hcSplitor--'))   // this.newList=[...this.newList,res.data.split('--hcSplitor--')]   //停止下拉样式   uni.stopPullDownRefresh()   //隐藏标题读取   uni.hideNavigationBarLoading()   page++      }  })     },

三、刷新机制

1、空白页面刷新失败有提示

现在的应用都标榜以内容为中心，所以都会极力避免空白页面的出现。对于大部分的应用，最好的方法就是使用缓存，进入页面之后，先显示之前的缓存，然后再进行内容的刷新。其次，消灭空白页面的第二种方法就是提供系统推荐项进行替代。但是对于一些页面，页面内容跟用户的使用状态关系密切，无法避免会出现空白页面，这时候会使用一些引导类的提示，使得页面变得更加丰富，同时可以促进用户产生内容。

但是一些资讯类应用，比如读读日报，打开默认是空白页面，然后再加载内容（我不是很明白这种设定）。其他一些应用，比如：豆瓣一刻和MONO，每天第一次进入应用的时候也会出现空白页面。我猜想第二类应用的展示方式的原因是这样的。他们的内容推送都是严格以天为单位的，每天固定时段推送精选内容。他们会希望你每天只看并且看完当天的东西，所以一旦到了第二天，昨天的内容就是累赘了。所以每天第一次进入应用的时候会出现空白页面，象征着每天都是从新开始。此时就会对应一个“空白刷新”逻辑。

空白刷新对应的场景是这样子的：用户想要刷新出内容，并且用户知道这里可以刷出新内容，但是没有刷新成功，这时候需要给用户一个交待。所以需要提示用户。同时，提示完用户之后需要给用户一个解决方法，这就是“点击后重试”。

2、缓存页面刷新失败无提示

常见的应用比如知乎、网易新闻、好奇心日报、微信朋友圈等，这些应用都会采用缓存的形式，打开之后显示的是缓存内容，然后系统会给服务器发送请求，如果有内容更新的话就会自动更新一次内容，更新之后的内容直接覆盖当前的内容。更新失败之后是没有提示的。但是有一些应用，比如有道词典、企鹅FM、网易云音乐等，他们更新失败之后是有提示的。

我觉得这两种应用的区分点在于

应用的使用频率；

内容的时间连续性；

界面之间的关系紧密度。

比如说网易新闻，作为一个打发时间的工具，每天使用频率就会比较高，所以用户进来之后是想看看有没有更新。其次，网易新闻的内容是连续不断更新的，所以用户会知道当前显示的内容是我看看过并且处理过的。最后，新闻列表页面显示的是摘要，用户可以通过摘要快速进行判断是否要进入详情页，摘要有助于帮助用户回忆上一次的使用场景。

所以这就对应着一个这样的场景：用户只是想看看有没有更新，所以他们已经做好了“没有新内容”的心理预期，所以即使是更新不了内容，用户也不会想太多。反倒是，如果进行了错误提示，用户可能会有一种挫败感。因为他知道现在有内容，只是因为网络的原因而没有更新，他要进行的任务受到了外界因素的阻碍，由此产生一种细微的挫败感。

3、缓存页面刷新失败有提示

另一类应用，使用频率没那么高，或者内容不具备时间连续性的，又或者说当前界面无法唤起用户上一次的使用场景。那么就有必要进行率先你失败提示了。

比如说企鹅FM，音频类的应用注定使用不会那么频繁，因为通过视觉接收的信息会比通过听觉接收的信息更快更多，同时音频类对环境的要求较高（比如用耳机时要求环境不那么嘈杂，外放时要求在私人场所）。其次，此类应用都是实时推荐的，不存在时间连续性的问题，用户无法通过时间来判断内容是否被阅读过。再者，标题也无法帮你快速做出判断，你还是要进去听过才知道内容是什么。最后如果不提醒，用户进入到详情页再收到提醒，就会觉得应用浪费了用户的时间。所以，对于此类内容，刷新失败是有必要进行提醒的。

4、实现
onPullDownRefresh
在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启enablePullDownRefresh。
• 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。uni.startPullDownRefresh(OBJECT)

{    "pages": [ {     "path": "pages/index/index",     "style": {  "navigationBarTitleText": "uni-app",  "enablePullDownRefresh": true     } }    ],    "globalStyle": { "navigationBarTextStyle": "white", "navigationBarBackgroundColor": "#0faeff", "backgroundColor": "#fbf9fe"    }}

uni.startPullDownRefresh(OBJECT)
开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

export default {    data: { text: 'uni-app'    },    onLoad: function (options) { setTimeout(function () {     console.log('start pulldown'); }, 1000); //uni.startPullDownRefresh(); uni.startPullDownRefresh({     success：function(res){  console.log(res);  //success 返回参数说明     } });  //这里表示当进入页面的时候就开始执行下拉刷新动画    },    onPullDownRefresh() { //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次 console.log('refresh'); setTimeout(function () {     uni.stopPullDownRefresh();  //停止下拉刷新动画 }, 1000);    }}

uni.stopPullDownRefresh()
停止当前页面下拉刷新。

注意

• 支付宝小程序startPullDownRefresh在开发者工具里会提示暂未开放，请勿使用
• 支付宝小程序startPullDownRefresh请使用真机调试（非真机预览）
• 后续支付宝小程序开发工具更新可能会有所修改

上拉加载、下拉刷新

{     "path": "pages/index/index",     "style": {  "navigationBarTitleText": "uni-app",  "enablePullDownRefresh":true     } }

index.vue

<template>    <view> <view v-for="(item,index) of newList" :key="index" class="newList">     {{item}} </view> <view class="loading">{{loadingTxt}}</view>    </view></template><script>let page=1,timer=null    export default { data() {     return {  newList:[],  loadingTxt:'加载更多'     } }, onLoad(e) {     this.getNews() }, onPullDownRefresh() {     //下拉的生命周期     this.getNews() }, onReachBottom() {     //阻止重复加载     if(timer !== null){  clearTimeout(timer)     }     timer=setTimeout(()=>this.getMoreNews(),500)     // this.getMoreNews() }, methods: {     //下拉刷新事件     getNews(){  page=1  //标题读取样式激活  uni.showNavigationBarLoading()  uni.request({      url:'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=List1&page=1',      success: (res) => {   this.newList=res.data.split('--hcSplitor--')   //停止下拉样式   uni.stopPullDownRefresh()   //隐藏标题读取   uni.hideNavigationBarLoading()   page++      }  })     },     //加载更多的新闻     getMoreNews(){  this.loadingTxt='加载中'  uni.showNavigationBarLoading()  uni.request({      url:'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=List1&page='+page,      success: (res) => {   if(res.data===null){this.loadingTxt="已经加载全部"return   }   this.newList=this.newList.concat(res.data.split('--hcSplitor--'))   // this.newList=[...this.newList,res.data.split('--hcSplitor--')]   //停止下拉样式   uni.stopPullDownRefresh()   //隐藏标题读取   uni.hideNavigationBarLoading()   page++      }  })     }, }    }</script><style>    .newList{ line-height: 2em; padding: 20px;    }    .loading{ line-height: 2em; text-align: center; color: #888; margin-top: 30rpx;    }</style>