導讀：攻城獅們現在基于平臺開發時，已不需要寫很多原生代碼了，取而代之的是在項目中使用各類平臺框架，如：智慧園區應用框架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就可完成各個子應用/子系統的菜單集成，大幅提升開發效率。怎么樣?快來試試吧。

　　新用戶專享園區開發者帳號免費試用，請戳：

　　作為華為ICT基礎設施業務面向全球開發者的年度盛會，華為開發者大會2021(Cloud)將于2021年4月24日-26日在深圳舉行。本屆大會以#每一個開發者都了不起#為主題，將匯聚業界大咖、華為科學家、頂級技術專家、天才少年和眾多開發者，共同探討和分享云、計算、人工智能等最新ICT技術在行業的深度創新和應用。智能時代，每一個開發者都在創造一往無前的奔騰時代。世界有你，了不起!

　　了解更多華為智慧園區開發者資訊，歡迎訪問：