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

微信小程序两个js之间传值的方法有：全局变量、页面间传值、组件间传值和使用状态管理工具。 在这些方法中，全局变量是最基础且常用的方法，适用于传递一些公共信息。下面将详细介绍微信小程序中各个方法的具体实现与应用场景。

一、全局变量

1、定义全局变量

在微信小程序的app.js中，可以定义全局变量，这些变量在整个小程序生命周期内都可以被访问和修改。通过App()方法的globalData属性来定义全局变量。

// app.js
App({
  onLaunch: function() {
    // 初始化全局变量
    this.globalData = {
      userInfo: null,
      someData: 'Hello, World!'
    }
  },
  globalData: {}
})

2、访问全局变量

在具体的页面或组件中，可以通过getApp()方法来访问全局变量。

// pageA.js
Page({
  onLoad: function() {
    const app = getApp();
    console.log(app.globalData.someData); // 输出：Hello, World!
  }
})

3、修改全局变量

同样可以通过getApp()方法来修改全局变量。

// pageB.js
Page({
  onLoad: function() {
    const app = getApp();
    app.globalData.someData = 'Goodbye, World!';
  }
})

二、页面间传值

页面间传值一般通过页面跳转时传递参数来实现。

1、传递参数

在调用wx.navigateTo或者wx.redirectTo方法时，可以传递参数。

// pageA.js
wx.navigateTo({
  url: '/pages/pageB/pageB?data=Hello'
})

2、接收参数

在目标页面的onLoad方法中，可以通过options参数来接收传递过来的参数。

// pageB.js
Page({
  onLoad: function(options) {
    console.log(options.data); // 输出：Hello
  }
})

三、组件间传值

组件间传值可以通过properties和event来实现。

1、父组件传值给子组件

通过在子组件中定义properties，父组件传递数据给子组件。

// childComponent.js
Component({
  properties: {
    someData: {
      type: String,
      value: ''
    }
  }
})

// parentPage.js
Page({
  data: {
    someData: 'Hello from parent'
  }
})

在WXML中：

<!-- parentPage.wxml -->
<childComponent someData="{{someData}}" />

2、子组件传值给父组件

子组件通过触发事件来传递数据给父组件。

// childComponent.js
Component({
  methods: {
    sendData: function() {
      this.triggerEvent('myevent', { data: 'Hello from child' });
    }
  }
})

在父组件中监听事件：

<!-- parentPage.wxml -->
<childComponent bind:myevent="onMyEvent" />

// parentPage.js
Page({
  onMyEvent: function(e) {
    console.log(e.detail.data); // 输出：Hello from child
  }
})

四、使用状态管理工具

对于复杂的小程序，使用状态管理工具如Redux、MobX等可以更好地管理应用状态。

1、引入状态管理工具

以MobX为例，首先需要引入MobX。

// 安装MobX npm install mobx --save npm install mobx-miniprogram --save

2、定义状态管理

创建一个状态管理文件，例如store.js。

// store.js
import { observable } from 'mobx-miniprogram';
export const store = observable({
  someData: 'Hello from store',
  updateData(newData) {
    this.someData = newData;
  }
});

3、使用状态管理

在页面中引入并使用状态。

// pageA.js
import { store } from '../../store';
Page({
  onLoad: function() {
    console.log(store.someData); // 输出：Hello from store
  }
})

// pageB.js
import { store } from '../../store';
Page({
  onLoad: function() {
    store.updateData('Goodbye from store');
  }
})

五、总结

微信小程序两个js之间传值的方法主要有四种：全局变量、页面间传值、组件间传值和使用状态管理工具。全局变量适用于一些公共信息的传递，页面间传值通常通过页面跳转时传递参数，组件间传值主要通过properties和event来实现，而状态管理工具则适用于复杂的小程序状态管理。每种方法都有其适用的场景，根据实际需求选择合适的方法可以有效提高开发效率和代码维护性。

在实际开发中，使用研发项目管理系统PingCode和通用项目协作软件Worktile，可以更好地管理项目进度和团队协作，提高开发效率。