openui5這個組件庫對於很多前端來說都是比較陌生的，在之前我甚至都沒有聽說過這個東西。現在公司項目以這組件庫為主，那就必須要加以熟悉。但是在百度上搜到的資料比較少，所以把自己對於這個組件的了解和使用記錄一下。
openui5官網：https://openui5.org/，目前文檔沒有中文版的，因此都是英語。
在官網中點擊Documentation，在下面有個Demos，可以看到有個Demo Apps，這里面有一些官網提供的demo和組件的效果演示，大家可以自己下載然后看下具體的項目目錄結構，從目錄結構可以看到，demo很明顯是mvc模式。現在我們來從零搭建一個openui5的項目。在官網上，點擊Releasea，在最下面有個All Releases，這里面都是關於openui5組件的一些sdk，這里我下載的是runtime，並沒有下載sdk，因為sdk里面不僅包含了openui5的所有組件，還有一些組件的文檔說明，體積比較大。所以我選擇了只有組件的runtime。下載解壓后有個resources文件夾，這個文件夾下面就是oepnui5提供的所有組件了。
之前我們用的vue腳手架或者react腳手架，咱們啟動項目時腳手架會自動起一個webServer本地服務。但是我們新建一個openui5的項目就沒有自動給我們起這種服務，因此我們需要自己搭建這種環境，我自己是用的tomcat搭建的本地服務器來運行項目的，當然了，除此之外還有很多其他方式，比如建一個nodejs項目自己開啟一個webServer，或者使用google瀏覽器的webServer插件等。因為我自己的環境已經搭好了，再加上這些東西百度上資料也比較多，所以這里就不多說了。當我們搭建好之后，建立一個項目，把從官網下載解壓后的resources文件夾拷貝到項目下 ，建立一個index.html文件，然后我們引入openui5到項目中：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>openui5</title> 7 8 <script 9 id="sap-ui-bootstrap" 10 src="./resources/sap-ui-core.js" 11 data-sap-ui-theme="sap_belize" 12 data-sap-ui-resourceroots='{ 13 "test": "./" 14 }' 15 data-sap-ui-oninit="module:sap/ui/core/ComponentSupport" 16 data-sap-ui-compatVersion="edge" 17 data-sap-ui-async="true" 18 data-sap-ui-frameOptions="trusted"> 19 </script> 20 <script> 21 sap.ui.getCore().attachInit(function () { 22 sap.ui.require([ 23 "sap/m/Page", 24 "sap/ui/core/ComponentContainer" 25 ], function (Page, ComponentContainer) { 26 new Page({ 27 showHeader: false, 28 content: new ComponentContainer({ 29 height: '100%', 30 name: 'test', 31 settings: { 32 id: 'test' 33 } 34 }) 35 }).placeAt('content'); 36 }) 37 }); 38 </script> 39 40 </head> 41 42 <body> 43 <div id='content'></div> 44 </body> 45 46 </html>
在這段代碼中，除了引入opeui組件外，還對目錄路徑進行了重命名，也就是data-sap-ui-resourceroots，我指定了當前目錄為根路徑，方便以后引入組件使用。sap.ui.getCore().attachInit是在組件加載完成后會自動調用，並執行該函數下的回調函數。如果不在這個函數下面創建組件，而是直接使用組件，會報錯說找不到組件，這時候加個定時器延時三秒執行就能找到了，這說明組件庫是異步加載的，而attachInit是官網提供的方法，從官網demo中也可以找到。在這里我創建一個Page組件，然后在Page中直接創建了ComponentContainer組件，設置了id和高度，然后調用placeAt把組件添加進div中。其實這里的Page組件完全可以省略掉，就創建ComponentContainer也沒問題。
到了這里，項目也一樣跑不起來，這時候我們啟動本地服務打開項目下的index.html會發現控制台有一大堆報錯：
很明顯，和官網demo比起來，我們項目顯的有些簡單了，只有一個資源文件夾和html文件，根據錯誤信息看出，我們還差幾個文件，現在我們把提示不存在的那幾個文件在項目中建起來，於是目錄就變成了這樣：
這是時候刷新頁面，仍然報錯：
剛才我們建立了一個Component的js文件，這個文件是每次啟動項目肯定會執行的，這個文件是用於繼承openui5的UIComponent組件的，然后在Component文件下，調用父組件的initialize方法去初始化路由。所以Component需要繼承UIComponent，在Component中增加如下代碼：
1 sap.ui.define([ 2 'sap/ui/core/UIComponent' // 引入openui5的UIComponent組件 3 ], 4 function (UIComponent) { 5 'use strict'; 6 // 繼承組件 7 return UIComponent.extend('test.Component', { 8 metadata: { 9 manifest: 'json' 10 }, 11 // 該函數可以在組件初始化時自動調用 12 init: function () { 13 // 將父組件init函數指向子組件本身 14 UIComponent.prototype.init.apply(this, arguments); 15 // 初始化路由 16 this.getRouter().initialize(); 17 } 18 }); 19 });
加上之后，再次刷新頁面，控制台繼續報錯：
提示缺少一個manifest.json文件，在上面有提到過路由，而路由的定義，就和這個缺少的文件有關，所以這文件極為重要，里面包含了很多配置信息，官網的demo中，manifest.json有些配置我們搭建簡單項目根本用不上，所以我對它的文件進行了簡化，現在在項目根目錄下創建manifest.json文件：
1 { 2 "_version": "1.12.0", 3 4 "sap.ui5": { 5 "rootView": { 6 "viewName": "test.home.view.Home", 7 "type": "XML", 8 "async": true, 9 "id": "app" 10 }, 11 12 "routing": { 13 "config": { 14 "routerClass": "sap.m.routing.Router", 15 "viewType": "XML", 16 "viewPath": "test.home.view",
18 "controlAggregation":"pages", 17 "controlId": "app", 18 "async": true 19 }, 20 21 "routes": [ 22 { 23 "pattern": "", 24 "name": "home", 25 "target": "home" 26 } 27 ], 28 29 "targets": { 30 "home": { 31 "viewName": "Home", 32 "viewId": "homeId" 33 } 34 } 35 } 36 } 37 }
在這個配置文件中，我只保留了必須要的配置，
rootView：在該對象下指定項目的入口視圖
config：指定使用組件路由，視圖文件類型，是否異步加載，視圖id。
routes：指定路由路徑，這里設置為空，就相當於根目錄。路由名字和路由對應的目標文件。
targets：這里面指定路由目標文件，我這里指定了name，是因為routes下面的那個target屬性為name，這里需要對應，否則找不到。
在這里面還有個疑惑，在上面的rootView中，viewName屬性我們指定為test.home.view.Home，這里可看成是test/home/view/Home，test就是在index.html文件中自己設置根目錄路徑。項目執行順序會先到rootView里面找到這些配置，這里我們指定了這么一個路徑，那我們就需要在項目中增加一個對應的文件，否則會出問題。建立一個home目錄：
因為這個組件是以mvc模式為主，所以建立的文件也是根據mvc模式來的，但我這里只建了vc而沒有m，因為目前只是簡單搭建項目，暫時不需要m，所以我給省略了。在view和controller下分別有Home.view.xml文件和Home.controller.js文件，這兩個文件都不能夠為空，所以我們分別在兩個文件中增加簡單的代碼讓項目運行起來：
Home.controller.js
1 sap.ui.define([ 2 "sap/ui/core/mvc/Controller", //引入組件的controller控制器 3 ], function (Controller) { 4 "use strict"; 5 // 繼承組件的Controller 6 return Controller.extend("test.home.controller.Home", { 7 // 初始化函數，自動調用 8 onInit : function () { 9 console.log('進入到了Home controller'); 10 } 11 }); 12 13 });
Home.view.xml
1 <mvc:View 2 controllerName="test.home.controller.Home" 3 xmlns="sap.m" 4 xmlns:mvc="sap.ui.core.mvc"> 5 <App id='app'> 6 <Text text='這里是Home頁面的Text標簽'></Text> 7 </App> 8 </mvc:View>
controllerName：指定相關聯的視圖控制器。
App標簽指定的id和manifest.json里面設置的controId需一致。
然后我們再次刷新頁面運行：
可以看到這句話是我們在xml中Text標簽的那句話。控制台也沒有任何報錯，到這里一個簡單的openui5項目就算是搭建成功了。前面有提到openui5是以mvc模式為主，因此需要對mvc模式有一定的了解。
這個項目執行順序，項目啟動后進入到根目錄的index.html文件，然后執行根目錄下的Component.js文件，在這個文件中初始化路由，而路由的定義就是在manifest.json下的rootView中指定路徑的，然后會在manifest.json中找到routing，初始化相關配置，在通過routes找到對應的路由頁面進行渲染。執行過程大致如此。