微信小程序js 之间如何传值

微信小程序中JS之间传值主要依靠页面间的参数传递、全局变量、数据缓存和事件监听等方法。其中，页面间的参数传递是最常用的一种方式，具体通过navigateTo、redirectTo等方法将参数传递到目标页面，并在目标页面通过onLoad函数接收参数。接下来，我们将详细介绍这些方法及其应用场景。

一、页面间的参数传递

页面间参数传递是微信小程序中最常用的传值方法之一。通过在页面跳转时传递参数，可以让目标页面接收到数据并进行相应的处理。

1. navigateTo 和 redirectTo 方法

在微信小程序中，navigateTo和redirectTo方法用于页面跳转，同时可以携带参数。navigateTo用于保留当前页面，redirectTo用于关闭当前页面。

// 在当前页面进行跳转
wx.navigateTo({
  url: '/pages/target/target?param1=value1&param2=value2'
});

在目标页面的onLoad函数中接收参数：

Page({
  onLoad: function(options) {
    console.log(options.param1); // 输出 value1
    console.log(options.param2); // 输出 value2
  }
});

2. switchTab 方法

switchTab方法用于跳转到 tabBar 页面，虽然不能直接传递参数，但可以通过globalData等其他方式传递。

wx.switchTab({
  url: '/pages/tabBarPage/tabBarPage'
});

二、全局变量

全局变量是另一种常用的传值方法，特别适用于需要在多个页面间共享数据的场景。微信小程序提供了App实例的globalData对象来存储全局数据。

1. 设置全局变量

在app.js中定义全局变量：

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

2. 使用全局变量

在页面中访问和修改全局变量：

const app = getApp();
app.globalData.sharedData = { key: 'value' };
// 在其他页面中使用
const sharedData = app.globalData.sharedData;
console.log(sharedData.key); // 输出 value

三、数据缓存

微信小程序提供了数据缓存功能，通过wx.setStorageSync和wx.getStorageSync方法，可以在不同页面间传递数据。

1. 设置数据缓存

在一个页面中设置数据缓存：

wx.setStorageSync('key', 'value');

2. 获取数据缓存

在另一个页面中获取数据缓存：

const value = wx.getStorageSync('key');
console.log(value); // 输出 value

四、事件监听

事件监听是一种高级的传值方法，适用于需要监听和响应特定事件的场景。微信小程序提供了EventChannel对象来实现事件传递。

1. 触发事件

在页面跳转时传递事件：

wx.navigateTo({
  url: '/pages/target/target',
  events: {
    acceptDataFromOpenerPage: function(data) {
      console.log(data); // 输出 { key: 'value' }
    }
  },
  success: function(res) {
    res.eventChannel.emit('acceptDataFromOpenerPage', { key: 'value' });
  }
});

2. 监听事件

在目标页面中监听事件：

Page({
  onLoad: function(options) {
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data); // 输出 { key: 'value' }
    });
  }
});

五、通过组件传值

微信小程序还支持通过组件传递数据。在父子组件间传递数据，可以使用properties和data对象。

1. 父组件传递数据给子组件

在父组件中定义数据，并通过属性传递给子组件：

// parent.wxml
<child-component key="value"></child-component>

// child.js
Component({
  properties: {
    key: {
      type: String,
      value: ''
    }
  },
  data: {},
  methods: {}
});

2. 子组件传递数据给父组件

子组件可以通过触发自定义事件将数据传递给父组件：

// child.js
Component({
  properties: {},
  data: {},
  methods: {
    sendData: function() {
      this.triggerEvent('myevent', { key: 'value' });
    }
  }
});

在父组件中监听自定义事件：

// parent.wxml
<child-component bind:myevent="handleEvent"></child-component>

// parent.js
Page({
  handleEvent: function(event) {
    console.log(event.detail.key); // 输出 value
  }
});

六、开发中常见的传值场景

1. 用户登录信息传递

在用户登录后，将用户信息传递到不同页面是非常常见的场景。可以使用全局变量或者数据缓存。

// 用户登录后设置全局变量
const app = getApp();
app.globalData.userInfo = userInfo;
// 在其他页面中获取用户信息
const userInfo = app.globalData.userInfo;
console.log(userInfo);

2. 表单数据传递

在表单提交后，将数据传递到确认页面进行展示：

// 表单页面
wx.navigateTo({
  url: '/pages/confirm/confirm?name=John&age=30'
});
// 确认页面
Page({
  onLoad: function(options) {
    this.setData({
      name: options.name,
      age: options.age
    });
  }
});

七、推荐的项目管理工具

在开发微信小程序时，使用高效的项目管理工具可以大大提升团队的协作效率。推荐以下两个系统：

1. 研发项目管理系统PingCode

PingCode是一款专为研发团队设计的项目管理工具，提供了需求管理、缺陷跟踪、测试管理等功能，适合微信小程序等软件开发项目。

2. 通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，支持任务管理、时间跟踪、团队协作等功能，适合不同类型的项目管理需求。

通过上述方法，可以在微信小程序开发过程中实现JS之间的高效传值，确保数据的准确传递和处理，从而提高开发效率和用户体验。