数据共享
常规的页面数据共享,这个很大众了,也很简单,可以把数据放到app.js
中的一个变量中存储起来,然后各个页面通过getApp()
来得全局app,从而共享数据。
app.js
App({
globalData: {
userInfo: null
}
})
其他页面
const app = getApp();
let username= ‘username’;
//设置全局变量
app.globalData.userInfo = {
username: username
};
let username02= '';
/**获取全局变量 */
if (app.globalData.username) {
username02= app.globalData.userInfo.username;
if (username02) {
// doSomething
}
}
页面间数据传递
1、分析
- 需求:【页面a】到转到页面【页面b】,做出一些骚操作,然后返回,将b页面的数据带给a页面。
- 核心知识点:
let pages = getCurrentPages();
let currPage = null; //当前页面
let prevPage = null; //上一个页面
if (pages.length >= 2) {
currPage = pages[pages.length - 1]; //当前页面
prevPage = pages[pages.length - 2]; //上一个页面
}
if(prevPage){
prevPage.setData({
dataFromB: '2018世界杯冠军:'+this.data.array[e.detail.value]
});
}
- 效果图:
2、代码实现
【a页面】的代码实现:
- a-page.wxml
<!--pages/page-callback/a-page/a-page.wxml-->
<text class='currentPage'>当前页面:[a-page.wxml]</text>
<view class='container'>
<text>{{name}}</text>
<text>{{dataFromB}}</text>
</view>
<button type = "primary" catchtap='goToPageB'>跳转到下一页</button>
- a-page.wxss
/* pages/page-callback/a-page/a-page.wxss */
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: #f0f;
line-height: 80rpx;
}
.container{
width: 600rpx;
height: 300rpx;
background-color: #f0f;
margin-top: 80rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 80rpx;
}
- a-page.js
// pages/page-callback/a-page/a-page.js
Page({
/**
* 页面的初始数据
*/
data: {
name:'我是张三',
dataFromB:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
goToPageB :function(){
wx.navigateTo({
url: '../b-page/b-page',
})
}
})
【b页面】的代码实现:
- b-page.wxml
<!--pages/page-callback/b-page/b-page.wxml-->
<text class='currentPage'>当前页面:[b-page.wxml]</text>
<view class='container'>
<text>{{name}}</text>
</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
世界杯冠军:{{array[index]}}
</view>
</picker>
- b-page.wxss
/* pages/page-callback/b-page/b-page.wxss */
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;
}
- b-page.js
// pages/page-callback/b-page/b-page.js
Page({
/**
* 页面的初始数据
*/
data: {
name: '我是李四',
array: ['克罗地亚', '英格兰', '法国', '比利时'],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
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]; //上一个页面
}
if(prevPage){
prevPage.setData({
dataFromB: '2018世界杯冠军:'+this.data.array[e.detail.value]
});
}
this.setData({
index: e.detail.value
})
},
})
Page对象
getCurrentPages()
获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。在【b页面】打印getCurrentPages()
如下图,可见 数组包含两个对象,对象的字段,都是页面对象Page({...})
中定义的字段,有的字段是指如data
,有的字段时函数,如自定义函数 bindPickerChange
等。