小程序怎么写公用js

小程序写公用JS的步骤包括：创建公共JS文件、在需要的页面引用、封装常用函数、模块化管理代码。下面详细描述如何实现这一过程。

一、创建公共JS文件

为了在小程序的各个页面中使用公共的JS代码，我们首先需要创建一个公共JS文件。通常，这个文件会放在utils目录中，并命名为common.js。在这个文件中，我们可以定义我们希望在多个页面中复用的函数和变量。

// utils/common.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
}

解释：上述代码定义了一个时间格式化函数formatTime，并将其导出，以便在其他文件中引用。

二、在需要的页面引用

在需要使用公共JS代码的页面中，我们可以通过require关键字来引入公共JS文件。

// pages/index/index.js
const common = require('../../utils/common.js');
Page({
  data: {
    time: ''
  },
  onLoad: function () {
    const currentTime = common.formatTime(new Date());
    this.setData({
      time: currentTime
    });
  }
});

解释：在上面的代码中，我们在pages/index/index.js页面中引入了utils/common.js文件，并使用common.formatTime函数来格式化当前时间。

三、封装常用函数

公共JS文件的主要作用是封装常用函数，从而避免代码重复，提高代码的可维护性。例如，我们可以在common.js文件中添加更多常用的函数，如API请求、数据格式转换等。

// utils/common.js
const 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(':');
};
const formatNumber = (n) => {
  n = n.toString();
  return n[1] ? n : '0' + n;
};
const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: method,
      data: data,
      success: (res) => {
        resolve(res.data);
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};
module.exports = {
  formatTime: formatTime,
  request: request
};

解释：在上面的代码中，我们添加了一个request函数，用于封装API请求。

四、模块化管理代码

随着项目的不断扩大，公共JS文件中的代码可能会越来越多，此时我们可以将不同功能的代码分模块管理。例如，将时间格式化相关的代码放在time.js中，将API请求相关的代码放在api.js中。

// utils/time.js
const 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(':');
};
const formatNumber = (n) => {
  n = n.toString();
  return n[1] ? n : '0' + n;
};
module.exports = {
  formatTime: formatTime
};
// utils/api.js
const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: method,
      data: data,
      success: (res) => {
        resolve(res.data);
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
};
module.exports = {
  request: request
};

解释：在上面的代码中，我们将时间格式化相关的代码放在time.js中，将API请求相关的代码放在api.js中。

五、综合应用示例

下面是一个综合应用示例，展示如何在小程序的不同页面中引用和使用公共JS文件中的函数。

// pages/index/index.js
const time = require('../../utils/time.js');
const api = require('../../utils/api.js');
Page({
  data: {
    time: '',
    data: null
  },
  onLoad: function () {
    const currentTime = time.formatTime(new Date());
    this.setData({
      time: currentTime
    });
    api.request('https://api.example.com/data', 'GET', {})
      .then((data) => {
        this.setData({
          data: data
        });
      })
      .catch((err) => {
        console.error(err);
      });
  }
});

解释：在上面的代码中，我们在pages/index/index.js页面中分别引入了utils/time.js和utils/api.js文件，并使用它们提供的函数来格式化时间和请求数据。

六、总结

通过创建公共JS文件、在需要的页面引用、封装常用函数和模块化管理代码，我们可以在小程序中高效地管理和复用代码。这样做不仅可以减少代码重复，提高代码的可维护性，还能使我们的代码结构更加清晰，便于团队协作。

推荐工具：在项目团队管理方面，可以使用研发项目管理系统PingCode和通用项目协作软件Worktile来提升团队的协作效率和项目管理水平。