openui5(SAPUI5)组件-项目搭建
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找到对应的路由页面进行渲染。执行过程大致如此。
