夜雨聆风
uni-app 开发神器 lg.uniapp:一套 Hooks 搞定列表、表单、上传、字典与权限
🚀 uni-app 开发神器 lg.uniapp：
一套 Hooks 搞定列表、表单、字典与权限！
在 uni-app 跨端开发中，我们常常需要重复编写列表加载、表单提交、字典映射、权限控制等逻辑。今天给大家安利一个超实用的工具库 —— lg.uniapp，它通过一系列精心设计的 Composable Hooks，极大提升了开发效率，让代码更简洁、更优雅！
📦 插件地址：https://www.npmjs.com/package/lg.uniapp
✨ 核心功能一览
1️⃣ 列表页利器 useList
上拉加载更多、下拉刷新、自动刷新，统统封装好！支持普通列表和 scroll-view场景。
const { status, params, list, total, loading, onRemove, onReload } = useList({load: api.list,remove: api.remove,});
– scroll-view专用版（带刷新事件）：
const { status, params, list, total, loading, refresherTriggered, onRefresherrefresh, onLoadMore } = useScroll({ ... });<scroll-view:scroll-y="true"refresher-enabled:refresher-triggered="refresherTriggered"@refresherrefresh="onRefresherrefresh"@scrolltolower="onLoadMore"><viewv-for="item in list":key="item.id">{{ item.name }}</view></scroll-view>
2️⃣ 表单页助手 useForm
自动处理加载、提交、更新判断，提交成功后自动触发列表页刷新！
const { formProps, data, onSubmit, isUpdate, loading } = useForm({load: (params) => api.get(params.id),submit: (data) => isUpdate.value ? api.update(data) : api.save(data)});
3️⃣ 文件上传组合拳 useUploader+ useUploadManager
– useUploader：处理单/多文件选择与上传。
– useUploadManager：统一管理多个上传任务，确保所有文件上传完成后再提交表单。
单个文件上传需求
const { upload, files, choose, updateValue } = useUploader({ single: false }, (value) => {modelValue.value = value;});function submit() {upload().then(() => {// 所有文件上传完成，提交表单console.log('上传完成，提交表单');});}
多个文件上传需求
// 子组件使用 useUploaderconst { upload, files, choose, updateValue } = useUploader({ single: false }, (value) => {modelValue.value = value;});// 父组件使用 useUploadManager 自动监听所有子组件的上传任务const onUpload = useUploadManager();// 如果 useUploader 和 useUploadManager 在同一个组件中使用const onUpload = useUploadManager(upload, upload2, ...uploadN);// 提交表单function submit() {onUpload().then(() => {// 所有文件上传完成，提交表单console.log('上传完成，提交表单');});}
4️⃣ 数据字典三剑客
– useDict：获取字典原始数据。
– useDictLabel：直接获取字典标签映射（如: {0:”男”,1:”女”}）。
– useDictUniOptions：转换为 uni-app picker所需的 options格式。
const { status, type } = useDict('status', 'type');const { gender, education } = useDictLabel('gender', 'education');const { industry, region } = useDictUniOptions('industry', 'region');
5️⃣ 权限与登录控制
– useIsLogin：登录状态判断。
– usePermit：按钮级权限控制。
– mustPermit/ mustLogin：页面级拦截。
// 按钮权限const permits = usePermit({create: 'user:add',update: 'user:update',revoke: 'user:revoke'});// 模板中使用：<view v-if="permits.revoke">撤销</view>// 页面权限拦截mustPermit('user:add');mustLogin();
6️⃣ 页面导航与刷新通信
– toPage, back, backAndRefresh：智能导航。
– emitRefresh, onRefresh：跨页面刷新通信（表单提交后刷新列表）。
// 表单提交成功backAndRefresh(); // 返回并触发列表刷新// 列表页监听onRefresh(() => {onReload(); // 重新加载列表});
7️⃣ 实用工具函数
– 断言校验：isTrue, isFalse, notEmpty
– 提示弹窗：showSuccess, showError, showConfirm
– 路径获取：getCurrentPath, getLoginPath, getHomePath
isTrue(val > 0, '值必须大于0'); // 真值判断，否则抛异常notEmpty(name, '姓名必填'); // 非空判断，否则抛异常showSuccess('操作成功'); // 显示成功提示showConfirm('确认删除？').then(() => { /* 执行删除 */ });getCurrentPath(); // 获取当前页路径getLoginPath(); // 获取登录页路径getHomePath(); // 获取主页路径toLoginPage(); // 跳转登录页toHomePage(); // 跳转主页
8️⃣ 高级加载器（性能优化利器）
– createLockLoader：相同 key 的请求去重，避免重复调用。
– createBatchLoader：合并短时间内的多个请求，批量处理后拆分响应。
– createRetryLoader：失败自动重试。
– createDebouncedLoader/ createThrottledLoader：防抖与节流。
– useCallLock：函数锁，防止重复点击。
// 请求去重const lockLoader = createLockLoader();const getUser = () => lockLoader('user_info', () => api.getUser());// 批量加载字典const batchLoader = createBatchLoader({loader: (params) => api.batchGetDict(params),responseHandler: (res, param) => res[param]});// 函数锁，防止多次调用const [call, loading] = useCallLock(() => 实际处理, 'error');// 多次调用不会重复触发call();call();
💡 为什么选择 lg.uniapp？
– ✅ 开箱即用：无需重复造轮子，专注业务逻辑
– ✅ 高度复用：一套代码，多端运行
– ✅ 类型友好：完整 TypeScript 支持
– ✅ 性能优化：内置防抖、节流、批量、重试等机制
– ✅ 生态完善：覆盖列表、表单、字典、权限、上传、导航等全场景
📥 安装
npm install lg.uniapp# 或yarn add lg.uniapp
全局配置 setConfig
统一配置字典获取、登录状态、权限列表等全局逻辑，一次配置，处处可用。
import { setConfig } from 'lg.uniapp';setConfig({getDict: (codes) => getDict(codes), // 后端获取字典isLogin: () => Promise.resolve(true), // 判断登录getPermits: () => Promise.resolve(['user:add', 'user:update']) // 获取权限});
🎯 适用场景
– 企业级后台管理系统
– 多端小程序（微信、支付宝、抖音等）
– H5 与 App 混合项目
– 需要快速迭代的 CRUD 项目\
🔥 立即体验，让你的 uni-app 项目开发效率翻倍！
如有问题或建议，欢迎前往 npm 主页留言或提交 Issue。