经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » iOS » 查看文章
uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
来源:cnblogs  作者:xiaoyan2017  时间:2024/5/22 9:37:30  对本文有异议

原创vue3+uniapp+uni-ui跨端仿ios桌面后台OA管理模板Uni-Vue3-WeOS

uniapp-vue3-os一款基于uni-app+vite5.x+pinia等技术开发的仿ios手机桌面OA管理系统。实现了自定义桌面栅格磁贴布局、多分屏滑动管理、自定义桌面小部件、辅助触控悬浮球等功能。支持编译到H5+小程序端+App端

预览效果

运行到H5/小程序端/APP端效果。

原创自研手机OA磁贴栅格卡片布局引擎。亲测在h5+小程序+App端效果基本保持一致。

使用技术

  • 编辑器:HbuilderX 4.15
  • 技术框架:uniapp+vite5.x+vue3+pinia2
  • UI组件库:uni-ui+uv-ui(uniapp vue3组件库)
  • 弹框组件:uv3-popup(基于uniapp+vue3自定义弹框组件)
  • 表格组件:uv3-table(基于uniapp+vue3增强版表格)
  • 模拟数据:mockjs(用于自定义表格模拟数据)
  • 缓存技术:pinia-plugin-unistorage
  • 支持编译:h5+小程序端+app端

另外在PC端则以750px布局显示,表现依然perfect~~

uni-vue3-oadmin项目使用到的table表格组件uv3Table全新自研的一款跨多端(h5/小程序/App端)增强版自定义表格组件。

https://www.cnblogs.com/xiaoyan2017/p/18199130

项目结构

使用hbuilderx4.15编辑器,采用vue3 setup语法编码开发。内置构建工具升级到了Vite5.2.8版本。

目前该项目已经上架到我的作品集,如果有需要的话,欢迎去下载使用。

https://gf.bilibili.com/item/detail/1105982011

公共布局模板Layout

  1. <script setup>
  2. import { ref } from 'vue'
  3. import { appStore } from '@/pinia/modules/app'
  4. const appState = appStore()
  5. // #ifdef MP-WEIXIN
  6. defineOptions({
  7. /**
  8. * 解决小程序class、id透传问题(vue3写法)
  9. * manifest.json中配置mergeVirtualHostAttributes: true, 在微信小程序平台不生效,组件外部传入的class没有挂到组件根节点上
  10. * https://github.com/dcloudio/uni-ui/issues/753
  11. */
  12. options: { virtualHost: true }
  13. })
  14. // #endif
  15. const props = defineProps({
  16. showBackground: { type: [Boolean, String], default: true },
  17. })
  18. // 自定义变量(桌面图标)
  19. const deskVariable = ref({
  20. '--icon-radius': '15px', // 圆角
  21. '--icon-size': '118rpx', // 图标尺寸
  22. '--icon-gap-col': '25px', // 水平间距
  23. '--icon-gap-row': '45px', // 垂直间距
  24. '--icon-labelSize': '12px', // 标签文字大小
  25. '--icon-labelColor': '#fff', // 标签颜色
  26. '--icon-fit': 'contain', // 图标自适应模式
  27. })
  28. </script>
  29.  
  30. <template>
  31. <view class="uv3__container flexbox flex-col flex1" :style="deskVariable">
  32. <!-- 顶部插槽 -->
  33. <slot name="header" />
  34. <!-- 内容区 -->
  35. <view class="uv3__scrollview flex1">
  36. <slot />
  37. </view>
  38. <!-- 底部插槽 -->
  39. <slot name="footer" />
  40. <!-- 背景图(修复小程序不支持background背景图) -->
  41. <image v-if="showBackground" class="fixwxbg" :src="appState.config.skin || '/static/skin/theme.png'" mode="scaleToFill" />
  42. </view>
  43. </template>

emmm,怎么样,是不是感觉还行~~ 哈哈,这也是经历了无数个日夜的爆肝开发,目前该项目正式的完结了。

桌面布局模板

  1. <!-- 桌面模板 -->
  2. <script setup>
  3. import { ref } from 'vue'
  4. import Desk from './components/desk.vue'
  5. import Dock from './components/dock.vue'
  6. import Touch from './components/touch.vue'
  7. </script>
  8.  
  9. <template>
  10. <uv3-layout>
  11. <!-- 桌面菜单 -->
  12. <Desk />
  13. <template #footer>
  14. <!-- 底部导航 -->
  15. <Dock />
  16. </template>
  17. <!-- 悬浮球(辅助触控) -->
  18. <Touch />
  19. </uv3-layout>
  20. </template>

桌面卡片式栅格磁贴模板

桌面os菜单采用json配置

  1. /**
  2. * label 图标标题
  3. * imgico 图标(本地或网络图片) 当type: 'icon'则为uni-icons图标名,当type: 'widget'则为自定义小部件标识名
  4. * type 图标类型(icon | widget) icon为uni-icons图标、widget为自定义小部件
  5. * path 跳转路由页面
  6. * link 跳转外部链接
  7. * hideLabel 是否隐藏图标标题
  8. * background 自定义图标背景色
  9. * size 栅格磁贴布局(16种) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4
  10. * onClick 点击图标回调函数
    * children 二级菜单
  11. */

