微信小程序页面之间的传参方法有四种
1.页面url传参
2.data-属性传参
3.缓存传参
4.全局变量传参
1.页面url传参
navigator标签里面设置url后面用?加上key=value键值对模式传参,可以绑定动态数据
<!-- pageA传递参数 -->
<navigator url="../article/article?articleID=3">页面url传参</navigator>
//pageB接受参数
onLoad: function (options) {
this.setData({
articleID:options.articleID //articleID问pageB页面变量
})
},
2.data-属性传参
通过data-属性设置产生,在通过url传递参数,其本质还是通过url传参
<!-- pageA页面设置 -->
<view wx:for='{{articles}}' wx:key='index'>
<text bindtap="goArticle" data-item='{{item}}'>{{item.title}}</text>
</view>
//pageA传递参数
goArticle:function(event){
var item=event.currentTarget.dataset.item;
wx.navigateTo({
url: "../article/article?id="+item.id+"&title="+item.title,
})
},
//pageB接受参数
onLoad: function (options) {
this.setData({
articleID:options.id,
atricleTitle:options.title
})
},
备注:url传参和data-属性传参不能同时使用,否则后设置的生效;
3,缓存传参
小程序缓存分为异步和同步,一般使用同步;方法类似于h5的本地存储;
//缓存传参
onLoad:function(){
wx.setStorageSync("title", this.data.title)
}
onLoad: function (options) {
this.setData({
motto: wx.getStorageSync("title"),
})
4.全局变量
//1.在app.js中设globalData:{key:value,...}
globalData: {
userInfo: null
}
//2.页面定义var app=getApp()
//3.页面调用变量,app.globalData.key
const app = getApp()
getUserInfo: function() {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
}