小程序跨页面函数调用

方法一：

js函数文件：

此处注意一点：在export函数后面不要加逗号！虽然是在小程序里面，但是这是js文件，且不在page和component函数里面。

js调用文件中，调用函数任意多个。在export后使用let、var或const，在代码执行来讲都可以运行，但是const和let更遵循规范。常量使用const，变量使用let，而var就当废弃掉了(此处使用废弃或许不太合适，但是确实想不到更加合适的词语)。

js调用函数文件：

此处使用花括号是因为导出方式不同，导入方式也就不同。

这种导出方式，在导入时，是必须使用花括号的。而直接赋值的方式：

是不使用花括号的。

所以使用图一(js函数文件图)的方式，两种导出方法都可行。

方法二：

小程序跨页面函数调用通常涉及到几个关键步骤：定义函数、在页面间传递数据、调用函数。不过，直接跨页面调用函数并不是小程序框架直接支持的功能。相反，你通常需要通过全局状态管理（如使用 globalData）、事件总线（Event Bus）、或第三方状态管理库（如 Redux 或 MobX）来实现跨页面通信和数据共享。

步骤 1: 定义全局状态和数据

在 app.js 中定义全局状态和数据：

// app.js 
App({ 
globalData: { 
userInfo: null, 
// 其他全局数据... 
}, 


// 全局函数 
globalFunction: function(param) { 
// 这里是函数的实现 
console.log('全局函数被调用，参数是：', param); 
// 可以对全局数据进行操作 
this.globalData.userInfo = param; 
}, 


// 暴露全局函数给页面使用 
getGlobalFunction: function() { 
return this.globalFunction; 
} 
});

步骤 2: 在页面中使用全局函数

在任意页面中，你可以通过 getApp() 方法获取到 App 实例，然后调用其上的方法：

// pageA.js 
Page({ 
onLoad: function() { 
// 获取全局函数 
const globalFunction = getApp().getGlobalFunction(); 


// 调用全局函数 
globalFunction('Hello from Page A!'); 
}, 


// 其他页面逻辑... 
});

在另一个页面中，你也可以以相同的方式调用这个全局函数：

// pageB.js 
Page({ 
onLoad: function() { 
// 获取全局函数 
const globalFunction = getApp().getGlobalFunction(); 


// 调用全局函数 
globalFunction('Hello from Page B!'); 
}, 


// 其他页面逻辑... 
});

方法三：

除了使用全局状态管理（如 globalData）来实现跨页面函数调用外，小程序中还有其他几种常见的方式可以实现跨页面通信和数据共享。以下是几种其他方式的介绍和代码示例：

1. 事件总线（Event Bus）

事件总线模式允许不同页面通过发布和订阅事件来进行通信。你可以创建一个专门用于事件管理的模块，然后在不同页面中通过发布和监听事件来实现跨页面通信。

事件总线模块（eventBus.js）

const EventBus = {  
  // 存储事件的对象  
  events: {},  
    
  // 监听事件  
  on(eventName, callback) {  
    if (!this.events[eventName]) {  
      this.events[eventName] = [];  
    }  
    this.events[eventName].push(callback);  
  },  
    
  // 触发事件  
  emit(eventName, data) {  
    if (this.events[eventName]) {  
      this.events[eventName].forEach(callback => {  
        callback(data);  
      });  
    }  
  },  
    
  // 移除事件监听  
  off(eventName, callback) {  
    if (!eventName && !callback) {  
      // 移除所有事件  
      this.events = {};  
    } else if (!callback) {  
      // 移除指定事件的所有监听  
      this.events[eventName] = [];  
    } else {  
      // 移除指定事件的指定监听  
      const index = this.events[eventName].indexOf(callback);  
      if (index > -1) {  
        this.events[eventName].splice(index, 1);  
      }  
    }  
  }  
};  
  
module.exports = EventBus;

在页面中使用

// pageA.js  
const EventBus = require('path/to/eventBus');  
  
Page({  
  onLoad: function() {  
    // 监听事件  
    EventBus.on('customEvent', this.handleCustomEvent);  
  },  
    
  handleCustomEvent: function(data) {  
    console.log('Received custom event data:', data);  
  },  
    
  onUnload: function() {  
    // 页面卸载时移除事件监听  
    EventBus.off('customEvent', this.handleCustomEvent);  
  }  
});  
  
// pageB.js  
const EventBus = require('path/to/eventBus');  
  
Page({  
  someFunction: function() {  
    // 触发事件  
    EventBus.emit('customEvent', { message: 'Hello from Page B!' });  
  }  
});

注意事项

• 使用全局状态管理时，要注意避免过度使用或滥用，以免导致状态管理变得复杂和难以维护。
• 如果你的小程序项目变得复杂，可能需要考虑使用更高级的状态管理方案，如 Redux 或 MobX。
• 跨页面通信和数据共享也可以通过其他方式实现，如使用事件总线（Event Bus）或第三方库。选择哪种方式取决于你的项目需求和团队偏好。