uni-app 开发神器 lg.uniapp：一套 Hooks 搞定列表、表单、上传、字典与权限

六哥是全栈
0 阅读4分钟

🚀 uni-app 开发神器 lg.uniapp：

一套 Hooks 搞定列表、表单、字典与权限！ 在 uni-app 跨端开发中，我们常常需要重复编写列表加载、表单提交、字典映射、权限控制等逻辑。今天给大家安利一个超实用的工具库 —— lg.uniapp，它通过一系列精心设计的 Composable Hooks，极大提升了开发效率，让代码更简洁、更优雅！

📦 插件地址：www.npmjs.com/package/lg.…

✨ 核心功能一览

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"
>
  <view v-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('上传完成，提交表单');
  });
}

多个文件上传需求

// 子组件使用 useUploader
const { 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。

avatar
文章
阅读
粉丝