HarmonyOS（二）—— 初识ArkTS开发语言（下）之ArkTS声明式语法和组件化基础

前言：

通过前面ArkTS开发语言（上）之TypeScript入门以及ArkTS开发语言（中）之ArkTS的由来和演进俩文我们知道了ArkTS的由来以及演进，知道了ArkTS具备了声明式语法和组件化特性，今天，搭建一个可刷新的排行榜页面。在排行榜页面中，使用循环渲染控制语法来实现列表数据渲染，使用@Builder创建排行列表布局内容，使用装饰器@State、@Prop、@Link来管理组件状态。最后我们点击系统返回按键，来学习自定义组件生命周期函数。

基本概念

首先我们先要明白如下几个基本概念，方便我们更好的理解ArkTS，掌握和理解本demo的知识点。

  1. 声明式UI基本概念

应用界面是由一个个页面组成，ArkTS是由ArkUI框架提供，用于以声明式开发范式开发界面的语言。

声明式UI构建页面的过程，其实是组合组件的过程，声明式UI的思想，主要体现在两个方面：

  • 描述UI的呈现结果，而不关心过程
  • 状态驱动视图更新

类似苹果的SwiftUI中通过组合视图View，安卓Jetpack Compose中通过组合@Composable函数，ArkUI作为HarmonyOS应用开发的UI开发框架，其使用ArkTS语言构建自定义组件，通过组合自定义组件完成页面的构建。

  1. 自定义组件的组成

ArkTS通过struct声明组件名，并通过@Component和@Entry装饰器，来构成一个自定义组件。

  • 使用@Entry和@Component装饰的自定义组件作为页面的入口，会在页面加载时首先进行渲染。
  • 使用@Component装饰的自定义组件，如TitleView这个自定义组件则对应如下内容，作为页面的组成部分。
@Entry
@Component
struct TitleView {...}

在自定义组件内需要使用build方法来进行UI描述。

@Entry
@Componentstruct TitleView...build() {...} 
}

build方法内可以容纳内置组件和其他自定义组件，如Column和Text都是内置组件，由ArkUI框架提供，TitleView为自定义组件，需要开发者使用ArkTS自行声明。

@Entry
@Component
struct TitleView {...build() {Column(...) {Text(...)...ForEach(...{TodoItem(...)},...)}...}
}
  1. 组件状态管理装饰器和@Builder装饰器：
    组件状态管理装饰器用来管理组件中的状态，它们分别是：@State、@Prop、@Link。

  • @State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新。

  • @Prop与@State有相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但更改不会通知给父组件，即@Prop属于单向数据绑定。

  • @Link装饰的变量可以和父组件的@State变量建立双向数据绑定，需要注意的是：@Link变量不能在组件内部进行初始化。

  • @Builder装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。

@State、@Prop、@Link三者关系如图所示：
在这里插入图片描述
4. 组件生命周期函数
自定义组件的生命周期函数用于通知用户该自定义组件的生命周期，这些回调函数是私有的，在运行时由开发框架在特定的时间进行调用，不能从应用程序中手动调用这些回调函数。 右图是自定义组件生命周期的简化图示：

在这里插入图片描述
后期会专门出一期文章讲解自定义组件的生命周期，敬请期待。

  1. 渲染控制语法：
    渲染控制分if/else：条件渲染和ForEach：循环渲染俩种。
  • if/else：条件渲染
    ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，使用if、else和else if渲染对应状态下的UI内容。

举个列子：

Column() {if (this.count > 0) {Text('count is positive')}
}

条件渲染的具体使用规则，注意事项，以及使用场景见if/else：条件渲染，这里不过过多描述。

  • ForEach：循环渲染
    ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如，ListItem组件要求ForEach的父容器组件必须为List组件。

举个列子：

ForEach(arr: any[], // 用于迭代的数组itemGenerator: (item: any, index?: number) => void, // 生成子组件的lambda函数keyGenerator?: (item: any, index?: number) => string // 用于给定数组项生成唯一且稳定的键值
)

条件渲染的具体使用规则，注意事项，以及使用场景见ForEach：循环渲染，这里不过过多描述。只不过ForEach循环渲染相对条件渲染来说相对复杂，后续有空我会专门介绍渲染控制。

