⼩程序页⾯间的数据传递和数据共享
⽅法⼀:利⽤url
如下图所⽰,点击更多按钮跳转到新页⾯,并将对应的电影分类参数传递到新页⾯,例如图中应该传递的参数为“⾖瓣电影Top250”。
如下代码所⽰,⾸先在.wxml⽂件中到更多按钮并绑定相应⽅法,接着通过data-name指定所传参数的名字,如图所传参数名为:category。
<view class="movie-header">
<text class="header-title">{{categoryTitle}}</text>
<text class="header-more" catchtap="onMore" data-category="{{categoryTitle}}">更多 ></text>
</view>
接着在.js⽂件中编写相应的⽅法,在url中带上相应参数即可,在url中问号之后的部分都是参数。
onMore: function(event){
var category = event.currentTarget.dataset.category;
wx.navigateTo({
url: '../more-movie/more-movie?category=' + category,
})
}
在这⾥我们使⽤的路由函数是wx.navigateTo。但是如果所要跳转的页⾯带有tabBar,那么路由函数必须使⽤wx.switchTab。
onLoad: function (options) {
var category = options.category;
}
跳转到新页⾯后,只需在onLoad函数加上上⾯代码即可获取所传参数。
⽅法⼆:利⽤缓存
如下图所⽰,我们在欢迎页⾯获取了⽤户的昵称和头像,但是我们在其他页⾯也需要使⽤该昵称,最容易想到的办法就是再次向服务器请求数据,但是这种⽅法并不⾼明,重复地请求数据是没有必要的。我们可以将数据保存在缓存中,需要使⽤的时候从缓存中提取即可。
⼩程序提供的缓存⽅法有同步和异步之分,⼀般情况下我们推荐使⽤同步⽅法,如下代码所⽰,我们获取了⽤户信息并将昵称保存在缓存中。
onLoad: function (options) {
success: function (res) {
wx.setStorageSync("userName", res.userInfo.nickName);
}
})
}
获取缓存的⽅法很简单,在任意需要使⽤缓存数据的页⾯.js⽂件中加上如下代码即可。这⾥我们将昵称保存为userName,因此当需要使⽤时只需wx.getStorageSync("userName")即可。
var userName = wx.getStorageSync("userName");
⽅法三:利⽤全局变量
⾸先需要知道的是,全局变量在app.js中定义。如下图所⽰,我们需要在不同页⾯获取⾳乐的播放状态。
我们定义⼀个全局变量g_isPlayingMusic来保存播放状态,默认为false。
App({
onLaunch: function () {
昵称代码转换},
globalData: {
g_isPlayingMusic: false
}
})
在需要获取该变量的页⾯.js⽂件中按照如下代码即可获取。
var app = getApp();
Page({
data: {
isPlayingMusic: app.globalData.g_isPlayingMusic }
})
获取之后进⾏修改也很简单,只需赋值即可。
app.globalData.g_isPlayingMusic = true;
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论