SAPUI5-Walkthrough-Hello World

国际惯例，环境安装完后第一个程序肯定是Hello World。只要用一门用语言能写出Hello World程序，就已经精通这门语言了。

 

以SAPUI5的walkthroug中的源码为例，下载源码下来，让它在我们的本地环境跑起来。

首先，在SAPUI5网站，如图所示下载Walkthrough的第一代码示例，HelloWorld

点击Coding对应的链接自动下载完成，将压缩包解压

 打开Visual Studio Code,点击File->Add Folder to Workspace,将文件引入

 如下图所示：选中文件，点ADD

 点击YES

 文件代码被引入环境

HelloWorld代码简单，因为只有一个html文件，直接点击菜单RUN->Run Without debug，选择对应浏览器即可打开。因为普通的html，浏览器可以直接搞定，可以不需要部署到服务器，但是一个web应用，包含了XML/JS/JSON等格式的文件，需要动态加载和数据信息解析，浏览器没法直接将里面的内容解析出来，就需要一个运行时工具（我们安装的node.js或UI5 Tooling就提供了这功能，作用和部署到tomacat/Apache然后打开效果一样）进行解析展示处理数据，以让浏览器能够在访问应用的时候，将这些信息正确的识别出来。

 所以整一个稍微复杂的demo下载下来演示一下。以官网quikstart的第一个demo为例

 也是引入IDE环境，这时候如果直接执行html文件，它是没法执行的

 通过浏览器打开index.html,按F12，其他文件没有被加载，所以无法正确显示，所以我们需要其他工具来辅助

在VScode中，选中当前项目文件，点击打开命令行界面。

 Terminal对应的文件路径一定要选正确

执行命令：（问题清单及解决办法详见文章末尾）

UI5 serve

 也可以执行npm run start命令，这个是会找到package.json的script  start.其实也是间接执行了ui5 serve 

npm run start

Ctrl+点击URL的链接跳转至浏览器打开，点击index.html，执行成功

你会遇到的问题及解决办法：

1.执行ui5 serve提示缺少package.json中依赖项：@openui5/themelib_sap_fiori_3。如果大家看了我写的UI5 Tooling 和 NPM的文章就能理解，这里是少了引用的资源。

 解决办法，拉取资源放在本地环境，执行代码 npm install,自动识别Package.json中依赖项。当然因为UI5 Tooling已经安装，你也可以根据报错信息，通过npm install  module_name 逐个安装。

NPM  install

 安装完成后，项目路径下，会多一个文件夹node_modules。这种ui5 tooling就是本地化安装了

2.缺少manifest.json

 解决办法：在webapp目录下创建manifest.json，只要先新增一个应用ID。

 代码如下：

{
    "sap.app":{
        "id":"helloworld"
    }
}

 并且删除UI5.yaml中的（以后再说它的作用）

resources:
  configuration:
    paths:
      webapp: .

3.ui serve执行成功了，但是打开地址之后，仍没显示界面的按钮，按F12或右键-检查

显示如下：发现提示index.html中的资源sap-ui-core.js文件找不到 

解决办法：（三种方式让它体面）

方法1：直接改index.html文件，将scr引用的地址替换成下面地址，然后刷新浏览器（我们在跟着walkthrough练习的时候，推荐用这种办法）

https://sapui5.hana.ondemand.com/resources/sap-ui-core.js

 

 这个方式在walkthrough里也是有专门的文章介绍（正式环境部署一定要指定版本号）：

方法2：直接下载SAPUI5 runtime，解压后添加到项目根目录下的rousources文件夹下。这种操作我在UI5 Tooling介绍的有涉及，这里不多写。

方法3：执行UI5  Tooling命令，添加SAPUI5 runtime资源到项目UI5.yaml文件中 

ui5 use openui5@latest    "源码用的是OPENUI5,所以这里而用openUI5最新版

ui5 add sap.ui.core sap.m sap.ui.table themelib_sap_fiori_3 

上面命令等同于分别执行
ui5 add sap.ui.core
ui5 add sap.ui.table
ui5 add sap.m 
ui5 add themelib_sap_fiori_3 

 注意观察：UI5.yaml文件的变化.新增了对应资源的配置，但是项目文件目录下不会有体现，这几个命令相当于直接在UI5.yaml中增加代码，但是注意，ui5 use openui5@latest获取最新的版本。

直接执行ui5  serve，根据ui.yaml进行下载，在ui5tooling的framework文件夹中会有对应的资源,在你没删除之前，就不会重复下载。特别注意OpenUI5时指定了版本号的，无论哪种方式，只要正式环境一定要指定版本，这个很重要在通过UI5 serve执行的时候,打开网址，以上内容会被自动下载（下载后保存在UI5 Tooling 安装目录对应的framework文件中）。

第一次执行UI5，会有下载的提示

 

第二次执行就不会重复下载：

点击index.html文件运行结果与官网示例程序效果一致，这里的resources文件夹是通过UI5 Tooling的服务器逻辑实现