更新记录

1.0.8（2025-08-10） 下载此版本

• ios usePhotoLibraryPermission 手动请求权限

  其他主动申请权限需要原生插件或者uts实现

1.0.7（2025-08-03） 下载此版本

• 完善permissionModal组件

1.0.6（2025-07-24） 下载此版本

• 完善Code组件，增加示例代码

平台兼容性

uni-app(4.75)

uni-app x(4.75)

简介

一个uniapp + vue3的hooks工具库。 开发中，欢迎提需求、bug。

项目说明

vueuse是一个非常好用的库。但是他在uniapp并不是完全兼容的，小程序、app中也会丢失一些特性。 但是如果是网页端开发还是强烈建议使用vueuse 此插件部分功能会借鉴(copy)vueuse的代码。

功能列表

工具

• useClick

  单击或者双击，用于移动设备，且使用了，单击会有延迟

• useClipboard

  剪贴板

• useCountdown

  倒时器，常用于验证码、订单、优惠券等倒计时

• useDirection

  手势滑动方向，具体参考slideContainer用法

• useDebounce

  防抖，常用于按钮点击、input监听等

• useDeepClone

  深拷贝

• useEqual

  深比较

• useGroupBy

  根据key分组

• useId

  返回一个id

• useNavStatus

  返回自定义导航栏所需数据

• useNow

  当前时间

• usePlatform

  当前平台，可能的值有 "android", "ios", "devtools", "windows"

• useState

  参考react

• useStorage

  响应式本地存储，参考vueuse

• useThrottle

  节流，常用于频繁触发的事件，比如页面滚动监听等

• useTimer

  定时器，setInterval并不支持异步，此方法基于递归等待逻辑，常用于轮询

• useToggle

  开关切换，参考vueuse

• useProgress

  进度，长时间执行的任务场景中，给客户一个百分比进度安慰一下，内部是NProgress修改版

• useTween

  缓动函数，类似tween、gasp

  ---

组件

微信小程序请手动引入组件：import SlideContainer from '@/uni_modules/cc-uniuse/components/slide-container/slide-container.vue'，或者使用easycom 请不要这样引用：import {SlideContainer} from '@/uni_modules/cc-uniuse'

• code

  获取验证码组件

• shop-list

  左右分栏式列表，常用于商品列表

• slide-container

  监听滑动方向

• permission-modal

  权限监听组件，这只是一个demo，可以参考代码自己实现。

• check-box

  单选/复选框组件，支持与文字垂直居中 文档 插件

权限

相关参考： App权限判断和提示

• useCallPhonePermission

  判断拨打电话权限，目前仅支持安卓

• useCameraPermission

  相机权限

• useLocationPermission

  定位权限

• usePhotoLibraryPermission

  相册权限

• useRecordAudioPermission

  录音权限

使用说明

直接导入到uni_modules即可

这里演示倒时器，其余参考完整示列

<template>
    <view>
        <view>
            <button :disabled="remainingDuration!=0" @click="getCode">
                {{ remainingDuration==0 ? '点击获取验证码' : `${remaining}后可以再次获取` }}
            </button>
            <button @click="start('ss.SSS \s')" :disabled="remainingDuration==0 || isRunning">恢复</button>
            <button @click="stop" :disabled="!isRunning">暂停</button>
            <button @click="setDuration(0)">清除</button>

        </view>
    </view>
</template>

<script setup>
    import {
        useCountdown
    } from '@/uni_modules/cc-uniuse'

    const {
        remaining, // 格式化之后的剩余时间
        remainingDuration, // 剩余时间
        start,
        stop,
        setDuration, // 初始使用在start之前设置,也可以用于清空定时器
        isRunning
    } = useCountdown()

    const getCode = () => {
        setDuration(5 * 1000)
        start('ss.SSS \s')
    }
</script>