了解以上五点，加上前面讲解到的ArkTS开发语言（上）之TypeScript入门和初识ArkTS开发语言（中）之ArkTS的由来和演进，我想大家对ArkTS有了基本的认识，也能做出一些简单的功能，下面我就以官方的一个待办列表对初识ArkTS开发语言做一个实战性总结。

ArkTS实战开发

下面我们用ArkTS实战开发一些自定义组件，然后组合实现一个待办列表，最终效果图如下：
在这里插入图片描述
我们已经知道，ArkTS通过struct声明组件名，并通过@Component和@Entry装饰器，来构成一个自定义组件。

使用@Entry和@Component装饰的自定义组件作为页面的入口，会在页面加载时首先进行渲染。

@Entry
@Component
struct ToDoList {...}

使用@Component装饰的自定义组件，如ToDoItem这个自定义组件则对应如下内容，作为页面的组成部分。

@Component
struct ToDoItem {...}

在自定义组件内需要使用build方法来进行UI描述。

@Entry
@Componentstruct ToDoList...build() {...} 
}

build方法内可以容纳内置组件和其他自定义组件，如Column和Text都是内置组件，由ArkUI框架提供，ToDoItem为自定义组件，需要开发者使用ArkTS自行声明。

@Entry
@Component
struct ToDoList {...build() {Column(...) {Text(...)...ForEach(...{TodoItem(...)},...)}...}
}

1:实战前分析

那么如何实现上面的效果图了，我们对页面组成进行拆分。

会发现，整个页面是有一个标题和若干个ToDoItem组成的，因此我们只需自定义实现标题组件和一个ToDoItem组件即可。

接下来我们就以此分析并实现这俩个组件。

2:实现标题组件

其实，标题组件很简单，就是一个简单的文本展示，我们只需用ArkUI提供的Text实现即可，这里为了加深对家对自定义组件语法和规则使用，我还是简单抽取成一个自定义公共组件吧。

自定义标题组件代码如下：

@Entry
@Component
struct ToDoTitle {...build() {Row() {Column() {Text("代办").fontSize(50)}.width('100%')}.height('100%')}}

当然，直接在代办列表页使用系统自带的Text基础组件也可以，如下所示：

@Entry
@Component
struct ToDoList {...build() {Row() {Column() {// 直接在使用TextText("代办").fontSize(50)...}.width('100%')}.height('100%')}}

3:分析ToDoItem的组成

ToDoItem相对于标题来说要复杂的多，认真分析其组成，ToDoItem是有一个水平摆放的组件，前面是一个图片，后面是一个普通文本，这是他的外观，同时它具备了一些行为，也就是我们常说的点击事件，在ArkTS中就是指组件状态，这里需要记录ToDoItem的点击的俩种状态：

  • 默认状态：默认情况下这一项高亮显示。
  • 选中状态：这一项背景变成灰色，同时前面图片变种选中状态的图片。

4:ToDoItem组件的实现

下面，我就从ToDoItem组件的外观布局属性配置以及组件状态俩方面来讲解ToDoItem的具体事项

1:配置外观属性与布局

自定义组件的组成使用基础组件和容器组件等内置组件进行组合。但有时内置组件的样式并不能满足我们的需求，ArkTS提供了属性方法用于描述界面的样式。属性方法支持以下使用方式：

