uniapp小程序基础功能封装

news/2024/7/20 2:16:49 标签: uni-app, 小程序, 前端, javascript, js

在utils文件中创建一个公共的封装文件 index.js

uni.showToast 的封装

export const toast = (text) => {
	return uni.showToast({
			title: text,
			icon: 'none',
			duration: 2000
	})
}

uni.showLoading 的封装

export function showLoading(text = '加载中...', delay = 0) {
	uni.showLoading({
		title: text,
		mask: true,
		delay: delay
	})
}

uni.hideLoading的封装

export async function hideLoading() {
  return await uni.hideLoading();
}

token判断是否登录

export function hasLogin() {
	if (storage.get('token')) {
			return true
	} else {
			return false
	}
}

//  storage  缓存的封装   可以查看我storage这边文章内容

时间戳格式化

/**
 * @param {*} stamp 10-13位时间戳
 * @param {*} format 格式
 */
export function stampFormat(stamp, format = "YY-MM-DD hh:mm:ss") {
  if (!stamp || !format) {
    return "";
  }
  let date = new Date();
  if (typeof stamp === 'string' || typeof stamp === "number") {
    if ((stamp || '').toString().length === 10 || (/\./g.test((stamp || "").toString()) && (stamp || '').toString().length === 14)) {
      stamp *= 1000;
    }
    date = new Date(stamp);
  } else {
    date = stamp;
  }
  let YY = date.getFullYear();
  let MM = date.getMonth() + 1;
  let DD = date.getDate();
  let hh = date.getHours();
  let mm = date.getMinutes();
  let ss = date.getSeconds();
  /** 小于10的数转为 02 这种字符串 */
  const numberDouble = (num) => {
		return num >= 0 && num < 10 ? `0${num}` : num.toString();
	}
  return format
    .replace(/YY/g, numberDouble(YY))
    .replace(/MM/g, numberDouble(MM))
    .replace(/DD/g, numberDouble(DD))
    .replace(/hh/g, numberDouble(hh))
    .replace(/mm/g, numberDouble(mm))
    .replace(/ss/g, numberDouble(ss));
}

格式化日期格式 (用于兼容ios Date对象)

export const formatDate = (time) => {
  // 将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 
  return time.replace(/\-/g, "/");
}

遍历对象

export const objForEach = (obj, callback) => {
  Object.keys(obj).forEach((key) => {
    callback(obj[key], key)
  });
}

是否在数组内

export const inArray = (search, array) => {
  for (var i in array) {
    if (array[i] == search) return true
  }
  return false
}

判断是否为对象

/**
 * 判断是否为对象
 * @param {*} object
 */
export const isObject = (object) => {
  return Object.prototype.toString.call(object) === '[object Object]'
}

判断是否为空对象

/**
 * 判断是否为空对象
 * @param {*} object 源对象
 */
export const isEmptyObject = (object) => {
  return Object.keys(object).length === 0
}

判断是否为数组

/**
 * 判断是否为数组
 * @param {*} array
 */
export const isArray = (array) => {
  return Object.prototype.toString.call(array) === '[object Array]'
}

判断是否为空

/**
 * 判断是否为空
 * @param {*} object 源对象
 */
export const isEmpty = (value) => {
  if (isArray(value)) {
    return value.length === 0
  }
  if (isObject(value)) {
    return isEmptyObject(value)
  }
  return !value
}

将 Date 转化为指定格式的String

/**
 * 对Date的扩展,将 Date 转化为指定格式的String
 * 月(Y)、月(m)、日(d)、小时(H)、分(M)、秒(S) 可以用 1-2 个占位符,
 * 例子:
 * dateFormat('YYYY-mm-dd HH:MM:SS', new Date()) ==> 2020-01-01 08:00:00
 */
export const dateFormat = (fmt, date) => {
  const opt = {
    "Y+": date.getFullYear().toString(), // 年
    "m+": (date.getMonth() + 1).toString(), // 月
    "d+": date.getDate().toString(), // 日
    "H+": date.getHours().toString(), // 时
    "M+": date.getMinutes().toString(), // 分
    "S+": date.getSeconds().toString() // 秒
    // 有其他格式化字符需求可以继续添加,必须转化成字符串
  };
  let ret
  for (let k in opt) {
    ret = new RegExp("(" + k + ")").exec(fmt)
    if (ret) {
      fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
    };
  };
  return fmt
}

如有小伙伴想学习了解更多前端知识,可以关注我的公众号  codefuzi  一起成长


http://www.niftyadmin.cn/n/5386807.html

相关文章

船舶制造5G智能工厂数字孪生可视化平台,推进船舶行业数字化转型

船舶制造5G智能工厂数字孪生可视化平台&#xff0c;推进船舶行业数字化转型。随着数字化时代的到来&#xff0c;船舶行业正面临着前所未有的机遇与挑战。为了适应这一变革&#xff0c;船舶制造企业需要加快数字化转型的步伐&#xff0c;提高生产效率、降低成本并增强市场竞争力…

迈向三维:vue3+Cesium.js三维WebGIS项目实战--持续更新中

写在前面&#xff1a;随着市场对数字孪生的需求日益增多&#xff0c;对于前端从业者的能力从对框架vue、react的要求&#xff0c;逐步扩展到2D、3D空间的交互&#xff0c;为用户提供更紧密的立体交互。近年来前端对GIS的需求日益增多。本文将记录WebGIS的学习之旅&#xff0c;从…

(十一)【Jmeter】线程(Threads(Users))之setUp 线程组

简述 操作路径如下: 作用:在正式测试开始前执行预加载或预热操作,为测试做准备。配置:设置预加载或预热操作的采样器、循环次数等参数。使用场景:确保在正式测试开始前应用程序已经达到稳定状态,减少测试结果的偏差。优点:提供预加载或预热操作,确保测试的准确性。缺…

【力扣 - 二叉树的直径】

题目描述 给你一棵二叉树的根节点&#xff0c;返回该树的 直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。这条路径可能经过也可能不经过根节点 root 。 两节点之间路径的 长度 由它们之间边数表示。 提示&#xff1a; 树中节点数目在范围 [1, 10000] 内…

Sora 使用教程,新手小白可用

Sora 使用教程&#xff0c;新手小白可用 参考文章&#xff1a;Sora 使用教程&#xff0c;OpenAI 的文生视频模型 为了在激烈的行业竞争中保持领先地位&#xff0c;OpenAI 在 2024 年 2 月 15 日发布了其革命性的文本至视频转换模型——Sora。这个先进的工具能够将文本描述转化…

HTML+CSS+JS:花瓣登录组件

效果演示 实现了一个具有动态花朵背景和简洁登录框的登录页面效果。 Code <section><img src"./img/background.jpeg" class"background"><div class"login"><h2>Sign In</h2><div class"inputBox"…

几个常见的C/C++语言冷知识

当涉及到C/C语言时&#xff0c;有一些冷知识可能并不为人所熟知&#xff0c;但却可以让你更深入地理解这门古老而强大的编程语言。以下是一些有趣的C/C语言冷知识。 1. 数组的下标可以是负数 在我们日常的C语言编程中&#xff0c;数组是一个非常常见的数据结构。我们习惯性地使…

react实现拖拽的插件

插件一&#xff1a;dnd-kit 插件官网链接https://docs.dndkit.com/introduction/installation 插件二&#xff1a;react-beautiful-dnd https://github.com/atlassian/react-beautiful-dnd/tree/master 两个插件的区别&#xff1a; 插件一可以做到从区域A拖住到区域B 插件二…