更新记录
1.2.1(2023-03-22) 下载此版本
changelog.md保持同步
1.2.0(2023-03-21) 下载此版本
增加js方法
1.1.9(2023-03-21) 下载此版本
1
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.3.12 app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
yy-base🍒🍒🍒🍒
插件概述🍒🍒🍒🍒
yybase插件是封装好的JavaScript文件,可在yybase应用中直接调用,提供丰富的功能和扩展性。插件已经集合了color-ui,项目中可以直接使用。🍒🍒🍒🍒
结构说明🍒🍒🍒🍒
📦yy-base
├── 📜changelog.md
├── 📜components➖➖➖➖组件库
├── 📜config.js➖➖➖➖配置为了将
├── 📜index.js➖➖➖➖组件库索引
├── 📜index.scss➖➖➖➖样式库索引
├── 📂js
│ ├── 📜index.js➖➖➖➖函数库索引
│ ├── 📂mixin➖➖➖➖混入父类
│ │ └── 📜mixin.js➖➖➖➖全路婚礼
│ └── 📂tools➖➖➖➖函数库
│ ├── 📜array.js➖➖➖➖数组
│ ├── 📜cache.js➖➖➖➖缓存
│ ├── 📜dialog.js➖➖➖➖弹框
│ ├── 📜eventBus.js➖➖➖➖事务
│ ├── 📜jump.js➖➖➖➖跳转
│ ├── 📜number.js➖➖➖➖数字
│ ├── 📜object.js➖➖➖➖对象
│ ├── 📜request.js➖➖➖➖请求
│ └── 📜string.js➖➖➖➖字符串
├── 📜package.json
├── 📜readme.md
└── 📂styles➖➖➖➖样式库
├── 📂color-ui
│ ├── 📜animation.css➖➖➖➖动画css
│ ├── 📜icon.css➖➖➖➖图标css
│ └── 📜main.css➖➖➖➖colorUI主样式
└── 📜index.scss➖➖➖➖样式库索引
安装使用🍒🍒🍒🍒
全局使用yybase.js🍒🍒🍒🍒
// 引入全局yybase.js - main.js
import yyBase from '@/uni_modules/yy-base'
Vue.use(yyBase)
全局使用yybase.css🍒🍒🍒🍒
// 引入全局yybase.css - App.vue
<style lang="scss">
/*每个页面公共css */
@import 'uni_modules/yy-base/index.scss';
</style>
yybase.js部分示例🍒🍒🍒🍒
// 示例1:隐藏手机号中间4位
const phone = '13812345678';
const maskedPhone = yy.maskString(phone, 3, 6);
console.log(maskedPhone); // 输出:138****5678
// 示例2:隐藏身份证号中间6位
const idCard = '110101199001010001';
const maskedIdCard = yy.maskString(idCard, 6, 11, '#');
console.log(maskedIdCard); // 输出:110101######0001
// 示例3:start和end不是数字或小于0,返回原字符串
const str1 = 'hello world';
const maskedStr1 = yy.maskString(str1, 'a', -1);
console.log(maskedStr1); // 输出:hello world
// 示例4:start大于等于end,返回原字符串
const str2 = 'hello world';
const maskedStr2 = yy.maskString(str2, 5, 3);
console.log(maskedStr2); // 输出:hello world
// 示例5:end大于等于str.length,end会自动调整为str.length-1
const str3 = 'hello world';
const maskedStr3 = yy.maskString(str3, 6, 20);
console.log(maskedStr3); // 输出:hello w*****
请求拦截示例🍒🍒🍒🍒
- 🍒🍒配置根域名 - yybase>config.js🍒🍒
export default {
// 根域名
baseUrl: "http://byxw.wq.com",
// 登录页面路径
loginUrl: '/pages/test/test',
// 白名单,不需要登录就能访问的页面
whiteList: [
'/pages/index/index', '/pages/test/test', '/pages/index/indexs'
],
// 分享配置
share: {
title: '分享标题',
path: '/pages/index/index',
imageUrl: '',
desc: ''
}
}
- 🍒🍒配置请求拦截器 - yybase>js>tools>request.js🍒🍒
setInterceptor(config => {
config.header.Authorization = `Bearer 11111111111`;
return Promise.reject(config)
})
- 🍒🍒请求示例🍒🍒
// 获取数据
async getList() {
const { data, statusCode } = await yy.req({
url: '/api/config',
method: 'get', //默认get
loading: true, // 请求loading开关 ,默认true
toastError: true // 保存提示消息开关 ,默认true
});
},
// 请求成功会默认打印出数据
路由跳转拦截🍒🍒🍒🍒
- 🍒🍒配置登录页面路径,路由白名单 - yybase>config.js🍒🍒
export default {
// 根域名
baseUrl: "http://byxw.wq.com",
// 登录页面路径
loginUrl: '/pages/test/test',
// 白名单,不需要登录就能访问的页面
whiteList: [
'/pages/index/index', '/pages/test/test', '/pages/index/indexs'
],
// 分享配置
share: {
title: '分享标题',
path: '/pages/index/index',
imageUrl: '',
desc: ''
}
}
- 🍒🍒配置自己的跳转逻辑 - yybase>jump.js🍒🍒
function isLoggedIn(url) {
const token = uni.getStorageSync('token');
// 判断当前路由是否在白名单中,在返回true,不在返回false
const isWhiteListed = [...whiteList, config.loginUrl].includes(url);
// 如果当前路由在白名单中 并且未登录
if (isWhiteListed && token) {
return true;
}
// 否则返回 false
return false;
}
- 🍒🍒跳转示例🍒🍒
yy.jump('/pages/index/new')
函数集合(后续会连续增加,也可以评论反应看到后会进行增加)🍒🍒🍒🍒
函数名称 | 函数描述 | 参数 | 返回值 |
---|---|---|---|
arrToTree | 数组转树 | arr: Array, idField: String = 'id', parentField: String = 'parentId', childrenField: String = 'children' | 树形结构数组 |
treeToArray | 将树形结构转换为数组结构 | tree: Object[], idKey: String = 'id', childrenKey: String = 'children' | 数组结构数据 |
isEmptyArray | 判断数组是否为空 | arr: Array | boolean |
isNotEmptyArray | 判断数组是否不为空 | arr: Array | boolean |
mergeArrays | 将多个数组合并成一个新数组 | ...arrays: Array | Array |
sumArray | 计算数组中所有元素的和 | arr: Array | number |
flattenArray | 将二维数组转换为一维数组 | arr: Array | Array |
shuffleArray | 将数组元素随机打乱 | arr: Array | 打乱后的新数组 |
removeDuplicates | 删除数组中的重复元素 | arr: Array | 删除重复元素后的新数组 |
maxArray | 找出数组中的最大值 | arr: Array | number/null |
minArray | 找出数组中的最小值 | arr: Array | number/null |
averageArray | 计算数组中所有元素的平均值 | arr: Array | number/null |
removeEmpty | 去除数组中的空值 | arr: Array | 去除空值后的新数组 |
hasIntersection | 判断两个数组是否有交集 | arr1: any[], arr2: any[] | boolean |
isArray | 判断变量是否为数组类型 | variable: any | boolean |
quickSort | 对数组进行快速排序 顺序 | arr: Array | 排序后的数组 |
quickSortDescending | 对数组进行快速排序(倒序) | arr: Array | 排序后的数组 |
--- | --- | --- | --- |
--- | --- | --- | --- |
--- | --- | --- | --- |
setCache | 将指定数据保存到缓存中 | - key:缓存键名 - value:缓存值 - expire:过期时间(单位:秒),默认为 -1 表示永不过期 |
无 |
getCache | 从缓存中获取指定键名的数据 | - key:缓存键名 - defaultValue:默认值,如果缓存中不存在或已过期,则返回该默认值 |
缓存中的值或默认值 |
removeCache | 移除指定键名的缓存数据 | - key:缓存键名 | 无 |
--- | --- | --- | --- |
--- | --- | --- | --- |
--- | --- | --- | --- |
showToast | 消息提示框 | title: string, duration: number=1500 | 无 |
showModal | 确认框 | title: string, content: string, confirmText: string='确定', cancelText: string='取消' | Promise |
showPrompt | 提示框 | title: string, placeholder: string='', confirmText: string='确定', cancelText: string='取消' | Promise |
showLoading | 加载框 | title: string | 无 |
hideLoading | 隐藏加载框 | 无 | 无 |
showActionSheet | 操作菜单 | itemList: Array |
Promise |
--- | --- | --- | --- |
--- | --- | --- | --- |
--- | --- | --- | --- |
emit | 发布指定名称的事件 | eventName: string, data: any, ...args: any | void |
on | 订阅指定名称的事件 | eventName: string, callback: Function | 取消订阅该事件的函数: Function |
once | 订阅指定名称的事件,并且只订阅一次,回调函数会在第一次触发后自动取消订阅 | eventName: string, callback: Function | void |
off | 取消订阅指定名称的事件 | eventName: string, callback?: Function | void |
--- | --- | --- | --- |
--- | --- | --- | --- |
--- | --- | --- | --- |
navigateTo | 跳转到指定路由 | url: String, params: Object | 无 |
reLaunch | 关闭所有页面,打开到应用内的某个页面 | url: String | 无 |
switchTab | 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 | url: String | 无 |
navigateBack | 关闭当前页面,返回上一页面或多级页面 | 无 | 无 |
redirectTo | 重定向到指定路由 | url: String | 无 |
isLoggedIn | 判断当前用户是否已登录 | url: String | Boolean |
--------------- | ---------------------------------------------------------------- | ------------------------------------------ | ----------- |
--------------- | ---------------------------------------------------------------- | ------------------------------------------ | ----------- |
--------------- | ---------------------------------------------------------------- | ------------------------------------------ | ----------- |
roundNumber | 将数字保留指定位数小数 | num: 要处理的数字, digits: 要保留的小数位数 | 处理后的数字 |
formatCurrency | 将大数字转换为货币格式 | number: 要转换的数字 | 货币格式字符串 |
numberToChinese | 将数字转换为中文大写 | num: 要转换的数字,范围在[0, 999999999]之间 | 中文字符串 |
numberToChinese1 | 将数字转换为中文大写(采用“壹、贰、叁”等形式表示) | num: 要转换的数字,范围在[0, 999999999]之间 | 中文字符串 |
--- | --- | --- | --- |
--- | --- | --- | --- |
--- | --- | --- | --- |
mergeObjects | 合并多个对象 | target: 目标对象, sources: 源对象 | 合并后的对象 |
objToUrlParams | 将对象转换为URL参数字符串 | obj: 要转换的对象 | 转换后的URL参数字符串 |
urlToObj | 将链接转换成对象 | url: 需要转换的链接 | 包含链接参数的对象 |
copyObject | 对象拷贝函数,根据参数控制进行深拷贝或浅拷贝 | obj: 要拷贝的对象, deepCopy: 是否进行深拷贝,默认为false表示浅拷贝 | 拷贝后的新对象 |
getValueByKey | 根据key获取对象的值 | obj: 要获取值的对象, key: 属性键名 | 对应属性的值,如果obj中不存在该属性则返回undefined |
allPropertiesAreNotEmpty | 检测整个对象是否没有空属性 | obj: 要检测的对象 | 是否所有属性都不为空 |
arrayToJSON | 将对象数组转换为JSON格式 | arr: 要转换的对象数组 | 对象数组的JSON字符串 |
deleteProperties | 删除对象中指定的属性,并返回新对象 | obj: 要删除属性的对象, keys: 要删除的属性键名数组 | 删除对应属性后的新对象 |
pickProperties | 从对象中取多个属性,并生成一个全新的对象 | obj: 要取属性的对象, keys: 要取的属性键名数组 | 包含对应属性的新对象 |
isObject | 判断变量是否为对象类型 | varible: 要检查的变量 | 是否为对象类型 |
--- | --- | --- | --- |
--- | --- | --- | --- |
--- | --- | --- | --- |
maskString | 将字符串中的中间字段隐藏 | str: 待处理的字符串,start: 开始隐藏的位置,从0开始计数,end: 结束隐藏的位置,从0开始计数,mask: 用于替换隐藏字段的字符,默认为'*' | 处理后的字符串 |
formatTimestamp | 将时间戳格式化为指定格式的字符串 | timestamp: 要格式化的时间戳,format: 格式字符串,默认为'YYYY-MM-DD HH:mm:ss' | 格式化后的字符串 |
fromNow | 计算距离当前时间的时间差 | timestamp: 要计算的时间戳 | 时间差字符串 |
getActivityStatus | 判断当前时间是否在活动的开始时间、结束时间之间 | startTime: 活动开始时间,endTime: 活动结束时间 | 当前时间所处的状态,可能取值为'未开始'、'进行中'或'已结束' |
randomColor | 生成随机颜色 | 无 | 随机颜色值 |
isQingming | 判断当前日期是否是清明节 | 无 | 是否是清明节 |
getQingmingDay | 获取指定年份的清明节日期 | year: 指定年份 | 清明节日期 |
generateOrderNumber | 生成带指定开头多少位的订单号 | len: 多少位,prefix: 什么开头, | 返回生成的订单号 |