  • 常量传递
    例如使用fontSize(50)来配置字体大小。
Text('Hello World').fontSize(50)
  • 变量传递
    在组件内定义了相应的变量后，例如组件内部成员变量size，就可以使用this.size方式使用该变量。
Text('Hello World').fontSize(this.size)
  • 链式调用
    在配置多个属性时，ArkTS提供了链式调用的方式，通过’.'方式连续配置。
Text('Hello World').fontSize(this.size).width(100).height(100)
  • 表达式传递
    属性中还可以传入普通表达式以及三目运算表达式。
Text('Hello World').fontSize(this.size).width(this.count + 100).height(this.count % 2 === 0 ? 100 : 200)
  • 内置枚举类型
    除此之外，ArkTS中还提供了内置枚举类型，如Color，FontWeight等，例如设置fontColor改变字体颜色为红色，并私有fontWeight为加粗。
Text('Hello World').fontSize(this.size).width(this.count + 100).height(this.count % 2 === 0 ? 100 : 200).fontColor(Color.Red).fontWeight(FontWeight.Bold)

对于有多种组件需要进行组合时，容器组件则是描述了这些组件应该如何排列的结果。

ArkUI中的布局容器有很多种，在不同的适用场合选择不同的布局容器实现，ArkTS使用容器组件采用花括号语法，内部放置UI描述。

在这里插入图片描述
这里我们将介绍最基础的两个布局——列布局和行布局。

对于如下每一项的布局，两个元素为横向排列，选择Row布局
在这里插入图片描述
类似下图所示的布局，整体都是从上往下纵向排列，适用的布局方式是Column列布局。
在这里插入图片描述

Column() {Text($r('app.string.page_title'))...ForEach(this.totalTasks,(item) => {TodoItem({content:item})},...)}
2:记录组件状态的改变

实际开发中由于交互，页面的内容可能需要产生变化，以每一个ToDoItem为例，其在完成时的状态与未完成时的展示效果是不一样的。
在这里插入图片描述
声明式UI的特点就是UI是随数据更改而自动刷新的，我们这里定义了一个类型为boolean的变量isComplete，其被@State装饰后，框架内建立了数据和视图之间的绑定，其值的改变影响UI的显示。

@State isComplete : boolean = false;

@State装饰器的作用
在这里插入图片描述
用圆圈和对勾这样两个图片，分别来表示该项是否完成，这部分涉及到内容的切换，需要使用条件渲染if / else语法来进行组件的显示与消失，当判断条件为真时，组件为已完成的状态，反之则为未完成。

if (this.isComplete) {Image($r('app.media.ic_ok')).objectFit(ImageFit.Contain).width($r('app.float.checkbox_width')).height($r('app.float.checkbox_width')).margin($r('app.float.checkbox_margin'))
} else {Image($r('app.media.ic_default')).objectFit(ImageFit.Contain).width($r('app.float.checkbox_width')).height($r('app.float.checkbox_width')).margin($r('app.float.checkbox_margin'))
}

由于两个Image的实现具有大量重复代码，ArkTS提供了@Builder装饰器，来修饰一个函数，快速生成布局内容，从而可以避免重复的UI描述内容。这里使用@Bulider声明了一个labelIcon的函数，参数为url，对应要传给Image的图片路径。

@Builder labelIcon(url) {Image(url).objectFit(ImageFit.Contain).width($r('app.float.checkbox_width')).height($r('app.float.checkbox_width')).margin($r('app.float.checkbox_margin'))
}

使用时只需要使用this关键字访问@Builder装饰的函数名，即可快速创建布局。

if (this.isComplete) {this.labelIcon($r('app.media.ic_ok'))
} else {this.labelIcon($r('app.media.ic_default'))
}

为了让待办项带给用户的体验更符合已完成的效果，给内容的字体也增加了相应的样式变化，这里使用了三目运算符来根据状态变化修改其透明度和文字样式，如opacity是控制透明度，decoration是文字是否有划线。通过isComplete的值来控制其变化。

Text(this.content)....opacity(this.isComplete ? CommonConstants.OPACITY_COMPLETED : CommonConstants.OPACITY_DEFAULT).decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None })

最后，为了实现与用户交互的效果，在组件上添加了onClick点击事件，当用户点击该待办项时，数据isComplete的更改就能够触发UI的更新。

@Component
struct ToDoItem {@State isComplete : boolean = false;@Builder labelIcon(icon) {...}...build() {Row() {if (this.isComplete) {this.labelIcon($r('app.media.ic_ok'))} else {this.labelIcon($r('app.media.ic_default'))}... }....onClick(() => {this.isComplete= !this.isComplete;})}
}

5:循环渲染列表数据实现代办列表功能

上面，只是完成了一个ToDoItem组件的开发，当我们有多条待办数据需要显示在页面时，就需要使用到ForEach循环渲染语法。

假设，我们有五条待办数据需要展示在页面上。

total_Tasks:Array<string> = ['早起晨练','准备早餐','阅读名著','学习ArkTS','看剧放松'
]

ForEach基本使用中，只需要了解要渲染的数据以及要生成的UI内容两个部分，例如这里要渲染的数组为以上的五条待办事项，要渲染的内容是ToDoItem这个自定义组件，也可以是其他内置组件。

ForEach基本使用如下图所示：
在这里插入图片描述
ToDoItem这个自定义组件中，每一个ToDoItem要显示的文本参数content需要外部传入，参数传递使用花括号的形式，用content接受数组内的内容项item。

最终完成的代码及其效果如下。

@Entry
@Component
struct ToDoList {...build() {Row() {Column() {Text(...)...ForEach(this.totalTasks,(item) => {TodoItem({content:item})},...)}.width('100%')}.height('100%')}}

ToDoList页面的最终效果图：
在这里插入图片描述

总结

现在我们明白了ArkTS声明式开发范式的基本组成，这里我用一张图做一个总结概述
ArkTS声明式开发范式：
在这里插入图片描述

