小程序模板:专业的小程序模板与静态模板分享平台
小程序
教程
搜索
当前位置 : 首页> 小程序教程> 微信小程序怎么封装方法并全局调用

微信小程序怎么封装方法并全局调用

 1:使用 App 实例封装全局方法

// app.js
App({
  // 定义全局方法
  globalMethod: function(param) {
    console.log("这是全局方法,参数是:", param);
    return "方法执行成功";
  },
  onLaunch() {
    // 小程序启动时可以执行一些初始化逻辑
  }
});

在页面或组件中调用全局方法,通过 getApp() 获取 App 实例,然后调用全局方法。

// pages/index/index.js
const app = getApp();

Page({
  onLoad() {
    // 调用全局方法
    const result = app.globalMethod("Hello, WeChat Mini Program!");
    console.log(result); // 输出: 方法执行成功
  }
});


 2:使用 Behavior(行为)封装全局方法

Behavior 是微信小程序提供的一种复用代码的方式,可以将公共方法封装到 Behavior 中,然后在多个页面或组件中使用。

// utils/globalBehavior.js
export const globalBehavior = Behavior({
  methods: {
    // 定义全局方法
    globalMethod(param) {
      console.log("这是全局方法,参数是:", param);
      return "方法执行成功";
    }
  }});


在页面或组件中引入 Behavior,并调用封装的方法。

// pages/index/index.js
import { globalBehavior } from '../../utils/globalBehavior.js';Page({
  behaviors: [globalBehavior], // 引入 Behavior
  onLoad() {
    // 调用全局方法
    const result = this.globalMethod("Hello, WeChat Mini Program!");
    console.log(result); // 输出: 方法执行成功
  }});


3:使用模块化封装(推荐)

如果你只需要封装一些工具方法(如日期处理、数据格式化等),可以使用模块化的方式,将方法封装到单独的文件中。

创建一个 utils/globalMethods.js 文件,定义公共方法。

// utils/globalMethods.js
export function globalMethod(param) {
  console.log("这是全局方法,参数是:", param);
  return "方法执行成功";}
// pages/index/index.js
import { globalMethod } from '../../utils/globalMethods.js';Page({
  onLoad() {
    // 调用全局方法
    const result = globalMethod("Hello, WeChat Mini Program!");
    console.log(result); // 输出: 方法执行成功
  }});

总结

方式适用场景优点缺点
App 实例需要全局调用的方法简单易用,适合小型项目全局变量污染,不利于维护
Behavior(行为)需要在多个页面或组件中复用的方法代码复用性强,适合中大型项目需要额外引入 Behavior
模块化封装仅需要封装工具方法(如日期处理、格式化等)模块化,代码清晰,适合工具类方法需要手动导入模块

推荐使用 模块化封装 的方式,因为它更加清晰、易于维护,且不会污染全局命名空间。

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了