微信小程序常用工具类和hooks

吸引人的标题

type

status

date

summary

微信小程序常用工具类和hooks

本文将介绍一些常用于微信小程序开发的工具类和hooks。

工具类

1. 时间处理工具类

时间处理在小程序开发中非常常见，可以使用以下工具类来简化时间处理：


class DateUtil {
  /**
   * 获取当前时间戳
   * @returns {number}
   */
  static getCurrentTimeStamp() {
    return new Date().getTime();
  }

  /**
   * 获取当前时间（yyyy-MM-dd HH:mm:ss）
   * @returns {string}
   */
  static getCurrentTime() {
    return new Date().toLocaleString();
  }

  /**
   * 时间戳转日期
   * @param {number} timeStamp 时间戳
   * @param {string} format 日期格式
   * @returns {string}
   */
  static timeStampToDate(timeStamp, format = 'yyyy-MM-dd HH:mm:ss') {
    const date = new Date(timeStamp);
    const o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'H+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds(),
      'q+': Math.floor((date.getMonth() + 3) / 3),
      'S': date.getMilliseconds(),
    };
    if (/(y+)/.test(format)) {
      format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (const k in o) {
      if (new RegExp('(' + k + ')').test(format)) {
        format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
      }
    }
    return format;
  }
}

2. 本地存储工具类

小程序开发中，本地存储是常用的一种数据存储方式。可以使用以下工具类来简化本地存储操作：


class StorageUtil {
  /**
   * 存储数据到本地
   * @param {string} key 键名
   * @param {any} data 数据
   */
  static set(key, data) {
    wx.setStorageSync(key, data);
  }

  /**
   * 从本地获取数据
   * @param {string} key 键名
   * @returns {any}
   */
  static get(key) {
    return wx.getStorageSync(key);
  }

  /**
   * 从本地删除数据
   * @param {string} key 键名
   */
  static remove(key) {
    wx.removeStorageSync(key);
  }

  /**
   * 清空本地存储
   */
  static clear() {
    wx.clearStorageSync();
  }
}

Hooks

1. useRequest

useRequest是一个常用的自定义hook，用于处理接口请求。可以使用以下代码来实现：


import { useState, useEffect } from 'react';

function useRequest(url) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    wx.request({
      url,
      success: (res) => {
        setData(res.data);
      },
      fail: (error) => {
        setError(error);
      },
      complete: () => {
        setLoading(false);
      },
    });
  }, [url]);

  return {
    loading,
    data,
    error,
  };
}

export default useRequest;

2. useLocalStorage

useLocalStorage是一个常用的自定义hook，用于处理本地存储。可以使用以下代码来实现：


import { useState, useEffect } from 'react';
import StorageUtil from './StorageUtil';

function useLocalStorage(key, defaultValue = null) {
  const [value, setValue] = useState(() => {
    const storageValue = StorageUtil.get(key);
    return storageValue !== undefined ? storageValue : defaultValue;
  });

  useEffect(() => {
    if (value === null) {
      StorageUtil.remove(key);
    } else {
      StorageUtil.set(key, value);
    }
  }, [key, value]);

  return [value, setValue];
}

export default useLocalStorage;

以上就是本文介绍的微信小程序常用工具类和hooks，希望能够对小程序开发有所帮助。