SAP UI5 之Bootstrap（引导）笔记二

Austin_YB

已于 2023-04-30 15:14:50 修改

阅读量905

点赞数

分类专栏： SAPUI5 文章标签： bootstrap 笔记 javascript

于 2023-04-30 12:45:30 首次发布

本文链接：https://blog.csdn.net/qq_45824905/article/details/130447587

版权

SAPUI5 专栏收录该内容

6 篇文章 10 订阅

订阅专栏

文章目录

Setting up Visual Studio Code for UI5 development
- 1.0 官网 Walkthrough学习-Bootstrap 引导加载

Setting up Visual Studio Code for UI5 development

学习链接

Setting up Visual Studio Code for UI5 development

1.0 官网 Walkthrough学习-Bootstrap 引导加载

Bootstrap加载引导过程

在使用 SAPUI5 执行某些操作之前，我们需要加载并初始化它。加载和初始化SAPUI5的过程称为引导。

1.0.1 在 index.html中新增script标签

标签的意义：

从服务中加载UI5框架，初始化核心模块
	•  src: 标签是指定加载的核心库，初始化SAP UI5运行所需要的资源
	•  data-sap-ui-theme: 默认主题，（SAPUI5控制支持不同的主题）
	•  data-sap-ui-libs: 指定所需的UI库
	•  data-sap-ui-compatVersion: 浏览器的版本
	•  data-sap-ui-async: 异步加载过程（后面解释）
	•  data-sap-ui-onInit：告诉 SAPUI5 核心，命名空间中的资源与位于同一文件夹
 data-sap-ui-resourceroots: '{ "sap.ui.demo.walkthrough": "./"}'(根目录后面解释)

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SAPUI5 Walkthrogh</title>
        <script
        id="sap-ui-bootstrap"
        src="https://sdk.openui5.org/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-libs="sap.m"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true"
        data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index"
        data-sap-ui-resourceroots='{
            "sap.ui.demo.walkthrough": "./"
        }'>
        </script>
    </head>
    <body>
        <div>Hello SAP UI5</div>
    </body>
</html>

1.0.2 在webapp 下面新增index.js文件

在这里插入图片描述
新增代码

sap.ui.define([
], function () {
	"use strict";
	alert("UI5 is ready");
});

1.0.3启动UI5的服务

打开浏览器输入： http://localhost:8080/index.html

首次加载会比较慢，
在这里插入图片描述
打开浏览器F12进调试模式-开发者模式
点击网络看到UI5 引导程序加载的过程中的资源，

Austin_YB

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SAP UI5 之Bootstrap（引导）笔记二

在使用 SAPUI5 执行某些操作之前，我们需要加载并初始化它。加载和初始化SAPUI5的过程称为引导。打开浏览器输入： http://localhost:8080/index.html。打开浏览器F12进调试模式-开发者模式。
复制链接

扫一扫