如何在 SAP UI5 应用中集成第三方库 ：一个在移动设备上查看 Web 应用打印调试信息的小技巧
这是 Jerry 2021 年的第 43 篇文章，也是汪子熙公众号总共第 320 篇原创文章。
做 Web 开发的程序员，无论使用 SAP UI5，还是 Angular，React，Vue，每天都离不开 Chrome / Firefox 开发者工具。
Jerry 2018 年的时候，曾经写过一篇关于 Chrome 开发者工具的文章：Jerry 和您聊聊 Chrome 开发者工具。
这些开发者工具虽然好用，但是当 Web 应用在移动设备上运行时，想直接在手机浏览器上查看其使用 console.log 打印出的日志和调试信息，是一件比较麻烦的事情。
比如 Jerry 之前写过一篇文章：在 Windows 笔记本上调试运行在 iOS 设备上的前端应用，介绍了如何通过远程连接的方式，直接在 Windows 电脑上，对运行在 iOS 设备 Safari 浏览器里的 Web 应用进行单步调试：
当然，如果仅仅需要在移动设备比如手机上运行一下 Web 应用，然后想查看其打印的调试信息，用上述远程调试的方式就未免大材小用了。
vConsole 是腾讯发布的一个工具库，从其获得的超过一万三千个 stars，就知道这个库的受欢迎程度：
vConsole 的一种用法是，将其库文件下载到本地后，在网页的 script 标签里引用。创建一个 VConsole 实例后，仍然采用正常的 console.log 打印调试信息或者日志。
此时渲染出的网页右下角，会出现一个绿色的 vConsole 按钮：
点击之后，能打开一个类似 Chrome 开发者工具的面板，从而在里面能够看到应用程序使用 console.log 打印出的调试信息。
然而，Jerry 的 SAP 技术交流群里，有个朋友想在 SAP UI5 应用里使用 vConsole，但是发现不工作。
这位朋友直接按照 vConsole 的教程，在 SAP UI5 应用的 index.html 里通过 script 标签引入 vConsole.
这种引入第三方库文件的做法可以工作于 Angular，React 或者 Vue，然而并不是 SAP 推荐的在 SAP UI5 里使用第三方库的方式。因为绝大多数标准的 SAP UI5 应用的使用场景，都是通过 Fiori Launchpad 作为入口来访问的。这种情况下，SAP UI5 应用的入口是 Component.js, 而不是 index.html.
正确的做法：
(1)在 SAP UI5 工程里，新建一个 lib 文件夹，把 vConsole 库文件放进去。
(2)在需要使用 vConsole 功能的控制器实现里，使用 sap.ui.define 声明 VConsole 的依赖路径。如下图标号 2 所示。这个依赖路径分为两部分，前半部分 sap/ui/demo/CombineLatest 是将该 SAP UI5 应用的命名空间 sap.ui.demo.CombineLatest 里所有的 . 替换成 / 的结果，后半部分就是 VConsole 库文件在 SAP UI5 应用中的相对路径。
(3)～(4)：通过 sap.ui.define 声明的 vConsole 依赖，加载完毕后，即可在 SAP UI5 应用控制器的 JavaScript 代码里正常使用了。
最后试试效果，在手机上访问这个 SAP UI5 应用：
点击右下角的 vConsole 按钮。看到了期望中的由代码 console.log 打印出的 Hello World：
除了 Log 之外，这个 VConsole 还提供了一些其他的实用面板。
System 面板：显示当前访问应用的 Url，客户端版本，使用的网络类型：
Element 面板：能查看该应用在手机上渲染出的原生 HTML 代码。比如安卓手机上访问 SAP UI5 应用，能看到 HTML 源代码里包含 data-sap-ui-os=“Android8.0.0” 的 UI5 自定义属性。
当然，在 SAP UI5 应用里使用第三方库，绝对不止本文所提到的这一种方式。
Jerry 之前曾经写过一篇文章，如果需要在 SAP UI5 里引入一个由第三方库实现的调用设备摄像头拍照的功能，也可以将第三方库封装成一个 SAP UI5 自定义控件(Custom Control). 实现细节参考我的文章：如何在SAP UI5应用里添加使用摄像头拍照的功能。
本文例子的源代码：
https://github.com/wangzixi-diablo/ui5-toolset/tree/main/combineLatest
感谢阅读。
更多Jerry的原创文章，尽在：“汪子熙”:
更多阅读
在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用
答网友提问：使用 SAP Fiori Tools 创建的 Fiori Elements 应用，如何进行二次开发？
本地开发好的 SAP Fiori Elements 应用，如何部署到 ABAP 服务器上
深入掌握 SAP Fiori Elements 工作原理的前提条件：理解 Smart Field
深入理解 SAP Fiori Elements 工作原理系列之二：如何给 SAP Fiori Elements 应用添加自定义按钮
SAP Fiori Elements 框架里 Smart Table 控件的工作原理介绍
SAP Fiori Elements List Report Smart Table 列项目宽度计算的奥妙
作为一名 ABAP 资深顾问，下一步可以选择哪一门 SAP 技术作为主攻方向？
SAP UI5应用开发人员了解UI5框架代码的意义
SAP UI5 module懒加载机制
SAP UI5 控件渲染机制
HTML原生事件 VS SAP UI5 Semantic事件
SAP UI5控件元数据的元数据实现
SAP UI5控件的实例数据修改和读取逻辑
SAP UI5控件数据绑定的实现原理
SAP UI5控件数据绑定的三种模式：One Way, Two Way和OneTime实现原理比较
谈谈 SAP UI5 的视图控件 ID，以及其和 Angular 视图的异同
对 SAP UI5 一无所知的新手，从哪些材料开始学习比较好？
如何在 SAP UI5 应用中集成第三方库 ：一个在移动设备上查看 Web 应用打印调试信息的小技巧相关推荐
- SAP UI5 应用开发教程之一百零三 - 如何在 SAP UI5 应用中消费第三方库试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
- Android中集成第三方库的方法和问题
Android中集成第三方库的方法和问题 声明: 1. 本文參考了网上同学们的现有成果,在此表示感谢,參考资料在文后有链接. 2. 本文的重点在第三部分,是在开发中遇到的问题及解决的方法.第一,第二部 ...
- pythonista3安装第三方库_如何在pythonista for ios中添加第三方库，如pandas？
1.Pythonista for ios 前面有人提到了,Pythonista上可以通过安ywangd/stash来实现很多的附加功能,如pip安装第三方python模块,git等等. 安装方法是在P ...
- 一个详尽的面向 SAP UI5 初学者的教程 - 如何在 SAP UI5 中绘制图表 Chart
这是 Jerry 2021 年的第 65 篇文章,也是汪子熙公众号总共第 342 篇原创文章. 观沧海 曹操 东临碣石,以观沧海. 水何澹澹,山岛竦峙. 树木丛生,百草丰茂. 秋风萧瑟,洪波涌起. 日 ...
- 如何在 SAP UI5 应用里显示 PDF 文件试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 本专栏计划的文章数在 300 篇左右,到 2022年12月23日为止,目前已经更新了 155 篇,专栏完成度为 51.6%,完成度已经超过了一半了. ...
- SAP系统和微信集成的系列教程之六：如何通过OAuth2获取微信用户信息并显示在SAP UI5应用中
这是Jerry 2020年的第87篇文章,也是汪子熙公众号总共第269篇原创文章. 本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发 ...
- SAP UI5 应用开发教程之四十八 - 如何在 SAP UI5 应用里开发条形码扫描功能试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- 如何在 SAP ABAP 系统中使用 Adobe Form 试读版
本专栏计划的文章数在 150 篇左右,到 2022年9月12日为止,目前已经更新了 51 篇,专栏完成度为 34% 零基础 ABAP 学习教程系列文章的目录 1. ABAP 标准培训教程 BC400 ...
最新文章
- 机器学习在高德搜索建议中的应用优化实践
- 分针网——Javascript不同浏览器差异及兼容方法
- 华为鸿蒙系统手机销量,两个品牌助力华为新生，但最终会是谁拯救谁
- [原创]java使用JDBC向MySQL数据库批次插入10W条数据测试效率
- 【鸿蒙 HarmonyOS】创建 Java 语言 HarmonyOS 手机应用 ( 首次进入 DevEco Studio 配置环境 | 创建 Java 手机工程 | 鸿蒙工程代码目录简介 )
- 不同matlab版本所支持的gcc g+版本
- leetcode718. 最长重复子数组
- （转） RabbitMQ学习之spring整合发送同步消息（注解实现）
- JAVA打印变量类型
- 学而时娱之，不亦乐乎
- facebook的network-connection-class（测量移动端网络质量）源码详解
- install pecl php_Linux下 PHP 安装pecl_http方法
- 商学院学习笔记（2）
- opencv保存视频编码方式
- 杂谈|程序员还是工程师
- 游戏开发物语安卓！Android彻底组件化方案实践方法！快来收藏！
- Python之Email邮箱账号抓取
- ROS2机器人笔记20-10-24
- 文件存储 云服务器,文件存储 云服务器
- My97DatePicker与angular一起使用时，监测不到值的变化