更新记录

1.0.5（2025-04-09） 下载此版本

新增防抖函数、优化部分助手函数

1.0.4（2023-07-29） 下载此版本

新增获取当前系统时间

1.0.3（2023-06-27） 下载此版本

新增： 地址相关处理 权限计算 根据金纬度计算距离 数组去重（未完善） 时间戳转时间

平台兼容性

XTools-js 使用说明

简介

xtools 是一个聚合各类常用方法的工具库。本项目是田小檬自用写自用的一些方法库，如有不足请大佬指点。

插件地址

XTools

功能列表及使用方法(未完全举例)

全局载入和局部引入的使用说明

全局载入

在 main.js 中引入并挂载到 Vue 原型上：

import xtools from './js_sdk/XTools-js/common/xtools.js'
Vue.prototype.$xtools = xtools

全局引入后，可在APP.vue中配置 Default（默认图片） 和 Domain （默认域名）

export default {
  onLaunch: function(e) {
    this.$xtools.Default = '/static/logo.png';
    this.$xtools.Domain = 'http://localhost:8000/';
  }
}

这样在所有组件中都可以通过 this.$xtools 来使用工具库。

局部引入

在组件中直接引入并使用：

import xtools from '@/js_sdk/XTools-js/common/xtools.js'

export default {
  methods: {
    test() {
      const timestamp = xtools.getTime();
      console.log(timestamp);
    }
  }
}

常用方法

1. 地址跳转

   this.$xtools.navigateTo('/pages/index/index') // 跳转至首页
   this.$xtools.navigateBack() // 返回上一级
   this.$xtools.redirectTo('/pages/index/index') // 重定向至首页
   this.$xtools.reLaunch('/pages/index/index') // 关闭所有页面，打开到应用内的某个页面

2. 图片处理

   this.$xtools.perfectUrl('test.jpg') // 处理图片补全地址-传入http地址或base64 返回完整的地址

3. 缓存处理

   this.$xtools.get('testKey', 'testValue') // 获取或写入并读取缓存内容
   this.$xtools.getRemove('testKey') // 读取后即销毁缓存

4. 提示信息

   this.$xtools.showtt('提示信息') // 提示信息

1. 获取系统信息相关

• 函数名：getTime()
  • 功能：获取当前时间戳（秒级）。
  • 参数：无
  • 返回值：当前时间戳（秒级）
  • 示例：this.$xtools.getTime()

2. 地址相关

getParams(type = 'queryObj')

• 功能：获取当前路径相关信息。
• 参数：type 可选值有 query（只输出参数）、queryObj（对象形式输出参数）、route（只输出路径），其他值（输出完整路径）。
• 返回值：根据 type 返回地址或者参数对象。
• 示例：this.$xtools.getParams('query')

StringQueryToObj(queryString)

• 功能：把查询字符串转化为对象形式。
• 参数：queryString 为查询字符串。
• 返回值：对象形式的路径参数。
• 示例：this.$xtools.StringQueryToObj('?name=test&age=18')

3. 延迟执行函数

• 函数名：delays(fun, time = 1500)
  • 功能：延迟执行指定函数。
  • 参数：fun 为需要执行的函数，time 为延迟时间（单位：ms），默认为 1500ms。
  • 返回值：无
  • 示例：this.$xtools.delays(() => { console.log('延迟执行') }, 2000)

4. 权限计算(暂未完善)

• 函数名：authority()
  • 功能：进行权限计算。
  • 参数：无
  • 返回值：无
  • 示例：this.$xtools.authority()

5. 计算距离

• 函数名：distance(lat1, lng1)
  • 功能：根据经纬度计算距离。
  • 参数：lat1、lng1 为经纬度。
  • 返回值：距离
  • 示例：this.$xtools.distance(30.1, 120.1)

6. 缓存使用

get(key, value = '')

• 功能：获取或写入并读取缓存内容。
• 参数：key 为缓存名称，value 为需要写入的缓存内容（可选）。
• 返回值：若存在返回其值，不存在返回 false。
• 示例：this.$xtools.get('testKey', 'testValue')

getRemove(key)

• 功能：读取后即销毁缓存。
• 参数：key 为缓存名称。
• 返回值：若存在返回其值并且销毁，不存在返回 false。
• 示例：this.$xtools.getRemove('testKey')

remove(key)

• 功能：销毁缓存。
• 参数：key 为缓存名称。
• 返回值：无
• 示例：this.$xtools.remove('testKey')

7. 提示信息

• 函数名：showtt(add1, add2)
  • 功能：显示提示信息。
  • 参数：add1 为提示内容，add2 为图标类型（可选）。
  • 返回值：无
  • 示例：this.$xtools.showtt('提示信息', 'success')

8. 加载提示

• 函数名：showload()
  • 功能：显示加载提示。
  • 参数：无
  • 返回值：无
  • 示例：this.$xtools.showload()

9. 页面跳转

• 函数名：goNext(gourl)
  • 功能：跳转下一页。
  • 参数：gourl 为需要跳转的地址。
  • 返回值：无
  • 示例：this.$xtools.goNext('/pagesIndex/me/personalData')

10. 防抖函数

• 函数名：debounce(func, wait = 500, immediate = false)
  • 功能：防抖函数。
  • 参数：func 为需要执行的函数，wait 为延迟时间（单位：ms），默认为 500ms，immediate 为是否立即执行，默认为 false。
  • 返回值：无
  • 示例：this.$xtools.debounce(() => { console.log('防抖执行') }, 1000)

11. 获取图片缓存

• 函数名：getImageCache(key)
  • 功能：获取图片缓存。
  • 参数：key 为缓存名称。
  • 返回值：若存在返回其值，不存在返回 false。
  • 示例：this.$xtools.getImageCache('testKey')