小程序开发之 navigator 传值

在小程序开发中,navigator 组件提供了页面之间跳转的功能，同时也支持传值，通过 navigator 传值，我们可以在不同的页面之间传递参数，实现页面之间的数据交互，本文将详细介绍小程序开发中 navigator 传值的方法和使用场景。

基础用法

在小程序中,使用 navigator 组件进行页面跳转，并传递参数，需要设置url属性和query属性。url属性用于指定跳转的目标页面路径，query属性用于传递参数，示例代码如下：

// pages/detail/detail?id=1&name=张三
<navigator url="/pages/detail/detail?id=1&name=张三" />

在上述代码中,/pages/detail/detail为目标页面路径，后面的部分为参数，id和name为参数名，1和张三为参数值，在目标页面中，可以通过onLoad生命周期函数获取参数，示例代码如下：

// pages/detail/detail.js
Page({
  onLoad: function(options) {
    // 获取参数
    const id = options.id;
    const name = options.name;
    console.log('参数:', id, name);
  }
})

在上述代码中,通过options对象获取传递的参数，options.id获取id参数的值，options.name获取name参数的值。

动态传值

在实际开发中,可能需要根据不同的条件动态传递参数，此时可以使用data属性来传递参数，示例代码如下：

// pages/detail/detail?id=1&name=张三
<navigator url="/pages/detail/detail?id=1&name=张三" data="{{id: 2, name: '李四'}}">

在上述代码中,使用data属性传递了一个对象，对象的属性名作为参数名，属性值作为参数值，在目标页面中，可以通过onLoad生命周期函数获取参数，示例代码如下：

// pages/detail/detail.js
Page({
  onLoad: function(options) {
    // 获取参数
    const id = options.id;
    const name = options.name;
    console.log('参数:', id, name);
  }
})

在上述代码中,通过options对象获取传递的参数，options.id获取id参数的值，options.name获取name参数的值。

传递对象

在实际开发中,可能需要传递一个对象作为参数，此时可以使用JSON.stringify方法将对象转换为字符串，再传递给目标页面，示例代码如下：

// pages/detail/detail?id=1&name=张三
<navigator url="/pages/detail/detail?id=1&name=张三" data="{{obj: JSON.stringify({ id: 2, name: '李四' })}}">

在上述代码中,使用JSON.stringify方法将对象转换为字符串，再使用data属性传递给目标页面，在目标页面中，可以通过onLoad生命周期函数获取参数，示例代码如下：

// pages/detail/detail.js
Page({
  onLoad: function(options) {
    // 获取参数
    const obj = JSON.parse(options.data.obj);
    console.log('参数:', obj.id, obj.name);
  }
})

在上述代码中,通过options.data.obj获取传递的参数，使用JSON.parse方法将字符串转换为对象，再通过obj.id和obj.name获取id和name参数的值。

传递函数

在实际开发中,可能需要传递一个函数作为参数，此时可以使用JSON.stringify方法将函数转换为字符串，再传递给目标页面，示例代码如下：

// pages/detail/detail?id=1&name=张三
<navigator url="/pages/detail/detail?id=1&name=张三" data="{{func: JSON.stringify(function() { console.log('函数被调用了'); })}}">

在上述代码中,使用JSON.stringify方法将函数转换为字符串，再使用data属性传递给目标页面，在目标页面中，可以通过onLoad生命周期函数获取参数，示例代码如下：

// pages/detail/detail.js
Page({
  onLoad: function(options) {
    // 获取参数
    const func = JSON.parse(options.data.func);
    func();
  }
})

在上述代码中,通过options.data.func获取传递的参数，使用JSON.parse方法将字符串转换为函数，再通过func()调用函数。

本文详细介绍了小程序开发中navigator组件传值的方法和使用场景，包括基础用法、动态传值、传递对象和传递函数，通过navigator传值，我们可以在不同的页面之间传递参数，实现页面之间的数据交互，在实际开发中，根据具体需求选择合适的传值方式，可以提高代码的可读性和可维护性。