web开发
0 人感兴趣 · 59 次引用
- 最新
- 推荐

什么是前端开发领域的 Cumulative Layout Shift 问题
CLS 是 Cumulative Layout Shift(累计布局偏移)的缩写,它是一个用于度量网页稳定性的指标。CLS issue 指的是网页在加载过程中存在的累计布局偏移问题,这些问题会导致网页元素在页面上闪烁或跳动,影响用户体验。


如何给 Fiori Elements 应用添加自定义按钮
笔者的日常工作内容从 2020 年 8 月转到 Angular 前端开发之后,算是领略到了这个流行前端框架繁荣生态圈的风采:在开发过程中遇到 Angular 技术问题时,很容易在社区里找到大量相关文章。

深入掌握 Fiori Elements 工作原理的前提条件:理解 Smart Field
SAP 前端开发者如今使用的 SAP Fiori Elements,在 2016 年时被称为 Smart Template,其在 SAP 官网的定义是: Smart Template 是一套框架,针对最常用的应用模式,根据元数据注解,加上预定义的模板,在运行时能够动态生成 SAP UI 页面。

本地开发完成的 Fiori Elements 应用,部署到远端 ABAP 服务器上的详细步骤
之前笔者的两篇文章,分别介绍了如何在本地使用 Visual Studio Code 创建一个 SAP Fiori Elements 应用,以及使用 Fiori Elements Controller Extension 理念,对该 Fiori Elements 应用进行二次开发的具体步骤。本文介绍本地开发完成如何部署到服务器上。

Python 进阶 (五十三)Flask Web 开发实现将表单渲染成 HTML
在利用Flask进行Python Web开发时,页面中的wtf.quick_form(form)函数中的参数form是如何与视图函数中的form变量关联起来的?即Flask是如何将表单渲染成HTML的?下面以实例的形式进行问题求解。

使用 Fiori Elements 框架创建 UI5 Web 应用
笔者前一篇文章 SAP Cloud Application Programming 介绍 - 2021 更新版,介绍了如何使用 SAP Cloud Application Programming,在本地创建一个 OData 服务,并且利用 SAP CAP SDK,在一个自动且临时生成的 Fiori Elements 应用里,消费该 OData 服务。

谈谈企业级前端应用 UI 界面增强实现的一些实际案例
本文首先快速回顾几种 SAP 产品中的 UI 增强思路,然后具体介绍该思路是如何在 SAP Commerce Cloud(电商云) UI 增强中贯彻实施的。

谈谈企业级前端应用中通过 CSS 达到布局定制化的话题
本文以 SAP CRM Fiori 以及 SAP Commerce Cloud UI 这两个分别采用 UI5 和 Angular 开发的企业级前端应用为例,介绍了设计人员如何采用 CSS 调整来达到布局定制化的效果。

谈谈 Angular 应用 Feature Module 的延迟加载话题
笔者最近工作中处理了 SAP Commerce Cloud (电商云) UI 的一个懒加载 (Lazy Load) 功能的客户问题,通过本文把自己学到的关于 Angular Feature Module 延迟加载的知识做个记录。

聊聊前端开发中的 Ghost Design 设计思路
笔者最近做 SAP Spartacus 前端开发时,接触到一个新的开发术语:Ghost Design. 无论是幽灵设计,还是之前 SAP UI5 提供的页面加载动画效果,都是改善用户使用体验的一种手段:提示用户当前页面正在加载后台数据,或是执行一些比较费时的操作。

关于 Angular view Query 的 id 选择器问题的单步调试
本文介绍笔者工作中遇到的一个实际问题和解决方案。

一个 ExpressionChangedAfterItHasBeenCheckedError 错误的解决过程
我的 Component 里有一个 selectedPane 字段(第56行),作为数据源显示在 div 标签里(代码第47行):

通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式
我创建了一个 selector 为 app-content-section 的 Component,用于容纳内容投影(content projection):

使用 RxJs 实现一个支持 infinite scroll 的 Angular Component
本文介绍了如何使用 Angular 前端框架,基于 Rxjs 工具库开发一个支持 infinite scroll 的延迟加载列表的详细步骤。

SAP 电商云 Spartacus UI 的响应式 UI 实现细节
在文件 projects\storefrontlib\layout\config\default-layout.config.ts 里,定义了各个屏幕尺寸所对应的 breakpoint:

如何解决 Angular custom library module 在 ng build 时无法被识别的错误
SAP Spartacus angular.json, 是 Angular CLI 自动生成的文件,里面针对 storefrontapp,生成的 tsConfig 属性,指向一个 tsconfig.app.json 文件,该文件指定 ng build 如何对该 app 进行构建。

100 行代码在微信公众号里集成地图搜索功能
本文首先介绍了如何调用微信公众号菜单 API,给公众号添加新的菜单项。接着介绍了如何将一个 Web 应用部署在云平台上,并将生成链接绑定到微信菜单项上。最后,我们使用百度地图 API 开发一个 Web 应用,绑定到微信公众号菜单项上,即实现了地图集成的功能。

关于 Angular 应用 tsconfig.json 中的 lib 属性
SAP Spartacus 应用的 tsconfig.json 文件里,有一个 lib 属性,值为 es2020 和 dom:

关于 Angular 应用 tsconfig.json 中的 target 属性
我新建了一个 Angular 应用,自动生成的 tsconfig.json 文件里,target 为 es2017,module 为 es2018.

漫谈 SAP 产品里页面上的 Checkbox 设计与实现
本文回顾笔者从业多年以来,所经历过的不同 SAP 产品里的 Checkbox 的设计与实现。

创建第一个 Cypress 应用后使用命令行 npx Cypress open 报错的原因分析
大多数测试工具(如 Selenium)通过在浏览器外部运行并通过网络执行远程命令来运行。Cypress 正好相反。 Cypress 在与 Web 应用程序相同的运行循环(run loop)中执行。

从 Angular Component 和 Directive 的实例化,谈谈 Angular forRoot 方法的命令由来
同 Angular service 的单例特性不同,Angular 组件和指令通常会被多次实例化,比如 HTML markup 中每出现一次 Component 的 selector,就会触发 Component 的一次实例化。

将使用回调函数作为参数的函数改造为返回 Promise 的一个具体例子
我开发了一个函数 loadScript,可以动态加载指定的本地 JavaScript 文件。源代码如下:

SAP ABAP Netweaver 服务器的标准登录方式讲解
本文继续介绍 ABAP 项目开发里经常使用的一个知识点:ABAP Netweaver服务器的登录方式(Standard Logon Procedure).

ABAP 应用服务器的 HTTP 响应状态码 (Status Code)
本文记录了笔者之前在SAP成都研究院CRM开发团队在开发SAP CRM Fiori应用时的一些技术讨论,关于HTTP请求的响应状态码的差异。 当时我们用Chrome打开SAP Fiori应用,在Chrome开发者工具的network标签里,观察到有的请求响应码为HTTP 200,有的却是HTTP 304.

Angular 为什么要引入 injection token 的概念
你可以定义和使用一个 InjectionToken 对象来为非类的依赖选择一个提供者令牌。

SAP Fiori 应用 Adapt UI 动态显示或者隐藏的技术设计细节解析
本文首先通过一个笔者工作过程中,经常被同事问起的一个问题出发,接着详细介绍了笔者如何通过单步调试的方式,自行分析 SAP Fiori Adapt UI 按钮显示与否的设计逻辑,通过这个例子再次阐述了 SAP 系统的权限管控设计思路。