更新记录
0.1.4(2023-09-05)
- feat: 增加 Hooks
useIntersectionObserver
- feat: 增加
floatAdd
- feat: 因为本人插件兼容 vue2 需要使用
composition-api
,故增加vue文件代码插件的条件编译
0.1.3(2023-08-13)
0.1.2(2023-07-17)
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue app-nvue |
× |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
lime-shared 工具库
引入
// 按需引入
// 这种只会引入相关的方法
import {getRect} from '@/uni_modules/lime-shared/getRect'
// 全量引入
// 这种引入方式,会全量打包
import {getRect} from '@/uni_modules/lime-shared'
Utils
getRect
// 组件内需要传入上下文
// 如果是nvue 则需要在节点上加与id或class同名的ref
getRect('#id',{context: this}).then(res => {})
addUnit
addUnit(10)
// 10px
unitConvert
- 将带有rpx|px的字符转成number,若本身是number则直接返回
unitConvert('10rpx')
// 5 设备不同 返回的值也不同
unitConvert('10px')
// 10
unitConvert(10)
// 10
canIUseCanvas2d
canIUseCanvas2d()
// 若支持返回 true 否则 false
getCurrentPage
const page = getCurrentPage()
base64ToPath
base64ToPath(`xxxxx`).then(res => {})
pathToBase64
pathToBase64(`xxxxx/xxx.png`).then(res => {})
sleep
- 睡眠,让 async 内部程序等待一定时间后再执行
async next () => {
await sleep(300)
console.log('limeui');
}
isBase64
isBase64('xxxxx')
throttle
throttle((nama) => {console.log(nama)}, 200)('limeui');
debounce
debounce((nama) => {console.log(nama)}, 200)('limeui');
random
random(1, 5);
range
range(0, 5)
// [0,1,2,3,4,5]
clamp
- 夹在min和max之间的数值,如小于min,返回min, 如大于max,返回max,否侧原值返回
clamp(0, 10, -1)
// 0
clamp(0, 10, 11)
// 10
clamp(0, 10, 9)
// 9
floatAdd
floatAdd(0.1, 0.2) // 0.3
fillZero
fillZero(9);
// 09
exif
uni.chooseImage({
count: 1, //最多可以选择的图片张数
sizeType: "original",
success: (res) => {
exif.getData(res.tempFiles[0], function() {
let tagj = exif.getTag(this, "GPSLongitude");
let Orientation = exif.getTag(this, 'Orientation');
console.log(tagj, Orientation)
})
}
})
selectComponent
- 获取页面或当前实例的指定组件,会在页面或实例向所有的节点查找(包括子组件或子子组件)
- 仅vue3,vue2没有测试过
// 当前页面
const page = getCurrentPage()
selectComponent('.custom', {context: page}).then(res => {
})
createAnimation
- 创建动画,与uni.createAnimation使用方法一致,只为了抹平nvue
<view ref="ball" :animation="animationData"></view>
const ball = ref(null)
const animation = createAnimation({
transformOrigin: "50% 50%",
duration: 1000,
timingFunction: "ease",
delay: 0
})
animation.scale(2,2).rotate(45).step()
// nvue 无导出数据,这样写只为了平台一致,
// nvue 需要把 ref 传入,其它平台不需要
const animationData = animation.export(ball.value)
composition-api
//使用
import {computed, onMounted, watch, reactive} from '@/uni_modules/lime-shared/vue'
Hooks
useIntersectionObserver
- 使用 Intersection Observer 观察元素可见性的钩子函数
<div class="target">
<h1>Hello world</h1>
</div>
// options 接口可传的参数,若在插件里context为必传
interface UseIntersectionObserverOptions {
root ?: string; // 观察器的根元素选择器字符串
rootMargin ?: {
top ?: number; // 根元素顶部边距
bottom ?: number; // 根元素底部边距
left ?: number; // 根元素左侧边距
right ?: number; // 根元素右侧边距
}; // 根元素的边距
thresholds ?: any[]; // 交叉比例数组,用于指定何时触发回调函数
context ?: any; // 上下文对象,用于指定观察器的上下文
initialRatio ?: number; // 初始的交叉比例
observeAll ?: boolean; // 是否同时观察所有交叉对象
}
const options: UseIntersectionObserverOptions = {
rootMargin: {top: 44},
context: this
}
const {stop} = useIntersectionObserver('.target', (result) => {
}, options)