记录日常开发的总结,包含vuex,全局方法,http请求,组件等等

此公共方法来自于 uviewUI

一: 创建common文件夹

目录结构

common
  -----|    libs
       |--------------------|   timeFrom.js
       |--------------------|	timeFormat.js
  -----|    index.js

index.js 内容

	// 时间格式化
	import timeFormat from './libs/timeFormat.js'
	// 时间戳格式化,返回多久之前
	import timeFrom from './libs/timeFrom.js'
	
	const $u = {
		timeFormat,
		timeFrom, // 另名date
	}
	
	export default {
		$u
	}

timeFrom.js

import timeFormat from '../../libs/function/timeFormat.js';

/**
 * 时间戳转为多久之前
 * @param String timestamp 时间戳
 * @param String | Boolean format 如果为时间格式字符串，超出一定时间范围，返回固定的时间格式；
 * 如果为布尔值false，无论什么时间，都返回多久以前的格式
 */
function timeFrom(dateTime = null, format = 'yyyy-mm-dd') {
	// 如果为null,则格式化当前时间
	if (!dateTime) dateTime = Number(new Date());
	// 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式
	if (dateTime.toString().length == 10) dateTime *= 1000;
	let timestamp = + new Date(Number(dateTime));

	let timer = (Number(new Date()) - timestamp) / 1000;
	// 如果小于5分钟,则返回"刚刚",其他以此类推
	let tips = '';
	switch (true) {
		case timer < 300:
			tips = '刚刚';
			break;
		case timer >= 300 && timer < 3600:
			tips = parseInt(timer / 60) + '分钟前';
			break;
		case timer >= 3600 && timer < 86400:
			tips = parseInt(timer / 3600) + '小时前';
			break;
		case timer >= 86400 && timer < 2592000:
			tips = parseInt(timer / 86400) + '天前';
			break;
		default:
			// 如果format为false，则无论什么时间戳，都显示xx之前
			if(format === false) {
				if(timer >= 2592000 && timer < 365 * 86400) {
					tips = parseInt(timer / (86400 * 30)) + '个月前';
				} else {
					tips = parseInt(timer / (86400 * 365)) + '年前';
				}
			} else {
				tips = timeFormat(timestamp, format);
			}
	}
	return tips;
}

export default timeFrom;

timeFormat.js

	// padStart 的 polyfill，因为某些机型或情况，还无法支持es7的padStart，比如电脑版的微信小程序
// 所以这里做一个兼容polyfill的兼容处理
if (!String.prototype.padStart) {
	// 为了方便表示这里 fillString 用了ES6 的默认参数，不影响理解
	String.prototype.padStart = function(maxLength, fillString = ' ') {
		if (Object.prototype.toString.call(fillString) !== "[object String]") throw new TypeError(
			'fillString must be String')
		let str = this
		// 返回 String(str) 这里是为了使返回的值是字符串字面量，在控制台中更符合直觉
		if (str.length >= maxLength) return String(str)

		let fillLength = maxLength - str.length,
			times = Math.ceil(fillLength / fillString.length)
		while (times >>= 1) {
			fillString += fillString
			if (times === 1) {
				fillString += fillString
			}
		}
		return fillString.slice(0, fillLength) + str;
	}
}

// 其他更多是格式化有如下:
// yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合
function timeFormat(dateTime = null, fmt = 'yyyy-mm-dd') {
	// 如果为null,则格式化当前时间
	if (!dateTime) dateTime = Number(new Date());
	// 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式
	if (dateTime.toString().length == 10) dateTime *= 1000;
	let date = new Date(dateTime);
	let ret;
	let 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() // 秒
		// 有其他格式化字符需求可以继续添加，必须转化成字符串
	};
	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;
}

export default timeFormat

二: 在main.js 挂在到全局

import utils from './common'
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	app.config.globalProperties.$u = utils.$u
	//	或者可以使用uni.挂载带全局
	uni.$u = utils.$u
	return {
		app
	}
}

三: 在App.vue 新增全局属性

<script>
	import { getCurrentInstance } from 'vue'
	export default { 
	     onLaunch() {
	        const {
				appContext: {
					config: {
						globalProperties: global
					}
				}
			} = getCurrentInstance(); //3.0.11
			uni.getSystemInfo({
				success: function(e) {
					// #ifndef MP
					global.StatusBar = e.statusBarHeight;
					if (e.platform == 'android') {
						global.CustomBar = e.statusBarHeight + 50;
					} else {
						global.CustomBar = e.statusBarHeight + 45;
					};
					// #endif
					// #ifdef MP-WEIXIN
					global.StatusBar = e.statusBarHeight;
					let custom = wx.getMenuButtonBoundingClientRect();
					global.Custom = custom;
					global.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
					// #endif       
					// #ifdef MP-ALIPAY
					global.StatusBar = e.statusBarHeight;
					global.CustomBar = e.statusBarHeight + e.titleBarHeight;
					// #endif
				}
			})
	     }
	}
</script>

四: 在页面使用

<script setup>
import { getCurrentInstance } from 'vue'

	const {
		appContext: {
			config: {
				globalProperties: global
			}
		}
	} = getCurrentInstance(); //3.0.11
	console.log(global.$u.timeFormat(new Date().getTime(), 'yyyy年mm月dd日'))

	//	如果使用uni.挂载
	console.log(uni.$u.timeFormat(new Date().getTime(), 'yyyy年mm月dd日'))
</script>

如果使用的vue脚手架项目,可以使用provide/inject实现全局方法

示例

main.js

app.provide('$clone', deepClone)

function deepClone(source) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments', 'deepClone')
  }
  const targetObj= source.constructor === Array ? [] : {}
  Object.keys(source).forEach((keys) => {
    if (source[keys] && typeof source[keys] === 'object') {
      targetObj[keys] = deepClone(source[keys])
    } else {
      targetObj[keys] = source[keys]
    }
  })
  return targetObj
}

index.vue

 const $clone= inject('$clone')
 console.log($clone({
 	a: 3
 }))