1. 页面传值
说明：页面生命周期的onLoad(）监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）。如：
- 页面 1 传递参数
//页面跳转并传递参数
uni.navigateTo({
url: 'page2?name=liy&message=Hello'
});
url为将要跳转的页面路径 ，路径后可以带参数。参数与路径之间使用
?分隔，参数键与参数值用=相连，不同参数用&分隔。如 'path?key1=value2&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数。
- 页面 2 接收参数
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.name); //打印出上个页面传递的参数。
console.log(option.message); //打印出上个页面传递的参数。
}
注意：url有长度限制，太长的字符串会传递失败，可使用窗体通信、全局变量，或encodeURIComponent等多种方式解决。
2. 页面传值示例
2.1 传递简单参数
- home.vue中传递参数
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button @tap="navigateTo">跳转新页面，并传递数据</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '主页',
}
},
methods: {
navigateTo() {
uni.navigateTo({
url: 'new-page1?data=Hello'
})
}
}
}
</script>
<style>
</style>
- new-page1.vue 中接收数据
<template>
<view>
<view>
{{data}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
data:""
}
},
onLoad(e){
if(e.data){
this.data = e.data;
console.log(e.data); //打印出上个页面传递的参数。
}
}
}
</script>
<style>
</style>
2.2 传递数据集合
(1) 方案一：使用url携带参数
- home.vue中传递数据集合
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button @tap="JumpToNewPage">跳转新页面，并传递数据集合</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '主页',
processList:[
{
"process_id": "5",
"process_name": "卷下盘"
},
{
"process_id": "3",
"process_name": "接后片"
},
{
"process_id": "6",
"process_name": "接前片"
},
{
"process_id": "7",
"process_name": "水洗标"
},
{
"process_id": "8",
"process_name": "钉扣"
},
{
"process_id": "1",
"process_name": "贴口袋"
},
{
"process_id": "2",
"process_name": "做袖叉"
},
{
"process_id": "3",
"process_name": "做袖英"
},
{
"process_id": "4",
"process_name": "缝衣领"
}
]
}
},
methods: {
JumpToNewPage:function(){
console.log("JumpToNewPage-processList1:" + JSON.stringify(this.processList));
var processList = JSON.stringify(this.processList);
uni.navigateTo({
url: 'new-page2?processList=' + processList
})
}
}
}
</script>
<style>
</style>
- new-page2.vue 中接收数据集合
<template>
<view>
<view v-for="(item,index) in processList" :key="index">
{{item.process_name}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
processList:[]
}
},
onLoad(options){
if(options.processList){
console.log("onLoad-processList2:" + options.processList);
// this.processList = options.processList;
// console.log("onLoad-processList3:" + this.processList);
this.processList = JSON.parse(options.processList);
console.log("onLoad-processList3:" + JSON.stringify(this.processList));
}
}
}
</script>
<style>
</style>
(2) 方案二：使用全局变量共享数据
- App.vue 中定义全局变量
<script>
export default {
globalData:{
processList:[]
},
onLaunch: function() {
console.log('App Launch');
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
</style>
- home.vue 中为全局变量赋值
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button @tap="JumpToNewPage">跳转新页面，并传递数据集合</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '主页',
processList:[
{
"process_id": "5",
"process_name": "卷下盘"
},
{
"process_id": "3",
"process_name": "接后片"
},
{
"process_id": "6",
"process_name": "接前片"
},
{
"process_id": "7",
"process_name": "水洗标"
},
{
"process_id": "8",
"process_name": "钉扣"
},
{
"process_id": "1",
"process_name": "贴口袋"
},
{
"process_id": "2",
"process_name": "做袖叉"
},
{
"process_id": "3",
"process_name": "做袖英"
},
{
"process_id": "4",
"process_name": "缝衣领"
}
]
}
},
methods: {
JumpToNewPage:function(){
console.log("JumpToNewPage-processList1:" + JSON.stringify(this.processList));
/* var processList = JSON.stringify(this.processList);
uni.navigateTo({
url: 'new-page2/new-page2?processList=' + processList
}); */
getApp().globalData.processList = this.processList;//赋值
uni.navigateTo({
url: 'new-page2/new-page2?'
});
},
}
}
</script>
<style>
</style>
- new-page2.vue 中获取全局变量
<template>
<view>
<view v-for="(item,index) in processList" :key="index">
{{item.process_name}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
processList:[]
}
},
onLoad(options){
// if(options.processList){
// console.log("onLoad-processList2:" + options.processList);
// // this.processList = options.processList;
// // console.log("onLoad-processList3:" + this.processList);
// this.processList = JSON.parse(options.processList);
// console.log("onLoad-processList3:" + JSON.stringify(this.processList));
// }
this.processList = getApp().globalData.processList;//取值
console.log("onLoad-processList2:" + JSON.stringify(this.processList));
}
}
</script>
<style>
</style>
js中操作globalData的方式如下：
- 赋值：getApp().globalData.name= 'liy'
- 取值：console.log(getApp().globalData.name) // 'liy'
如果需要把globalData的数据绑定到页面上，可在页面的onshow声明周期里进行变量重赋值。
网友评论