快速了解uni-app 页面传值和代码示例

在 uni-app 开发中，页面之间的数据传递是一个非常常见的需求。根据数据类型的不同，我们可以选择不同的传值方式。本文将详细介绍如何在 uni-app 中传递单个或多个参数、数组和对象，并附上示例代码。

---

一、传递单个或多个参数

当我们只需要传递少量数据时，可以直接通过 URL 参数的形式进行传递。这种方法简单直观，适合传递基本数据类型（如字符串、数字等）。

示例代码

商品列表页（传递单个或多个参数）

// 商品列表页传递 id 跳转到相应的商品详情页面
getGoodsDetails(id) {
    uni.navigateTo({
        url: `/pages/goodsDetails?id=${id}`
    });
}

// 如果需要传递多个参数，使用 & 符号连接
getGoodsDetailsMultiParams(id, item) {
    uni.navigateTo({
        url: `/pages/goodsDetails?id=${id}&item=${item}`
    });
}

商品详情页（接收参数）

// 商品详情页通过 onLoad 生命周期接收传递过来的参数
onLoad(option) {
    console.log('上一个页面传递过来的参数', option);
    console.log('id', option.id);
    console.log('item', option.item);

    // 接下来可以根据传递的参数进行逻辑处理，比如通过 id 查询商品详情
    this.getGoodsDetailById(option.id);
}

二、传递数组或对象

当需要传递复杂数据（如数组或对象）时，由于 URL 的长度限制，直接通过 URL 参数传递会导致数据丢失或截断。此时，我们可以使用 JSON.stringify 将数据序列化为字符串，并通过 encodeURIComponent 进行编码，接收时再通过 JSON.parse 和 decodeURIComponent 进行解析。

示例代码

商品列表页（传递对象）

// item 为该列表的每一项的数据对象
getGoodsDetails(item) {
    // 使用 JSON.stringify 将对象转为字符串
    // 使用 encodeURIComponent 进行编码
    const itemStr = encodeURIComponent(JSON.stringify(item));
    
    uni.navigateTo({
        url: `/pages/goodsDetails?item=${itemStr}`
    });
}

商品详情页（接收对象）

// 在 onLoad 生命周期中接收传递过来的对象
onLoad(option) {
    // 使用 decodeURIComponent 解码
    // 使用 JSON.parse 解析为对象
    const item = JSON.parse(decodeURIComponent(option.item));
    console.log('上一个页面传递过来的参数对象', item);

    // 将对象数据赋值给 data 绑定的数据
    this.objData = item;

    // 接下来可以根据对象数据进行逻辑处理
    this.getGoodsDetailByItem(item);
}

三、注意事项

1. 传递数据的大小限制

   • URL 的长度有限制，传递的数据量不能过大，否则会导致数据丢失。
   • 当需要传递大量数据时，建议使用全局状态管理（如 Vuex）或本地存储（如 uni.setStorageSync）。

2. 数据类型转换

   • 在传递复杂数据（如数组或对象）时，必须使用 JSON.stringify 将其序列化为字符串，接收时再通过 JSON.parse 解析。

3. 编码与解码

   • 使用 encodeURIComponent 和 decodeURIComponent 可以避免特殊字符引起的传输问题。

---

四、示例代码总结

传递单个参数

// 商品列表页
getGoodsDetails(id) {
    uni.navigateTo({
        url: `/pages/goodsDetails?id=${id}`
    });
}

// 商品详情页
onLoad(option) {
    console.log('id', option.id);
}

传递多个参数

// 商品列表页
getGoodsDetailsMultiParams(id, item) {
    uni.navigateTo({
        url: `/pages/goodsDetails?id=${id}&item=${item}`
    });
}

// 商品详情页
onLoad(option) {
    console.log('id', option.id);
    console.log('item', option.item);
}

传递对象

// 商品列表页
getGoodsDetails(item) {
    const itemStr = encodeURIComponent(JSON.stringify(item));
    uni.navigateTo({
        url: `/pages/goodsDetails?item=${itemStr}`
    });
}

// 商品详情页
onLoad(option) {
    const item = JSON.parse(decodeURIComponent(option.item));
    console.log('item', item);
}

五、总结

在 uni-app 中，页面传值是开发过程中非常基础但重要的操作。根据数据量的不同，我们可以选择不同的传值方式：

1. 基本数据类型：使用 URL 参数传递（如 id、name 等）。
2. 复杂数据类型：使用 JSON.stringify 和 encodeURIComponent 进行编码，接收时通过 JSON.parse 和 decodeURIComponent 解析。