配置children参数,则以二级菜单弹窗展示。

  1. <template>
  2. <swiper
  3. class="uv3__deskmenu"
  4. :indicator-dots="true"
  5. indicator-color="rgba(255,255,255,.5)"
  6. indicator-active-color="#fff"
  7. >
  8. <swiper-item v-for="(mitem, mindex) in deskMenu" :key="mindex">
  9. <view class="uv3__gridwrap">
  10. <view v-for="(item, index) in mitem.list" :key="index" class="uv3__gridwrap-item" @click="handleClickDeskMenu(item)">
  11. <!-- 图标 -->
  12. <view class="ico" :style="{'background': item.background}">
  13. <!-- 二级菜单 -->
  14. <template v-if="Array.isArray(item.children)">
  15. <view class="uv3__gridwrap-thumb">
  16. ...
  17. </view>
  18. </template>
  19. <template v-else>
  20. <template v-if="item.type == 'widget'">
  21. <!-- 自定义部件 -->
  22. <component :is="item.imgico" />
  23. </template>
  24. <template v-else>
  25. <!-- 自定义图标 -->
  26. ...
  27. </template>
  28. </template>
  29. </view>
  30. <!-- 标签 -->
  31. <view v-if="!item.hideLabel" class="label clamp2">{{item.label}}</view>
  32. </view>
  33. </view>
  34. </swiper-item>
  35. </swiper>
  36. <!-- 桌面二级菜单弹窗 -->
  37. <Popup v-model="deskPopupVisible">
  38. <view class="uv3__deskpopup">
  39. ...
  40. </view>
  41. </Popup>
  42. ...
  43. </template>

点击桌面菜单,打开链接地址、跳转路由页面、二级弹窗、自定义绑定事件等方式。当然也可以进行一些其它定制化逻辑处理。

  1. const handleClickDeskMenu = (item) => {
  2. if(item.link) {
  3. // 链接
  4. openURL(item.link)
  5. }else if(item.path) {
  6. // 页面路由地址
  7. uni.navigateTo({
  8. url: item.path.substr(0, 1) == '/' ? item.path : '/' + item.path
  9. })
  10. }else if(Array.isArray(item.children)) {
  11. // 二级菜单
  12. deskPopupMenu.value = item
  13. deskPopupVisible.value = true
  14. }
  15. // 绑定点击事件
  16. typeof item.onClick === 'function' && item.onClick()
  17. }

桌面菜单JSON配置项示例

  1. const deskMenu = ref([
  2. {
  3. pid: 20240507001,
  4. list: [
  5. {label: '今日', imgico: 'today', type: 'widget', hideLabel: true, size: '2x1'},
  6. {label: '天气', imgico: 'weather', type: 'widget', hideLabel: true, size: '2x1'},
  7. {label: '日历', imgico: 'fullcalendar', type: 'widget', path: 'pages/calendar/index', size: '4x2'},
  8. // {label: '日历', imgico: 'date', type: 'widget', size: '2x2'},
  9. // {label: '备忘录', imgico: 'note', type: 'widget', size: '2x2'},
  10. {label: 'audio', imgico: 'audio', type: 'widget', size: '2x1'},
  11. {
  12. label: '相册', imgico: '/static/svg/huaban.svg', background: '#00aa7f',
  13. onClick: () => {
  14. // ...
  15. }
  16. },
  17. ...
  18. ]
  19. },
  20. ...
  21. {
  22. pid: 20240510001,
  23. list: [
  24. {label: 'Github', imgico: '/static/svg/github.svg', background: '#607d8b', size: '3x1'},
  25. {label: '码云Gitee', imgico: '/static/svg/gitee.svg', background: '#bb2124',},
  26. {label: '抖音', imgico: '/static/svg/douyin.svg', background: '#1c0b1a', size: '1x2'},
  27. {label: 'ChatGPT', imgico: '/static/svg/chatgpt.svg', hideLabel: true, background: '#11b6a7', size: '3x2'},
  28. ...
  29. ]
  30. },
  31. {
  32. pid: 20240511003,
  33. list: [
  34. {label: 'uni-app', imgico: '/static/uni.png', link: 'https://uniapp.dcloud.net.cn/'},
  35. {label: 'vitejs官方文档', imgico: '/static/vite.png', link: 'https://vitejs.dev/'},
  36. {
  37. label: '主题壁纸', imgico: 'color-filled', type: 'icon',
  38. onClick: () => {
  39. // ...
  40. }
  41. },
  42. {label: '日历', imgico: 'calendar', type: 'widget', path: 'pages/calendar/index', background: '#fff',},
  43. {label: '首页', imgico: 'home', type: 'icon', path: 'pages/index/index'},
  44. {label: '工作台', imgico: 'shop-filled', type: 'icon', path: 'pages/index/dashboard'},
  45. {
  46. label: '组件',
  47. 'children': [
  48. {label: '组件', imgico: '/static/svg/component.svg', path: 'pages/component/index'},
  49. {label: '表格', imgico: '/static/svg/table.svg', path: 'pages/component/table'},
  50. ...
  51. ]
  52. },
  53. ...
  54. {
  55. label: '关于', imgico: 'info-filled', type: 'icon',
  56. onClick: () => {
  57. // ...
  58. }
  59. },
  60. {
  61. label: '公众号', imgico: 'weixin', type: 'icon',
  62. onClick: () => {
  63. // ...
  64. }
  65. },
  66. ]
  67. }
  68. ])

整个项目采用毛玻璃模糊化UI视觉效果。简单的实现了表格、表单、编辑器、用户管理/角色管理等常用业务功能。旨在探索uniapp全新的手机后台管理系统方案,当然也可以在此基础上做一些其它创新,加上一些定制化功能模块。

OK,以上就是uniapp+vue3开发手机OA管理管理系统的一些分享,希望对大家有些帮助哈!

最后附上两个最新实例项目

https://www.cnblogs.com/xiaoyan2017/p/18165578

https://www.cnblogs.com/xiaoyan2017/p/18092224

 

原文链接:https://www.cnblogs.com/xiaoyan2017/p/18204751

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号