小程序开发-小程序页面间传递数据的方式
<blockquote><p>在小程序开发中，我们小程序的不同页面间经常需要传递一些数据。针对不同的数据要求，有几种不同的传递数据方式。</p>
</blockquote>
<h4 id="1-页面跳转通过url传递数据">1. 页面跳转通过url传递数据</h4>
<p>在使用<code>wx.navigateTo</code>或者<code>wx.redirectTo</code>的时候，可以将部分数据放在url里面，在新页面<code>onLoad</code>的时候获取且初始化。</p>
<pre><code>//pageA.js
// Navigate
wx.navigateTo({
url: '../pageB/pageB?name=jake&gender=male',
})
// Redirect
wx.redirectTo({
url: '../pageB/pageB?name=jake&gender=male',
})
// pageB.js
...
Page({
onLoad: function(option){
console.log(option.name + 'is' + option.gender);
this.setData({
option: option
});
}
})
</code></pre>
<p>需要注意的是:</p>
<ul>
<li><code>wx.navigateTo</code>或者<code>wx.redirectTo</code>, 不能跳转到tab说包含的页面</li>
<li><code>onLoad</code> 只会执行一次</li>
</ul>
<p>这种方式比较适合两个页面之间传递少量的数据。</p>
<h4 id="2-使用全局变量传递数据">2. 使用全局变量传递数据</h4>
<p>在<code>app.js</code>中可以定义全局变量<code>globalData</code>， 旧页面将要传递的数据赋值存放在里面，新页面调用全局变量获取传递数据值。</p>
<pre><code>// app.js
App({
// 全局变量
globalData: {
name: null
}
})
//pageA.js
···
getApp().globalData.name = "jake";
//pageB.js
···
this.setData({
userName: getApp().globalData.name
});
</code></pre>
<ul>
<li>使用的时候通过<code>getApp()</code>拿到存储的信息</li>
<li>这种方式一般适用于多个页面或者全部页面都需要获取使用同一个数据，比如一开始进入首页就获取到的用户信息等；</li>
</ul>
<h4 id="3-使用本地缓存">3. 使用本地缓存</h4>
<p><strong>使用小程序中的本地缓存Storage，旧页面将传递数据存入缓存中，新页面通过调用获取缓存的API得到数据。</strong></p>
<pre><code>//pageA.js
···
wx.setStorageSync('sessionId', "session");
//pageB.js
···
var sessionId = wx.getStorageSync('sessionId');
</code></pre>
<p>注意：</p>
<ul>
<li>Storage每次存入会覆盖掉原来该 key 对应的内容。</li>
<li>如果用户主动删除小程序或因存储空间原因被系统清理，Storage中数据将被清除。</li>
<li>单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。</li>
</ul>
<p>这种方式一般适用于即使小程序退出然后再重新进入，也要保留的数据，类似于登录状态的保留等。</p>
</div>
<div id="MySignature" role="contentinfo">
<div style="position: relative; left: 10px">作者：小黎子是我</div>
<div style="position: relative; left: 10px">出处：https://www.cnblogs.com/limaostudio/</div>
<div style="position: relative; left: 10px">请在转载文章时保留文章出处哟，谢谢~~ </div>
<div style="position: relative; left: 10px">如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个<span>“推荐”</span>哦，小黎子在此感谢！~ </div>
<div style="position: relative; left: 10px">😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐😐</div>
</div><br><br>
来源：https://www.cnblogs.com/limaostudio/p/13639023.html
頁:
[1]