⼩程序——详细讲解页⾯传值（多种⽅法）
1、使⽤navigator的url带参传值
（1）在pageA页⾯有⼀个固定的值要传递到pageB页⾯，⽐如说⼀个固定的值user_id要传递给B
<navigator url="../index/pageB?user_id='12345678'">index4</navigator>
注：？后⾯为你要传递的值
这样在pageB页⾯js的onload函数⾥⾯，使⽤setData⽅法可以获取到传递过来的值，并将它赋值给pageB页⾯初始数据
在pageB页⾯的data⾥⾯声明⼀个初始数据
data: {
user_id:''
},
然后在onload函数中进⾏操作，页⾯加载时获取
onLoad: function (options) {
this.setData({
user_id:options.user_id
})
console.log(this.data.user_id)
},
（2）在⼀般情况下我们要传多个值，与上⾯的差不多，只是多加了⼀个&，下⾯我代码⽰范
pageA
<navigator url="../index/pageB?user_id='12345678'&user_name='lhs'">index</navigator>
pageB
data: {
user_id:'',
user_name:''
flex布局详细讲解},
onLoad: function (options) {
this.setData({
user_id:options.user_id,
user_name: options.user_name,
})
console.log(this.data.user_id)
console.log(this.data.user_name)
},
（3）当然也可以在js页⾯传值，⽐如使⽤wx.navigateTo、wx.redirectTo等，下⾯我让⼤家看看与navigator对应关系
从上⾯可以看出navigator的open-type="navigate"(不写默认值是navigate)等于wx.navigateTo
好了，我接着使⽤wx.navigateTo使⽤传值；⾸先在pageA绑定⼀个点击事件
<button catchtap="pageB">index</button>
在事件中写⼊参数，当然如果是传多个参数的话就要在后⾯加&
pageB: function () {
wx.navigateTo({
url: '../logs/logs?user_id=' + 520,
})
},
详细：
1、wx.navigateTo：保留当前页⾯，跳转到应⽤内的某个页⾯。但是不能跳到 tabbar 页⾯。使⽤可以返回到原页⾯。⼩程序中页⾯栈最多⼗层。（可带参）
2、wx.redirectTo：关闭当前页⾯，跳转到应⽤内的某个页⾯。但是不允许跳转到 tabbar 页⾯。（可带参）
3、wx.switchTab：跳转到 tabBar 页⾯，并关闭其他所有⾮ tabBar 页⾯（不可带参）
4、wx.reLaunch：关闭所有页⾯，打开到应⽤内的某个页⾯（可带参）
5、wx.navigateBack ：关闭当前页⾯，返回上⼀页⾯或多级页⾯。可通过获取当前的页⾯栈，决定需要返回⼏层。（没有url属性，不可带参）
总结：
switchTab这种导航⽅式，不能带参，也就是说不能通过url进⾏传参，解决⽅法就是如果要跳转到tab页⾯，使⽤reLaunch⽅法
2、利⽤getCurrentPages进⾏页⾯传值
（1）.getCurrentPages()获取当前页⾯栈。数组中第⼀个元素为⾸页，最后⼀个元素为当前页⾯。pageA：dataFromB和dataFromC都是从pageB和pageC获取的，暂时没有数据
<text class='currentPage'>当前页⾯:[pageA.wxml]</text>
<view class='container'>
<text>{{name}}</text>
<text>{{dataFromB}}</text>
<text>{{dataFromC}}</text>
</view>
<button type = "primary" catchtap='goToPageB'>跳转到pageB</button>
pageA的样式
page{
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
background: #fff;
}
.currentPage{
width: 100%;
height: 80rpx;
padding-left: 150rpx;
background-color: red;
line-height: 80rpx;
color: #fff;
}
.container{
width: 600rpx;
height: 300rpx;
background-color: red;
margin-top: 80rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 80rpx;
color: #fff;
}
View Code
pagaA要初始化数据，绑定goTopageB跳转到pageB
data: {
name: '花泽⾹菜',
dataFromB: '',
dataFromC: ''
},
goToPageB: function () {
/
/ 保留当前页⾯，跳转到应⽤内的某个页⾯。但是不能跳到 tabbar 页⾯。⼩程序中页⾯栈最多⼗层
wx.navigateTo({
url: '../pageB/index',
})
},
pageB：array[index]是传值给pageA的数据，这⾥绑定goToPageC函数跳到pageC
<text class='currentPage'>当前页⾯:[pageB.wxml]</text>
<view class='container'>
<!-- <text>{{name}}</text> -->
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
国籍：{{array[index]}}
</view>
</picker>
</view>
<button type = "primary" catchtap='goToPageC'>跳转到pageC</button>
pageB的样式
page {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
background: #fff;
}
.currentPage {
width: 100%;
height: 80rpx;
padding-left: 150rpx;
background-color: #0ff;
line-height: 80rpx;
}
.
container {
width: 600rpx;
height: 300rpx;
background-color: #0ff;
margin-top: 80rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 80rpx;
}
View Code
初始化pageB数据，这⾥是通过getCurrentPages获取页⾯栈给pageA传值的
data: {
array: ['德国', '⽇本', '英国', '法国', '⽐利时'],
},
// 传值
bindPickerChange: function (e) {
let pages = getCurrentPages();
let currPage = null; //当前页⾯
let prevPage = null; //上⼀个页⾯
if (pages.length >= 2) {
currPage = pages[pages.length - 1]; //最后⼀个元素为当前页⾯。
prevPage = pages[pages.length - 2]; //上⼀个页⾯
console.log(currPage + "，" + prevPage);
}
if (prevPage) {
//给pageA页⾯赋值
prevPage.setData({
dataFromB: '国籍：' + this.data.array[e.detail.value]
});
}
//给当前页⾯赋值
this.setData({
index: e.detail.value
})
},
goToPageC: function () {
wx.navigateTo({
url: '../pageC/index',
})
},
pageC：通过绑定goToPageA函数跳回pageA页⾯
<text class='currentPage'>当前页⾯:[pageC.wxml]</text>
<view class='container'>
<!-- <text>{{name}}</text> -->
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
作品：{{array[index]}}
</view>
</picker>
</view>
<button type = "primary" catchtap='goToPageA'>跳转到pageA</button>
pageC样式
page {
  display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
background: #fff;
}
.currentPage {
width: 100%;
height: 80rpx;
padding-left: 150rpx;
background-color: pink;
line-height: 80rpx;
}
.container {
width: 600rpx;
height: 300rpx;
background-color: pink;
margin-top: 80rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 80rpx;
}
View Code
初始化数据，这⾥是通过wx.navigateBack返回pageA，如果使⽤wx.navigateTo返回pageA是没有传值/**
* 页⾯的初始数据
*/
data: {
array: ['恋爱循环', '⼤丈夫'],
},
bindPickerChange: function (e) {
let pages = getCurrentPages();
let currPage = null; //当前页⾯
let prevPage = null; //上⼀个页⾯
if (pages.length >= 2) {
currPage = pages[pages.length - 1]; //最后⼀个元素为当前页⾯。
prevPage = pages[pages.length - 3]; //pageA页⾯
console.log(currPage + "，" + prevPage);
}
if (prevPage) {
//给上⼀个页⾯赋值
prevPage.setData({
dataFromC: '代表作品：' + this.data.array[e.detail.value]
});
}
//给当前页⾯赋值
this.setData({
index: e.detail.value
})
},
goToPageA: function () {
// 关闭当前页⾯，返回上⼀页⾯或多级页⾯。
wx.navigateBack({
delta:2
})
},
运⾏效果：
注意：
不要尝试修改页⾯栈，会导致路由以及页⾯状态错误。
不要在Launch的时候调⽤getCurrentPages()，此时page还没有⽣成。
⼩程序页⾯栈最多有⼗个，多了就不能使⽤wx.navigateTo跳转
（2）
从上图可知使⽤wx.navigateBack页⾯不断出栈，直到⽬标返回页；即pageA使⽤wx.navigateTo跳到pageB，pageB使⽤wx.navigateTo跳到pageC，pageC使⽤wx.navigateBack跳到pageA，⽽是⼀路出栈的直到返回pageA，这时页⾯栈就只有⼀个pageA
举个例⼦，pagaA查看页⾯栈的数量：
总数是1，⽽这个就是pageA了
3. globalData全局对象
在 app.js 中定义全局变量
globalData: {
userInfo: null,
globalName:"lhs"
}
在其他页⾯可以取到全局变量
let app = getApp();
console.log(app.globalData.globalName)
4、数据缓存
数据缓存，类似于cookie,localstorage,sessionstorage等本地缓存的⽅法，只不过⼩程序有它⾃⼰的本地缓存API。当然，为什么⾮要使⽤这种⽅法呢？
当然有第⼀⼆种⽅法不能⽤的情况，举个例⼦，同样要将页⾯A的内容传递给页⾯B，但是页⾯B和页⾯A没有⽗⼦页⾯关系，说简单⼀点，就是A页⾯和B页⾯没有跳转关系，但是B页⾯就是要从A页⾯拿
数据，前⾯提到页⾯带参跳转就没有⽤了，如果页⾯层级太多，页⾯栈的⽅法也就没有，所以就要⽤到我们的第三种⽅法，数据缓存，将页⾯A的数据本地缓存，然后在B页⾯的onLoad函数中使⽤就⾏
（1）wx.setStorage(OBJECT)和wx.getStorage(OBJECT)（异步接⼝）
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除⾮⽤户主动删除或因存储空间原因被系统清理，否则数据都⼀直可⽤。单个 key 允许存储的最⼤数据长度为 1MB，所有数据存储上限为 10MB。
⾸先在页⾯A的onload中使⽤wx.setStorage将要B页⾯需要的值存储起来，如果需要存储多个值，可以封装成数组或者对象键值对的形式
data: {
info:{'name': '周杰伦',
'phone': '123456789',
'address': '台北'}
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
var that = this
wx.setStorage({
key: 'information',
data: that.data.info,
success(res){//等同于success:function(res),es6的写法，es6在⼩程序中都可以使⽤，推荐使⽤
。。。。。。。
}
})
},
在B页⾯我们只需要使⽤wx.getStorage()就可以拿到你需要的值了
data: {
name:'',
phone:'',
address:''
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。