一个web端工具函数和类的集合
EASIIndexDB
| props | type | default | required | remark |
|---|---|---|---|---|
| databaseName | string | 是 | 数据库名称 | |
| options | object | 否 | 详细参数见下表,不传则不会创建任何表,只会创建数据库 |
| props | type | default | required | remark |
|---|---|---|---|---|
| version | number | 1 | 否 | 数据库版本,只能升不能降,不能是小数,不传默认为1 |
| store | storeOption[] | [] | 否 | 详细参数见下表,生成表的规则,数组每一项都是一个表配置 |
| upgradeCallBack | (this: EasiIndexDB实例, versionChangeEvent: 数据库变化对象,可拿到旧版本号和新版本号) => promise<void> | 否 | 处理数据库升级事件的钩子函数,会在类操作数据库之前执行 |
| props | type | default | required | remark |
|---|---|---|---|---|
| storeName | string | 是 | 表名 | |
| options | {autoIncrement: boolean, keyPath?: string} | {autoIncrement: true} | 否 | 表配置,autoIncrement:主键是否自增,keyPath:主键名称 |
| indexOptions | {name: string, key: string or string[], unique: boolean, multiEntry?: boolean}[] | [] | 否 | 给表添加额外的索引,name:索引名称,key:索引主键,unique:主键是否唯一,multiEntry:如果索引主键为数组,则会给数组内的主键都设置索引 |
传入key则视为更新对应数据
name: 索引名称
data 新的数据
key 要匹配的主键值,不传则视为新增
key 要匹配的主键值
name 索引的名称,如果不想匹配主键的值,而是匹配索引的值,此处传入索引的名称
key 要匹配的主键名称
keyRange 需要匹配主键的值
count 需要匹配的数量
getAll: (storeName: string, key?: string, keyRange?: IDBValidKey | IDBKeyRange | null, count?: number)=> Promise<any[]>
keyRange 需要匹配主键的值
count 需要匹配的数量
getAllKeys: (storeName: string, keyRange?: IDBValidKey | IDBKeyRange | null, count?: number)=> Promise<any[]>
keyword 需要匹配的值,支持传入正则,字符串,数字和布尔值
keysField 需要匹配的键,只在数据为对象时才需要传入,如果传入的为数组,则会匹配对象内对应键的值
elasticSearch: (storeName: string, keyword: RegExp | string | number | boolean, keysField?: string | string[])=> Promise<any[]>
keyRange 需要匹配主键的值
name 索引名称
import { EASIIndexDB } from './lib/index'
// 初始化数据库
const db = new EASIIndexDB('mydb', {
version: 1,
store: [
{
storeName: 'test', // 表名
indexOptions: [
{
name: 'index', // 索引名称
key: 'index', // 索引键
unique: false, // 是否唯一
}
]
},
],
});
// 做一些操作
async function doSomething(primaryKey){
// 直接通过表名添加数据
await db.$mydb.add('这是存入的数据0')
// 通过传入表名添加数据
await db.add('mydb', '这是存入的数据1')
// 直接通过表名获取数据
const data0 = await db.$mydb.get(primaryKey)
console.log(data0)
// 通过传入表名获取数据
const data1 = await db.get('mydb', primaryKey)
console.log(data1)
}
doSomething()useDB
自组件内使用indexdb,使用此函数,必须确保已经在Vue内注册了indexDB实例
在main.ts内初始化indexdb,并挂载到Vue实例内
// main.ts
import { createApp } from 'vue'
import App from 'App.vue'
import { EASIIndexDBPlugin } from '.lib/index'
createApp(App).use(EASIIndexDBPlugin, {
databaseName: 'myDB',
// 具体参数见 IndexDB工具类
options: {
version: 1,
store: [
{
storeName: 'test1'
}
]
}
})在需要调用indexDB的组件内使用useDB,会返回Vue实例内挂载的indexDB实例
import { useDB } from "./lib/index";
export default {
setup() {
const db = useDB();
const getData = async () => {
return await db.$test1.get(1)
}
}
}操作 / localStorage / sessionStorage
均可设置有效期,单位毫秒
import { setLocal, getLocal, clearLocal, removeLocal, setSession, getSession, clearSession, removeSession, setCookie, getCookie, removeCookie } from './lib/index'
// 保存一个小时有效期的token,不传第三个参数则默认永久有效,sessionStorage除外
setLocal('token', token, 60 * 60 * 1000)
setSession('token', token, 60 * 60 * 1000)
setCookie('token', token, 60 * 60 * 1000)
// 读取token, 如果超过有效期或无数据会返回空。数据类型与存入时一致,===有效
getLocal('token')
getSession('token')
getCookie('token')
// 删除某一个key
removeLocal('token')
removeSession('token')
removeCookie('token')
// 清空所有数据,Cookie暂未实现全部清除
clearLocal()
clearSession()openAppWeb
打开 App内 web/help地址
interface IToAppWebOption {
scheme: string; // App schema
title: string; // 标题
url: string; // 链接地址
show: unknown;
}
function openAppWeb({scheme = 'au.com.easi.courier', title, url, show}: IToAppWebOption): void{}openAppView
打开 App原生页面
function openAppView(path: string, scheme = 'au.com.easi.customer'): void{}compareVersion
判断App版本号,目前只支持用户端App
// targetVersion: 需要判断的最低版本号,如果高于此版本号则返回true
function compareVersion(targetVersion: string, ua: string = navigator.userAgent.toLowerCase()): boolean {}compareUserAgent
判断App userAgent是否合法,如果合法则返回true
/*
* 需要判断的客户端打开环境
* 'easi': 所有EasiApp
* 'easicustomer': Easi用户App内打开
* 'easimalaysia': Easi Malaysia用户App内打开(仅针对马来西亚用户App)
* 'easicourier': Easi配送员App内打开(含马来西亚)
* 'easimerchant':Easi 商家端App内打开
* 'easimerchantmalaysia':Easi Malaysia商家端App内打开(仅针对马来西亚商家App)
* */
type IClientType = 'easi' | 'easicustomer' | 'easimalaysia' | 'easicourier' | 'easimerchant' | 'easimerchantmalaysia'
// targetVersion: 需要判断的最低版本号,如果高于此版本号则返回true
function compareUserAgent(clientTypeArray: IClientType[] = [], ua = navigator.userAgent.toLowerCase()): boolean {}createWorker
创建一个web worker线程
// 函数返回子线程返回的数据
function createWorker(
func: () => void, // 子线程执行的函数
data: any, // 传递给子线程的数据,必须是可拷贝的对象,如果是vue代理的对象需要还原成原始对象
backUpFunc?: (data: any) => any, // 如果浏览器不支持web worker,执行的函数,一般不传
): Promise<any> {}loadScript
动态加载js资源
// link: js资源的链接地址
// id: 给这个js资源一个唯一的标示,避免重复加载
function loadScript(link: string, id: string): Promise<void>{}debounced
防抖函数
// func: 要执行的函数
// delay: 延迟执行时间
// immediate: 是否立即执行
function debounced(func: () => void, delay = 200, immediate = false): () => void {}isMobile
判断当前是否是移动端环境,如果是则返回true
function isMobile(): boolean {}copy
一键复制,复制成功则返回true
function copy(
content: string, // 要复制的文案
container: HTMLElement = document.querySelector('body') as HTMLElement, // 如果文案是在弹框中,请传入弹框的Dom对象
): boolean {}