uni-app之预加载和取消预加载（仅支持APP和H5）——uni.preloadPage、uni.unPreloadPage
<p style="margin-left: 30px"><span class="anchor">今天，在做微信小程序的时候，有一个请求需要较长的时间。向通过预加载实现。结果，结果……不支持小程序。但还是把它记录下来，说不定以后会用上。</span></p><p style="margin-left: 30px"><span class="anchor">题外话。后来将请求放到本地缓存。先读取缓存。然后，再悄悄的请求、更新。</span></p>
<h1 id="preloadpage"><span class="anchor">uni.preloadPage(OBJECT)</span></h1>
<p style="margin-left: 30px"><span class="anchor">预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。</span></p>
<h1><span class="anchor">平台差异说明</span></h1>
<table border="0">
<tbody>
<tr style="background-color: rgba(204, 204, 204, 1)">
<td style="text-align: center"><strong>App-nvue</strong></td>
<td style="text-align: center"><strong>H5</strong></td>
<td style="text-align: center"><strong>微信小程序</strong></td>
<td style="text-align: center"><strong>支付宝小程序</strong></td>
<td style="text-align: center"><strong>百度小程序</strong></td>
<td style="text-align: center"><strong>字节跳动小程序</strong></td>
<td style="text-align: center"><strong>QQ小程序</strong></td>
</tr>
<tr>
<td style="text-align: center">√（2.7.12+）</td>
<td style="text-align: center">√（2.7.12+）</td>
<td style="text-align: center">×</td>
<td style="text-align: center">×</td>
<td style="text-align: center">×</td>
<td style="text-align: center">×</td>
<td style="text-align: center">×</td>
</tr>
</tbody>
</table>
<p> </p>
<h2><span class="anchor">H5平台</span></h2>
<p style="margin-left: 30px"><span class="anchor">预加载 /pages/test/test 对应的js文件，不执行页面预渲染逻辑。</span></p>
<div class="cnblogs_code">
<pre>uni.preloadPage({url: "/pages/test/test"});</pre>
</div>
<h2>App-nvue平台</h2>
<p style="margin-left: 30px">预加载nvue页面 /pages/test/test</p>
<div class="cnblogs_code">
<pre>uni.preloadPage({url: "/pages/test/test"});</pre>
</div>
<p><span style="background-color: rgba(204, 153, 255, 1); color: rgba(255, 0, 255, 1)">注意事项</span></p>
<ul>
<li>App平台仅支持预加载 nvue 页面，执行页面预渲染，预载时触发生命周期 <code>onLoad</code>，<code>onReady</code>，不触发 <code>onShow</code></li>
<li>打开新页面时，url 完全相同（包含参数）时，优先使用预加载页面，触发生命周期 onShow</li>
<li>tabbar页面，仅支持预加载尚未显示过的页面，否者返回 fail，提示 already exists</li>
<li>同一时间，相同 url 仅 preloadPage 一次</li>
<li>当同一个预载页面已被打开(在路由栈)，再次打开相同url时，不再使用该预加载页面，而是打开新的非预载页面</li>
<li><code>uni.reLanuch</code>, <code>uni.switchTab</code>, <code>uni.navigateBack</code>(含Android返回键) 切换页面时，预加载页面不会被销毁，仅触发生命周期 <code>onHide</code></li>
<li>在预载页面使用 <code>uni.redirectTo</code> 时，预加载页面会被销毁，触发生命周期 <code>onUnload</code></li>
</ul>
<p>示例</p>
<div class="cnblogs_code">
<pre>uni.preloadPage({url: "/pages/test/test"}); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 预加载 /pages/test/test 页面（仅触发onLoad，onReady)</span>
uni.navigateTo({url: "/pages/test/test"}); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> url匹配，跳转预加载页面（仅触发onShow)</span>
uni.navigateTo({url: "/pages/test/test?a=b"}); <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> url不匹配，正常打开新页面</span></pre>
</div>
<h1 id="unpreloadpage"><span class="anchor">uni.unPreloadPage(OBJECT)</span></h1>
<p>取消预载页面。</p>
<ol>
<li>仅App-nvue支持</li>
<li>当预载页面未被打开时，使用 <code>unPreloadPage</code>时会销毁该页面，触发生命周期 <code>onUnload</code></li>
<li>当预载页面已被打开时，使用 <code>unPreloadPage</code>时不销毁该页面，但该预加载页面不再继续存在，会随着路由变化而销毁</li>
</ol>
<h1>参考网址</h1>
<ul>
<li>https://uniapp.dcloud.io/api/preload-page?id=preloadpage</li>
</ul>
</div>
<div id="MySignature" role="contentinfo">
有志者，事竟成，破釜沉舟，百二秦关终属楚； 苦心人，天不负，卧薪尝胆，三千越甲可吞吴。<br><br>
来源：https://www.cnblogs.com/luyj00436/p/15183737.html
頁:
[1]