小程序传值方式详解：页面参数、全局变量、事件、本地存储

小程序开发中，不同页面之间的数据交互是常见的需求。本文将详细介绍四种常用的传值方式，帮助开发者选择合适的传值方法，提升开发效率。

1. 通过页面参数传值

可以在跳转页面时通过 url 的 query 参数，将值传递给下一个页面。例如，在 index.js 中跳转到 detail.js 页面时，可以将商品 ID 传递过去：

wx.navigateTo({  
  url: '/pages/detail/detail?id=' + goodsId  
});

在 detail.js 中，可以通过 wx.getCurrentPages() 获取当前页面栈，并获取上一个页面的 query 参数：

const pages = getCurrentPages();
const prevPage = pages[pages.length - 2];
const goodsId = prevPage.options.id;

2. 通过全局变量传值

可以通过在 App.js 中定义全局变量，将值存储在全局变量中，在任何页面中都可以访问到。例如，可以将用户登录信息存储在全局变量中：

App({  
  globalData: {  
    userInfo: null  
  }  
});

在任何页面中都可以通过 getApp().globalData.userInfo 访问到全局变量。

3. 通过事件传值

可以通过自定义事件传递数据，将数据以事件参数的形式传递给父组件，由父组件进行处理。例如，在子组件中触发一个事件，并将数据作为参数传递给父组件：

// 子组件
Component({  
  methods: {  
    handleClick() {  
      this.triggerEvent('myEvent', {  
        data: 'hello world'  
      });  
    }  
  }  
});

// 父组件
Component({  
  methods: {  
    handleMyEvent(event) {  
      console.log(event.detail.data); // 输出 'hello world'  
    }  
  }  
});

4. 通过本地存储传值

可以将数据存储在本地存储中，在任何页面中都可以访问到。例如，可以将用户的登录状态存储在本地存储中：

wx.setStorageSync('isLogin', true);

在任何页面中都可以通过 wx.getStorageSync('isLogin') 访问到存储的数据。

小结

本文介绍了小程序中常用的四种传值方式，开发者可以根据实际情况选择合适的传值方法。

页面参数传值适用于简单的页面间传值。
全局变量传值适用于需要在多个页面共享数据的场景。
事件传值适用于父子组件之间的数据交互。
本地存储传值适用于需要持久化保存数据的场景。