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声明周期里进行变量重赋值。