導(dǎo)讀：攻城獅們現(xiàn)在基于平臺(tái)開發(fā)時(shí)，已不需要寫很多原生代碼了，取而代之的是在項(xiàng)目中使用各類平臺(tái)框架，如：智慧園區(qū)應(yīng)用框架MainPortal，基于它能夠快速的將園區(qū)中各個(gè)子應(yīng)用/子系統(tǒng)進(jìn)行菜單集成，并在統(tǒng)一入口進(jìn)行設(shè)置和展示，如智慧設(shè)施、資產(chǎn)管理…

　　文末福利：新用戶專享園區(qū)開發(fā)者帳號(hào)免費(fèi)試用

　　場(chǎng)景概述

　　在智慧園區(qū)的業(yè)務(wù)場(chǎng)景中有多個(gè)模塊，例如智慧設(shè)施等。各個(gè)模塊都有對(duì)應(yīng)的管理頁面和大屏頁面，統(tǒng)一門戶可以根據(jù)業(yè)務(wù)需要，在多個(gè)大屏界面或管理頁面中進(jìn)行切換，以提升操作體驗(yàn)。在智慧園區(qū)的業(yè)務(wù)場(chǎng)景中，也需要一個(gè)統(tǒng)一的門戶來呈現(xiàn)智慧園區(qū)各模塊的業(yè)務(wù)功能。

　　統(tǒng)一門戶可用于整合現(xiàn)有業(yè)務(wù)系統(tǒng)的訪問控制，通過統(tǒng)一入口登錄實(shí)現(xiàn)對(duì)各業(yè)務(wù)的集中訪問，登錄用戶可以通過統(tǒng)一的門戶在桌面上進(jìn)行各項(xiàng)業(yè)務(wù)的處理，減少系統(tǒng)的使用復(fù)雜度。

　　統(tǒng)一門戶實(shí)現(xiàn)的功能包括統(tǒng)一入口登錄、個(gè)性化導(dǎo)航配置、系統(tǒng)導(dǎo)航、用戶信息管理等功能，從而降低用戶進(jìn)入系統(tǒng)和獲取各模塊信息的難度，使用和獲取信息更直接、方便。MainPortal即為實(shí)現(xiàn)統(tǒng)一門戶功能的應(yīng)用框架。

　　功能解讀

　　統(tǒng)一門戶的功能非常豐富，以“顯示用戶菜單”為例，部分功能如下：

　　除了菜單配置等功能外，統(tǒng)一門戶還提供了個(gè)人桌面設(shè)置的能力，在這里可以設(shè)置導(dǎo)航欄的展示風(fēng)格，個(gè)人主頁面等信息，下面幾張圖為統(tǒng)一門戶的實(shí)際效果圖：

　　個(gè)人桌面設(shè)置預(yù)覽

　　導(dǎo)航欄展示風(fēng)格設(shè)置

　　個(gè)人首頁設(shè)置

　　組件解讀

　　MainPortal基于AppCube的高級(jí)頁面開發(fā)，由smartcampus_mainframe_widget組件構(gòu)成，組件支持在線編輯，也可以下載后，在本地離線編輯。組件構(gòu)成如下：

　　其中：

　　audio：音頻文件的存放目錄

　　image：組件內(nèi)圖標(biāo)的存放目錄

　　messages-en.json：當(dāng)語言切換為英文時(shí)，組件英文展示信息

　　messages-zh.json：當(dāng)語言切換為中文時(shí)，組件中文展示信息

　　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：組件的展示圖標(biāo)

　　代碼解讀

　　(一)讓我們從顯示用戶菜單的邏輯流程圖開始

　　(二)菜單展示的DOM結(jié)構(gòu)代碼解讀

　　通過查看Smartcampus_mainframe_widget.ftl文件，可以看到菜單的展示綁定在Menulist上，其中DOM是通過VUE-ELEMENT實(shí)現(xiàn)的：

　　(三)菜單的查詢邏輯代碼解讀：

　　通過查看Smartcampus_mainframe_widget.js文件，首先可以看到組件的js代碼結(jié)構(gòu)樹：

　　·Init：組件初始化

　　·Render：組件實(shí)例化渲染

　　其中，可以在render函數(shù)中，new一個(gè)Vue實(shí)例，掛載在DOM元素上: unified-portal。Vue實(shí)例的整個(gè)生命周期函數(shù)，可以在此實(shí)現(xiàn)。

　　然后，從created函數(shù)，找到菜單初始化的入口函數(shù)start()：

　　Start函數(shù)的邏輯：

　　·先校驗(yàn)當(dāng)前用戶是否已登錄

　　·如果已登錄，判斷是否跳轉(zhuǎn)到第三方應(yīng)用中

　　·通過getParams函數(shù)獲取統(tǒng)一門戶展示需要的參數(shù)信息和用戶菜單

　　GetParams函數(shù)的邏輯：

　　·查詢統(tǒng)一門戶展示需要的系統(tǒng)參數(shù)，例如：運(yùn)營臺(tái)圖標(biāo)等信息

　　·再調(diào)用renderPage函數(shù)查詢當(dāng)前用戶的個(gè)人桌面菜單信息，例如：菜單信息，快捷方式，信息欄展示等

　　RenderPage函數(shù)的邏輯：

　　·判斷當(dāng)前的頁面是否為預(yù)覽模式

　　· 通過queryPortalProfile查詢用戶的個(gè)人桌面信息

　　·再調(diào)用getPortalProfile函數(shù)，將個(gè)人桌面信息展示在統(tǒng)一門戶上

　　·異步調(diào)用getCurrentOperatorMenuList查詢用戶能查詢最新菜單信息

　　·比對(duì)2,4的菜單信息，如果不一致則調(diào)用compareMenu函數(shù)，刷新個(gè)人桌面

　　getPortalProfile函數(shù)的邏輯：

　　·將個(gè)人桌面的dockProfile賦值給MenuList，用于門戶菜單導(dǎo)航的展示

　　·展示個(gè)人主頁面，如果找不到則查詢菜單樹的第一個(gè)菜單

　　CompareMenu函數(shù)的邏輯：

　　·查詢當(dāng)前用戶對(duì)應(yīng)角色能查看的菜單列表：this.sysMenuList

　　·查詢用戶當(dāng)前能查看的菜單列表的：this.portalProfile.originDockProfile

　　·比對(duì)1和2的菜單列表信息，如果不一致，則調(diào)用函數(shù)，更新個(gè)人桌面設(shè)置信息：setPortalProfile

　　至此，我們已經(jīng)了解了“顯示用戶菜單”的基本代碼結(jié)構(gòu)。

　　在實(shí)際的園區(qū)智慧化項(xiàng)目中，只需要搭載此份應(yīng)用框架MainPortal就可完成各個(gè)子應(yīng)用/子系統(tǒng)的菜單集成，大幅提升開發(fā)效率。怎么樣?快來試試吧。

　　新用戶專享園區(qū)開發(fā)者帳號(hào)免費(fèi)試用，請(qǐng)戳：

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

　　了解更多華為智慧園區(qū)開發(fā)者資訊，歡迎訪問：