微信小程序如何引用全局js

微信小程序引用全局JS的方式有：利用app.js文件、通过模块化方式引入、在每个页面的js文件中引用。 推荐使用模块化方式引入，能够提高代码的可维护性和可读性。通过模块化，我们可以将通用功能封装到一个独立的文件中，然后在需要使用的地方引入，避免代码重复，提高开发效率。

一、利用app.js文件

在微信小程序中，app.js是应用的入口文件，负责监听并处理应用的生命周期函数。我们可以在app.js中定义全局的变量和方法，然后在其他页面或组件中通过getApp()方法获取应用实例，进而调用这些全局变量和方法。

1、定义全局变量和方法

// app.js
App({
  globalData: {
    userInfo: null,
    apiBaseUrl: "https://api.example.com"
  },
  onLaunch: function () {
    // 应用启动时的初始化逻辑
  },
  someGlobalMethod: function() {
    console.log("This is a global method");
  }
});

在上面的代码中，我们在app.js中定义了一个全局变量globalData，其中包含了用户信息和API基础URL，同时定义了一个全局方法someGlobalMethod。

2、在页面或组件中使用全局变量和方法

// pages/index/index.js
const app = getApp();
Page({
  onLoad: function() {
    console.log(app.globalData.apiBaseUrl);
    app.someGlobalMethod();
  }
});

在页面的onLoad函数中，我们通过getApp()方法获取应用实例，然后访问全局变量apiBaseUrl和调用全局方法someGlobalMethod。

二、通过模块化方式引入

模块化编程是一种将代码分离成独立、可重用的模块的编程范式。微信小程序中也支持这种方式，可以通过require和module.exports来实现。

1、创建模块文件

首先，我们创建一个独立的JS文件，用于封装通用功能，例如utils.js：

// utils.js
function formatTime(date) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':');
}
function formatNumber(n) {
  n = n.toString();
  return n[1] ? n : '0' + n;
}
module.exports = {
  formatTime: formatTime
};

在utils.js文件中，我们定义了一个formatTime函数，用于格式化日期，并通过module.exports将其导出。

2、在页面或组件中引用模块

// pages/index/index.js
const utils = require('../../utils.js');
Page({
  onLoad: function() {
    const currentTime = utils.formatTime(new Date());
    console.log(currentTime);
  }
});

在页面的onLoad函数中，我们通过require方法引入utils.js模块，并调用formatTime函数。

三、在每个页面的js文件中引用

有时候我们需要在每个页面中引用一些通用的JS功能，例如第三方库或工具函数。可以直接在每个页面的JS文件中通过require方法引入这些文件。

1、引入第三方库

假设我们需要在小程序中使用lodash库，可以在每个页面的JS文件中通过require方法引入：

// pages/index/index.js
const _ = require('../../libs/lodash.js');
Page({
  onLoad: function() {
    const array = [1, 2, 3, 4];
    const shuffledArray = _.shuffle(array);
    console.log(shuffledArray);
  }
});

在页面的onLoad函数中，我们通过require方法引入lodash库，然后调用其shuffle方法对数组进行洗牌操作。

四、确保代码的维护性和可读性

在实际项目中，代码的维护性和可读性非常重要。通过模块化编程可以将通用功能封装到独立的文件中，避免代码重复，提高代码的可维护性和可读性。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们可以帮助团队有效管理项目，提高开发效率。

1、研发项目管理系统PingCode

PingCode是一款专业的研发项目管理系统，提供了需求管理、缺陷管理、任务管理等功能，帮助团队有效管理研发过程，提高开发效率。

2、通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，提供了任务管理、文件共享、即时通讯等功能，帮助团队成员高效协作，共同完成项目目标。

五、总结

通过以上方法，我们可以在微信小程序中引用全局JS，提高代码的可维护性和可读性。无论是通过app.js定义全局变量和方法，还是通过模块化方式引入通用功能，亦或是在每个页面的JS文件中引用第三方库，都能够帮助我们更好地管理和组织代码。在实际项目中，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，帮助团队有效管理项目，提高开发效率。