摘要：攻城獅們現在基於平台開發時，已不需要寫很多原生代碼了，取而代之的是在項目中使用各類平台框架，如：智慧園區應用框架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
本文分享自華為雲社區《HDC2021|20分鍾能干嘛？帶你玩轉智慧園區應用框架MainPortal》，原文作者：技術火炬手 。