工具书写

utils简介

utils 是小程序专门用来存放公共可复用工具函数或 公共数据的目录，目的是避免代码冗余，方便多个页面、组件统一调用和维护，提升项目的可维护性。

其实就是把需要经常复用的方法封装到这一个代码中，这样不同页面都可以直接调用。

使用方法

写好js文件，再通过module.export来暴露给其他页面
下面是详细介绍

创建

在项目的根目录创建utils文件夹和utils.js，一般小程序项目模版里可能会有

写方法

存放公共可复用类

当你觉得一个方法或对象是全页面都有可能会使用到的时候就可以考虑将他写在utils里
这里我封装一个用来管理存储数据的对象作为示例

const storageUtil = {
  /**
   * 存储数据到本地
   * @param {String} key 存储键名（唯一标识）
   * @param {Any} data 要存储的数据（支持对象、数组等任意类型）
   */
  set(key, data) {
    try {
      const storageData = typeof data === 'object' ? JSON.stringify(data) : data;
      wx.setStorageSync(key, storageData);
    } catch (error) {
      console.error('本地存储失败：', error);
    }
  },

  /**
   * 从本地获取数据
   * @param {String} key 存储键名
   * @param {Any} defaultValue 获取失败/无数据时的默认返回值，默认 undefined
   * @returns {Any} 存储的数据（自动将 JSON 字符串转为对象/数组）
   */
  get(key, defaultValue) {
    try {
      const storageData = wx.getStorageSync(key);
      if (!storageData) {
        return defaultValue;
      }

      // 尝试将字符串转为 JSON 对象（处理存储的对象/数组）
      try {
        return JSON.parse(storageData);
      } catch (error) {
        // 转换失败说明存储的是普通字符串，直接返回
        return storageData;
      }
    } catch (error) {
      console.error('本地获取数据失败：', error);
      return defaultValue;
    }
  },

  /**
   * 删除本地指定键名的数据
   * @param {String} key 存储键名
   */
  remove(key) {
    try {
      wx.removeStorageSync(key);
    } catch (error) {
      console.error('删除本地数据失败：', error);
    }
  },

  /**
   * 清空本地所有存储数据
   */
  clear() {
    try {
      wx.showModal({
        title: '提示',
        content: '确定要清空所有本地数据吗？',
        success: (res) => {
          if (res.confirm) {
            wx.clearStorageSync();
            showToast({ title: '已清空所有本地数据' });
          }
        }
      });
    } catch (error) {
      console.error('清空本地数据失败：', error);
    }
  }
};

存放公共方法

方法的写法就和正常在页面中写一样

function showToast(options) {
  // 必传参数校验
  if (!options || !options.title) {
    console.error('Toast 提示：title 为必传参数');
    return;
  }
  // 默认配置
  const defaultConfig = {
    icon: 'none',
    duration: 1500,
    mask: false
  };
  // 调用小程序原生 Toast API
  wx.showToast(finalConfig);
}

存放复用数据

utils文件夹不仅可以用来封装方法，也可以单纯用来存储一些复用数据，例如我在小程序里需要对运动进行分类，存云数据库里虽然扩展性相对好些但是每次使用都要读取，把数据写死在每个页面中每次修改都要动到其他页面，那我就在uitils文件夹里面创建一个categories.js文件专门用于存储固定目录

const categories = [
    { name: '全部', icon: '' },
    { name: '跑步', icon: '🏃' },
    { name: '散步', icon: '🚶' },
    { name: '羽毛球', icon: '🏸' },
    { name: '篮球', icon: '🏀' },
    { name: '足球', icon: '⚽' },
    { name: '排球', icon: '🏐' },
    { name: '乒乓球', icon: '🏓' },
    { name: '网球', icon: '🎾' },
    { name: '游泳', icon: '🏊' },
    { name: '健身', icon: '🏋️' },

]

module.exports = {
    categories
}

我使用的时候就只需要导入这个类进行遍历就好了

暴露方法！！！（最重要）

最关键的就是要将写好的方法暴露出去
使用的是module.export

module.exports = {
  showToast,
  storageUtil
};

这样当我们在不同页面的要对本地存储进行修改的时候只需要导入从utils,使用其中的对象中的方法就可以了

使用

const util = require('../../utils/utils.js');这里的相对路径要根据自己的页面结构来写
根据自己需要再合适的位置使用语句
util.storageUtil.set('userName', '张三');
就可以实现调用了
方法的使用也是同理
util.showToast({ title: '已删除用户名数据' });