摘要：攻城獅們現在基于平台開發時，已不需要寫很多原生代碼了，取而代之的是在項目中使用各類平台架構，如：智慧園區應用架構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》，原文作者：技術火炬手 。
點選關注，第一時間了解華為雲新鮮技術~