共计 2393 个字符，预计需要花费 6 分钟才能阅读完成。
摘要：攻城狮们当初基于平台开发时，已不须要写很多原生代码了，取而代之的是在我的项目中应用各类平台框架，如：智慧园区利用框架 MainPortal。
本文分享自华为云社区《HDC2021|20 分钟能干嘛？带你玩转智慧园区利用框架 MainPortal》，原文作者：技术火炬手。
场景概述
在智慧园区的业务场景中有多个模块，例如智慧设施等。各个模块都有对应的治理页面和大屏页面，对立门户能够依据业务须要，在多个大屏界面或治理页面中进行切换，以晋升操作体验。在智慧园区的业务场景中，也须要一个对立的门户来出现智慧园区各模块的业务性能。
对立门户可用于整合现有业务零碎的访问控制，通过对立入口登录实现对各业务的集中拜访，登录用户能够通过对立的门户在桌面上进行各项业务的解决，缩小零碎的应用复杂度。
对立门户实现的性能包含对立入口登录、个性化导航配置、零碎导航、用户信息管理等性能，从而升高用户进入零碎和获取各模块信息的难度，应用和获取信息更间接、不便。MainPortal 即为实现对立门户性能的利用框架。
性能解读
对立门户的性能十分丰盛，以“显示用户菜单”为例，局部性能如下：
除了菜单配置等性能外，对立门户还提供了集体桌面设置的能力，在这里能够设置导航栏的展现格调，个人主页面等信息，上面几张图为对立门户的理论效果图：
集体桌面设置预览
导航栏展现格调设置
集体首页设置
组件解读
MainPortal 基于 AppCube 的高级页面开发，由 smartcampus_mainframe_widget 组件形成，组件反对在线编辑，也能够下载后，在本地离线编辑。组件形成如下：
其中：
audio：音频文件的寄存目录
image：组件内图标的寄存目录
messages-en.json：当语言切换为英文时，组件英文展现信息
messages-zh.json：当语言切换为中文时，组件中文展现信息
packageinfo.json：该组件的名称，形容，依赖等根本信息
smartcampus_mainframe_widget.css：组件的款式代码
smartcampus_mainframe_widget.editor.js：组件的配置信息文件
smartcampus_mainframe_widget.ftl：组件的 DOM 文件
smartcampus_mainframe_widget.js：组件的 JavaScript 文件
smartcampus_mainframe_widget.png：组件的展现图标
代码解读
（一）让咱们从显示用户菜单的逻辑流程图开始
（二）菜单展现的 DOM 构造代码解读
通过查看 Smartcampus_mainframe_widget.ftl 文件，能够看到菜单的展现绑定在 Menulist 上，其中 DOM 是通过 VUE-ELEMENT 实现的：
（三）菜单的查问逻辑代码解读：
通过查看 Smartcampus_mainframe_widget.js 文件，首先能够看到组件的 js 代码构造树：
- Init：组件初始化
- Render：组件实例化渲染
其中，能够在 render 函数中，new 一个 Vue 实例，挂载在 DOM 元素上: unified-portal。Vue 实例的整个生命周期函数，能够在此实现。
而后，从 created 函数，找到菜单初始化的入口函数 start()：
Start 函数的逻辑：
- 先校验以后用户是否已登录
- 如果已登录，判断是否跳转到第三方利用中
- 通过 getParams 函数获取对立门户展现须要的参数信息和用户菜单
GetParams 函数的逻辑：
- 查问对立门户展现须要的零碎参数，例如：经营台图标等信息
- 再调用 renderPage 函数查问以后用户的集体桌面菜单信息，例如：菜单信息，快捷方式，信息栏展现等
RenderPage 函数的逻辑：
- 判断以后的页面是否为预览模式
- 通过 queryPortalProfile 查问用户的集体桌面信息
- 再调用 getPortalProfile 函数，将集体桌面信息展现在对立门户上
- 异步调用 getCurrentOperatorMenuList 查问用户能查问最新菜单信息
- 比对 2,4 的菜单信息，如果不统一则调用 compareMenu 函数，刷新集体桌面
getPortalProfile 函数的逻辑：
- 将集体桌面的 dockProfile 赋值给 MenuList，用于门户菜单导航的展现
- 展现个人主页面，如果找不到则查问菜单树的第一个菜单
CompareMenu 函数的逻辑：
- 查问以后用户对应角色能查看的菜单列表：this.sysMenuList
- 查问用户以后能查看的菜单列表的：this.portalProfile.originDockProfile
- 比对 1 和 2 的菜单列表信息，如果不统一，则调用函数，更新集体桌面设置信息：setPortalProfile
至此，咱们曾经理解了“显示用户菜单”的根本代码构造。
在理论的园区智慧化我的项目中，只须要搭载此份利用框架 MainPortal 就可实现各个子利用 / 子系统的菜单集成，大幅晋升开发效率。怎么样？快来试试吧。
新用户专享园区开发者帐号收费试用，请戳：https://bbs.huaweicloud.com/forum/thread-51478-1-1.html
作为华为 ICT 基础设施业务面向寰球开发者的年度盛会，华为开发者大会 2021（Cloud）将于 2021 年 4 月 24 日 -26 日在深圳举办。本届大会以 #每一个开发者都了不起# 为主题，将汇聚业界大咖、华为科学家、顶级技术专家、天才少年和泛滥开发者，独特探讨和分享云、计算、人工智能等最新 ICT 技术在行业的深度翻新和利用。智能时代，每一个开发者都在发明裹足不前的奔流时代。世界有你，了不起！
理解更多华为智慧园区开发者资讯，欢送拜访：https://bbs.huaweicloud.com/forum/forum-1013-1.html
点击关注，第一工夫理解华为云陈腐技术~
