小程序里面怎么加入自己写的js

小程序里面加入自己写的JS的核心步骤有：创建JS文件、引入JS文件、在页面中调用函数、模块化管理。 在实际操作中，最重要的是模块化管理，它不仅提高了代码的可维护性，还能提升小程序的运行效率。模块化管理是指将不同功能的代码分离到不同的模块中，通过引入和调用这些模块，实现功能的分离和代码的复用。下面将详细解释如何在小程序中加入自己写的JS，以及如何有效地进行模块化管理。

一、创建JS文件

首先，我们需要在项目中创建一个新的JS文件，例如utils.js，用于存放我们自定义的JavaScript函数。这些函数可以是一些常用的工具函数，也可以是一些具体的业务逻辑。

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

二、引入JS文件

在需要使用这些函数的页面中，通过require引入刚才创建的JS文件。例如，我们在index.js中引入utils.js。

// index.js
const utils = require('../../utils/utils.js')
Page({
  data: {},
  onLoad: function () {
    const time = utils.formatTime(new Date())
    console.log(time)
  }
})

三、在页面中调用函数

在页面的生命周期函数或事件处理函数中调用引入的JS文件中的函数。例如，上面的代码在页面加载时调用了formatTime函数，并将结果输出到控制台。

四、模块化管理

模块化管理是指将不同功能的代码分离到不同的模块中，通过引入和调用这些模块，实现功能的分离和代码的复用。小程序支持CommonJS规范，可以通过module.exports和require来实现模块化。

1. 工具函数模块

工具函数可以放在一个单独的文件中，例如utils.js，然后在需要的地方引入。

// utils.js
function add(a, b) {
  return a + b;
}
module.exports = {
  add: add
}

2. 网络请求模块

网络请求相关的代码可以放在一个单独的文件中，例如api.js，然后在需要的地方引入。

// api.js
const baseUrl = 'https://api.example.com';
function fetchData(endpoint) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${baseUrl}/${endpoint}`,
      success: (res) => resolve(res.data),
      fail: (err) => reject(err)
    });
  });
}
module.exports = {
  fetchData: fetchData
}

3. 数据处理模块

数据处理相关的代码可以放在一个单独的文件中，例如data.js，然后在需要的地方引入。

// data.js
function processData(data) {
  // 数据处理逻辑
  return processedData;
}
module.exports = {
  processData: processData
}

4. 页面中引入模块

在页面中，通过require引入这些模块，然后在生命周期函数或事件处理函数中调用。

// index.js
const utils = require('../../utils/utils.js');
const api = require('../../utils/api.js');
const data = require('../../utils/data.js');
Page({
  data: {},
  onLoad: function () {
    api.fetchData('endpoint')
      .then((res) => {
        const processedData = data.processData(res);
        this.setData({
          data: processedData
        });
      })
      .catch((err) => {
        console.error(err);
      });
  }
});

五、最佳实践

1. 使用ES6语法

在小程序中可以使用ES6语法，例如import和export，来实现模块化管理。

// utils.js
export function add(a, b) {
  return a + b;
}
// index.js
import { add } from '../../utils/utils.js';
Page({
  data: {},
  onLoad: function () {
    const result = add(1, 2);
    console.log(result);
  }
});

2. 使用Promise

在处理异步操作时，建议使用Promise，能够让代码更加简洁和易读。

// api.js
const baseUrl = 'https://api.example.com';
export function fetchData(endpoint) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${baseUrl}/${endpoint}`,
      success: (res) => resolve(res.data),
      fail: (err) => reject(err)
    });
  });
}
// index.js
import { fetchData } from '../../utils/api.js';
Page({
  data: {},
  onLoad: function () {
    fetchData('endpoint')
      .then((res) => {
        this.setData({
          data: res
        });
      })
      .catch((err) => {
        console.error(err);
      });
  }
});

3. 使用项目管理工具

在团队协作中，推荐使用专业的项目管理工具来提升开发效率和团队协作。研发项目管理系统PingCode和通用项目协作软件Worktile是两个非常不错的选择。PingCode专注于研发项目的管理，提供了丰富的功能来支持敏捷开发和团队协作。而Worktile则是一个通用的项目协作工具，适用于各种类型的项目和团队。

六、总结

通过以上步骤，我们可以在小程序中轻松加入自己写的JS，并且通过模块化管理提高代码的可维护性和运行效率。创建JS文件、引入JS文件、在页面中调用函数、模块化管理是实现这一目标的关键步骤。希望本文的详细介绍能够帮助你在实际开发中更好地管理和使用JavaScript代码。