  • 装饰器用来装饰类、结构体、方法以及变量，赋予其特殊的含义，如上述示例中 @Entry 、 @Component 、 @State 都是装饰器。具体而言， @Component 表示这是个自定义组件； @Entry 则表示这是个入口组件； @State 表示组件中的状态变量，此状态变化会引起 UI 变更。

  • 自定义组件
    可复用的 UI 单元，可组合其它组件，如上述被 @Component 装饰的 struct Hello。

  • UI 描述
    声明式的方式来描述 UI 的结构，如上述 build() 方法内部的代码块。

  • 内置组件
    框架中默认内置的基础和布局组件，可直接被开发者调用，比如示例中的 Column、Text、Divider、Button。

  • 事件方法
    用于添加组件对事件的响应逻辑，统一通过事件方法进行设置，如跟随在Button后面的onClick()。

  • 属性方法
    用于组件属性的配置，统一通过属性方法进行设置，如fontSize()、width()、height()、color() 等，可通过链式调用的方式设置多项属性。

从UI框架的需求角度，ArkTS在TS的类型系统的基础上，做了进一步的扩展：定义了各种装饰器、自定义组件和UI描述机制，再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了应用开发的主体。在应用开发中，除了UI的结构化描述之外，还有一个重要的方面：状态管理。如上述示例中，用 @State 装饰过的变量 myText ，包含了一个基础的状态管理机制，即 myText 的值的变化会自动触发相应的 UI 变更 （Text组件）。ArkUI 中进一步提供了多维度的状态管理机制。和 UI 相关联的数据，不仅可以在组件内使用，还可以在不同组件层级间传递，比如父子组件之间，爷孙组件之间，也可以是全局范围内的传递，还可以是跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和 UI 的联动。

总体而言，ArkUI开发框架通过扩展成熟语言、结合语法糖或者语言原生的元编程能力、以及UI组件、状态管理等方面设计了统一的UI开发范式，结合原生语言能力共同完成应用开发。这些构成了当前ArkTS基于TS的主要扩展。

ArkUI完整的开发范式可参考[方舟开发框架概述]。(https://developer.harmonyos.com/cn/docs/documentation/doc-guides/arkui-overview-0000001281480754)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/219645.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

倾角仪(xyz)理解

倾角仪(xyz)理解

第一列是初始值 x更小&#xff0c;说明往左倾 x更大&#xff0c;说明往右倾 z更大、y更大&#xff0c;说明往后倾 z更小、y更大&#xff0c;说明往前倾
阅读更多...
[Unity+文心知识库]使用百度智能云搭建私有知识库，集成知识库API，打造具备知识库的AI二次元姐姐

[Unity+文心知识库]使用百度智能云搭建私有知识库，集成知识库API，打造具备知识库的AI二次元姐姐

1.简述 最近从百度智能云的官方技术支持那边了解到&#xff0c;目前百度千帆大模型平台提供有在线的知识库功能&#xff0c;能够在线上传自己的私人知识库文档&#xff0c;并且配置文心一言模型作为文本生成的引擎&#xff0c;构建自己的私有知识库。之前自己搭建知识库都是用的…
阅读更多...
VPN 在网络安全中的应用

VPN 在网络安全中的应用

虚拟专用网络&#xff08;Virtual Private Network&#xff0c;VPN&#xff09;是指利用不安全的公共网络如 Internet 等作为传输媒介&#xff0c;通过一系列的安全技术处理&#xff0c;实现类似专用网络的安全性能&#xff0c;保证重要信息的安全传输的一种网络技术。 1&#…
阅读更多...
【网络安全技术】电子邮件安全PGP，SMIME

【网络安全技术】电子邮件安全PGP，SMIME

一、PGP&#xff08;Pretty Good Privacy&#xff09; PGP是一种邮件加密手段&#xff0c;他在发邮件一方加密&#xff0c;然后发给发送方邮件服务器&#xff0c;发送方邮件服务器再发送给接收方邮件服务器&#xff0c;然后接收方再从接收方邮件服务器pop出来&#xff0c;这整…
阅读更多...
python和pygame实现烟花特效

python和pygame实现烟花特效

python和pygame实现烟花特效 新年来临之际&#xff0c;来一个欢庆新年烟花祝贺&#xff0c;需要安装使用第三方库pygame&#xff0c;关于Python中pygame游戏模块的安装使用可见 https://blog.csdn.net/cnds123/article/details/119514520 效果图及源码 先看效果图&#xff1a…
阅读更多...
共建开源新里程：北京航空航天大学OpenHarmony技术俱乐部正式揭牌成立

共建开源新里程：北京航空航天大学OpenHarmony技术俱乐部正式揭牌成立

12月11日,由OpenAtom OpenHarmony(以下简称“OpenHarmony”)项目群技术指导委员会(以下简称“TSC”)和北京航空航天大学共同举办的“OpenHarmony软件工程研讨会暨北京航空航天大学OpenHarmony技术俱乐部成立仪式”在京圆满落幕。 现场大合影 活动当天,多位重量级嘉宾出席了此次…
阅读更多...
【EXCEL】vlookup，index/match查找函数

【EXCEL】vlookup，index/match查找函数

区别&#xff1a; 1.Vlookup函数只能查找列数据&#xff0c;即纵向查找&#xff0c;而IndexMatch函数&#xff0c;既可以纵向查找&#xff0c;也可以横向查找&#xff1b; 2、Vlookup函数查找的依据(第一个参数)必须位于数据源的第一列&#xff0c;IndexMatch函数组合则无此限制…
阅读更多...
matlab操作方法(三)——matlab中的数字图像（读取、显示、保存）

matlab操作方法(三)——matlab中的数字图像（读取、显示、保存）

数字图像是二维图像用有限数字数值像素的表示。通常像素在计算机中保存为二维整数数组的光栅图像&#xff0c;这些值经常用压缩格式进行传输和存储。 二值图像&#xff1a;图像中每个像素的亮度值仅可以取自0或1的图像&#xff0c;因此也称为1bit图像 灰度图像&#xff1a;图…
阅读更多...
华为配置基本QinQ示例

华为配置基本QinQ示例

组网需求 如图1所示&#xff0c;网络中有两个企业&#xff0c;企业1有两个分支&#xff0c;企业2有两个分支。这两个企业的各办公地的企业网都分别和运营商网络中的SwitchA和SwitchB相连&#xff0c;且公网中存在其它厂商设备&#xff0c;其外层VLAN Tag的TPID值为0x9100。 现…
阅读更多...
StatusBar、NavigationBar窗口显示在Activity下面之aosp14窗口类bug线索征集

StatusBar、NavigationBar窗口显示在Activity下面之aosp14窗口类bug线索征集

背景&#xff1a; hi&#xff0c;粉丝朋友们&#xff1a; 从上次帮助国际学员解决了一个分屏有黑屏的bug后&#xff0c;相关blog和解决方法 https://blog.csdn.net/learnframework/article/details/134708393 解决方法看b站视频&#xff1a; https://www.bilibili.com/video/B…
阅读更多...
Spring的AOP基于注解之准备工作（需要添加的依赖以及配置文件）

Spring的AOP基于注解之准备工作（需要添加的依赖以及配置文件）

添加完依赖会爆红&#xff0c;点击m标刷新即可 使用SpringAspectJ的AOP需要引入的依赖如下&#xff1a; <repositories><!--spring6里程碑版本的仓库--><repository><id>repository.spring.milestone</id><name>Spring Milestone Reposi…
阅读更多...
《使用ThinkPHP6开发项目》 - 登录接口二

《使用ThinkPHP6开发项目》 - 登录接口二

《使用ThinkPHP6开发项目》 - 登录接口一-CSDN博客 说到登录&#xff0c;这就涉及到数据验证和数据库 这里要创建数据库以及登录要用到的用户表 1&#xff09;创建管理员表 CREATE TABLE vanus_system_admin (id smallint(5) unsigned NOT NULL AUTO_INCREMENT COMMENT 管理…
阅读更多...
路由器静态路由的配置

路由器静态路由的配置

路由器静态路由的配置步骤如下&#xff1a; 进入系统视图。输入命令sys进入系统视图。配置路由器的接口IP地址。命令格式为int g0/0/0&#xff0c;其中g0/0/0表示路由器的接口&#xff0c;可以根据实际情况进行修改。然后使用命令ip add配置接口的IP地址。配置下一跳地址。在静…
阅读更多...
C# 编写Windows服务程序

C# 编写Windows服务程序

1.什么是windows服务&#xff1f; Microsoft Windows 服务&#xff08;即&#xff0c;以前的 NT 服务&#xff09;使您能够创建在它们自己的 Windows 会话中可长时间运行的可执行应用程序。这些服务可以在计算机启动时自动启动&#xff0c;可以暂停和重新启动而且不显示任何用…
阅读更多...
Web前端 ---- 【Vue】Vue路由传参（query和params）

Web前端 ---- 【Vue】Vue路由传参（query和params）

目录 前言 为什么用路由 路由route和路由器router Vue中路由的工作原理 安装配置vue-router 使用VueRouter 多级路由 路由传参 query传参 params传参 前言 本文介绍路由相关知识路由传参 为什么用路由 为了单页面应用开发&#xff0c;只更换组件&#xff0c;不频繁刷…
阅读更多...
什么软件可以压缩视频大小？超级简单

什么软件可以压缩视频大小？超级简单

什么软件可以压缩视频大小&#xff1f;当我们想将视频上传到网上时&#xff0c;有时候会遇到视频因为体积太大而无法上传的问题&#xff0c;这种情况就需要将视频进行压缩了。那什么软件可以压缩视频大小呢&#xff1f;下面小编就来为大家介绍压缩视频的方法&#xff0c;支持批…
阅读更多...
极新AIGC行业峰会 | 圆桌对话：探索中国AGI迭代之路

极新AIGC行业峰会 | 圆桌对话：探索中国AGI迭代之路

“AGI正处在一个巨大的研发范式革命的起点。” 整理 | 周梦婕 编辑 | 小白 出品&#xff5c;极新 2023年11月28日&#xff0c;极新AIGC行业峰会在北京东升国际科学院拉开帷幕&#xff0c;峰会上午的圆桌环节由凡卓资本合伙人王梦菲主持&#xff0c;深势科技战略副总裁何雯…
阅读更多...
Spring Boot 3.x.x Spring Security 6.x.x @PreAuthorize 失效

Spring Boot 3.x.x Spring Security 6.x.x @PreAuthorize 失效

Spring Boot 3.x.x Spring Security 6.x.x PreAuthorize 失效 背景问题解决备注 背景 最近在搞一个后端项目&#xff0c;登录、接口权限、token认证。 版本 Spring Boot 3.2.0 JDK 21 Spring Security 6.2.0 问题 PreAuthorize 失效&#xff0c;没有走认证。 解决 给PreAu…
阅读更多...
生成小程序URLlink链接遇到的坑

生成小程序URLlink链接遇到的坑

这里写自定义目录标题 前端生成小程序URL link背景用户打开小程序的常用方法短链接短链接优缺点优点缺点 生成短链接步骤 可能会遇到的问题&#xff1a;其他 注意&#x1f4e2; 前端生成小程序URL link ![h5打开小程序](https://img-blog.csdnimg.cn/direct/a4cfe3ef6d184c6d9…
阅读更多...
OfficeWeb365 SaveDraw 文件上传漏洞复现

OfficeWeb365 SaveDraw 文件上传漏洞复现

0x01 产品简介 OfficeWeb365 是专注于 Office 文档在线预览及PDF文档在线预览云服务，包括 Microsoft Word 文档在线预览、Excel 表格在线预览、Powerpoint 演示文档在线预览，WPS 文字处理、WPS 表格、WPS 演示及 Adobe PDF 文档在线预览。 0x02 漏洞概述 OfficeWeb365 Sav…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023