正文

微信小程序轻松调用公共JS方法，只需遵循这5步！

/0 浏览量
0413

在微信小程序开发中，有时候我们需要在不同的页面或者组件中复用一些JavaScript代码，这时候，使用公共JS文件就变得尤为重要。通过创建公共JS文件，我们可以轻松地在多个页面或组件中调用相同的函数，提高开发效率和代码的可维护性。下面，我将详细介绍如何在微信小程序中轻松调用公共JS方法，只需遵循以下5步：

第一步：创建公共JS文件

首先，在项目根目录下创建一个新的文件夹，命名为 utils（或者你喜欢的其他名字），然后在 utils 文件夹中创建一个 .js 文件，例如 common.js。在这个文件中，你可以定义你需要的公共函数。

// common.js
function hello() {
  console.log('Hello from common.js!');
}

第二步：在页面或组件中引入公共JS文件

接下来，在需要使用公共函数的页面或组件的JS文件中，引入刚刚创建的 common.js 文件。

// page.js
// 引入公共JS文件
const common = require('../../utils/common.js');

Page({
  onLoad: function() {
    // 调用公共函数
    common.hello();
  }
});

第三步：确保路径正确

在引入公共JS文件时，需要注意路径是否正确。微信小程序的文件路径遵循一定的规范，确保路径正确可以避免在编译时出现错误。

第四步：在页面或组件中调用公共函数

在页面或组件的JS文件中，引入公共JS文件后，就可以直接调用公共函数了。在上面的例子中，我们在 onLoad 生命周期函数中调用了 hello 函数。

第五步：在WXML文件中调用公共函数（可选）

如果你需要在WXML文件中调用公共函数，可以通过自定义组件或者使用 event 传递参数的方式来实现。

自定义组件调用

创建一个自定义组件，并在组件的JS文件中引入公共JS文件。

// custom-component.js
const common = require('../../utils/common.js');

Component({
  methods: {
    callHello() {
      common.hello();
    }
  }
});

在WXML文件中，绑定事件到自定义组件，并调用 callHello 方法。

<!-- custom-component.wxml -->
<button bindtap="callHello">Call Hello</button>

使用 event 传递参数

在公共JS文件中，定义一个接收参数的函数。

// common.js
function add(a, b) {
  return a + b;
}

在页面或组件的JS文件中，调用 add 函数，并通过 event 传递参数。

// page.js
Page({
  onLoad: function() {
    // 调用公共函数并传递参数
    const result = require('../../utils/common.js').add(1, 2);
    console.log(result); // 输出：3
  }
});

通过以上5步，你就可以在微信小程序中轻松地调用公共JS方法了。这样，不仅可以提高开发效率，还能让代码更加简洁、易维护。希望这篇文章能对你有所帮助！

-- 展开阅读全文 --