跳到主要内容鸿蒙分布式智能办公应用架构设计与性能优化 | 极客日志TypeScriptSaaSAI大前端
鸿蒙分布式智能办公应用架构设计与性能优化
综述由AI生成鸿蒙分布式办公应用涉及架构设计、性能优化及开放能力接入。文章详细阐述了分层架构、组件化设计及分布式通信机制的实现。重点介绍了 UI 渲染优化中的虚拟列表与懒加载策略,内存管理中的泄漏检测与对象池复用,以及启动性能的分级任务调度。此外,还涵盖了云数据库、AppLinking 跨应用跳转及近场通信能力的集成实战。通过量化成果展示,应用启动时间缩短至 1.2 秒,同步延迟低于 100ms,验证了分布式架构在多设备协同场景下的有效性与高性能。
松间照月19 浏览 鸿蒙分布式智能办公应用架构设计与性能优化
一、项目背景与挑战
在企业数字化转型的浪潮中,办公应用的需求日益增长。传统的办公应用通常局限于单一设备使用,难以满足现代办公场景下的多设备协同需求。随着 HarmonyOS 的发布,其分布式特性为解决这一痛点提供了新的思路。
1.1 技术挑战
- **设备异构性:**需要适配不同屏幕尺寸、性能规格的鸿蒙设备
- **状态同步:**确保多设备间的数据和用户状态实时同步
- **性能优化:**在保证功能丰富性的同时,确保应用在各类设备上流畅运行
- **安全保障:**分布式环境下的数据传输和存储安全
选择 HarmonyOS 作为开发平台,正是看中了其分布式能力带来的跨设备协同优势,这为我们打造下一代智能办公体验提供了坚实的技术基础。
二、分布式架构设计
2.1 整体架构概览
我们采用分层架构设计,将应用分为表现层、业务逻辑层、数据服务层和设备适配层四个主要层次。这种设计使得各层职责清晰,便于维护和扩展。
| 架构层级 | 主要职责 | 核心技术 |
|---|
| 表现层 | UI 渲染、用户交互 | ArkTS 声明式 UI、自适应布局 |
| 业务逻辑层 | 业务处理、状态管理 | 分布式任务调度、状态同步 |
| 数据服务层 | 数据存储、访问控制 | 分布式数据库、云存储 |
| 设备适配层 | 设备能力调用、兼容性处理 | 设备管理器、软总线 |
架构优势:
- **高内聚低耦合:**各层职责明确,降低模块间依赖
- **可扩展性强:**支持新功能和新设备的快速接入
- **可维护性好:**便于定位问题和迭代优化
2.2 组件化设计
基于 ArkTS 的组件化能力,我们构建了一套可复用的组件库,提升开发效率和代码质量。
abstract class BaseComponent {
protected onCreate?(): void
protected onDestroy?(): void
protected updateState(currentState: T, newState: Partial): T {
return { ...currentState, ...newState }
}
protected handleError(: ): {
.()
}
}
() {
() {
constructor.. =
originalOnCreate = constructor..
constructor.. = () {
.()
(originalOnCreate) {
originalOnCreate.()
}
}
}
}
()
{
:
:
() {
()
. = docId
}
() {
.()
}
() {
{
.()
} (error) {
.(error )
}
}
}
error
Error
void
console
error
`[${this.constructor.name}] Error: ${error.message}`
function
DistributedComponent
return
function
constructor: Function
prototype
enableDistributed
true
const
prototype
onCreate
prototype
onCreate
function
this
initDistributedEnvironment
if
call
this
@DistributedComponent
class
DocumentEditor
extends
BaseComponent
private
documentId
string
private
content
string
constructor
docId: string
super
this
documentId
onCreate
this
loadDocument
private
loadDocument
try
console
log
`Loading document: ${this.documentId}`
catch
this
handleError
as
Error
原子组件:基础 UI 组件,如按钮、输入框、标签等,提供统一的样式和交互行为
业务组件:封装特定业务逻辑的组件,如文档编辑器、日程表、消息列表等
容器组件:负责布局和页面组织的组件,支持响应式设计和多设备适配
2.3 分布式通信机制
利用 HarmonyOS 的分布式软总线技术,我们实现了设备间的高效通信。
class DistributedCommManager {
private busManager: busManager.BusManager
private connectionMap: Map<string, any> = new Map()
constructor() {
this.busManager = new busManager.BusManager()
}
async discoverDevices(): Promise<any[]> {
try {
return await this.busManager.discoverNearbyDevices()
} catch (error) {
console.error('Failed to discover devices:', error)
return []
}
}
async connectDevice(deviceId: string): Promise<boolean> {
try {
const connection = await this.busManager.connect(deviceId)
this.connectionMap.set(deviceId, connection)
console.log(`Connected to device: ${deviceId}`)
return true
} catch (error) {
console.error(`Failed to connect to device ${deviceId}:`, error)
return false
}
}
async sendMessage(deviceId: string, message: any): Promise<boolean> {
try {
const connection = this.connectionMap.get(deviceId)
if (!connection) {
throw new Error(`No connection to device: ${deviceId}`)
}
await connection.send(JSON.stringify(message))
return true
} catch (error) {
console.error(`Failed to send message to device ${deviceId}:`, error)
return false
}
}
registerMessageListener(callback: (deviceId: string, message: any) => void) {
this.busManager.on('message', (data) => {
try {
const { deviceId, payload } = data
callback(deviceId, JSON.parse(payload))
} catch (error) {
console.error('Failed to process message:', error)
}
})
}
}
- 设备间通信前需要获取相应权限
- 传输敏感数据时应进行加密处理
- 建立长连接时需考虑网络状况变化
三、性能优化实战
UI 渲染是影响用户体验的关键因素。我们通过一系列优化措施,显著提升了应用的 UI 响应速度。
3.1 UI 渲染优化
虚拟列表实现
@Entry @Component
struct VirtualDocumentList {
@State documents: DocumentInfo[] = []
@State visibleRange: Range = { start: 0, end: 20 }
@State listHeight: number = 0
@State itemHeight: number = 80
aboutToAppear() {
this.loadDocuments()
this.updateListHeight()
}
loadDocuments() {
const mockDocs: DocumentInfo[] = []
for (let i = 0; i < 1000; i++) {
mockDocs.push({
id: `doc-${i}`,
title: `文档 ${i + 1}`,
author: '用户' + (i % 10),
lastModified: new Date(Date.now() - i * 86400000).toISOString()
})
}
this.documents = mockDocs
}
updateListHeight() {
this.listHeight = 600
this.visibleRange.end = Math.min(
Math.ceil(this.listHeight / this.itemHeight) + 5,
this.documents.length
)
}
onScroll(event: ScrollEvent) {
const scrollOffset = event.scrollOffset
const startIndex = Math.floor(scrollOffset / this.itemHeight)
const endIndex = Math.min(
startIndex + Math.ceil(this.listHeight / this.itemHeight) + 5,
this.documents.length
)
this.visibleRange = { start: startIndex, end: endIndex }
}
build() {
Column() {
Text('文档列表')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 20 })
List() {
ForEach(
this.documents.slice(this.visibleRange.start, this.visibleRange.end),
(document) => {
ListItem() {
DocumentItem({
document,
onClick: () => console.log(`Open document: ${document.id}`)
})
.height(this.itemHeight)
}
.key(document.id)
},
(document) => document.id
)
}
.onScroll((event) => this.onScroll(event))
.width('100%')
.height(this.listHeight)
.padding(10)
Text(`渲染性能优化:仅渲染 ${this.visibleRange.end - this.visibleRange.start} 项,共 ${this.documents.length} 项`)
.fontSize(14)
.color('#666')
.margin({ top: 20 })
}
.padding(20)
}
}
懒加载和预加载策略
- **图片懒加载:**只加载可视区域内的图片资源
- **组件懒加载:**根据路由按需加载页面组件
- **数据预加载:**预测用户可能需要的数据并提前加载
- **资源缓存:**合理缓存常用资源,减少重复加载
@Component
struct LazyImage {
@Prop src: string
@Prop placeholder?: string
@State isLoaded: boolean = false
@State isVisible: boolean = false
private observer: IntersectionObserver | null = null
aboutToAppear() {
this.observer = new IntersectionObserver()
this.observer.observe(this, (entries) => {
if (entries[0].isIntersecting && !this.isLoaded) {
this.isVisible = true
this.loadImage()
}
})
}
aboutToDisappear() {
if (this.observer) {
this.observer.disconnect()
}
}
private loadImage() {
setTimeout(() => {
this.isLoaded = true
}, 500)
}
build() {
if (this.isLoaded) {
Image(this.src)
.width('100%')
.height('100%')
.objectFit(ImageFit.Cover)
} else if (this.placeholder) {
Image(this.placeholder)
.width('100%')
.height('100%')
.objectFit(ImageFit.Cover)
.opacity(0.6)
} else {
Row() {
LoadingProgress()
.width(30)
.height(30)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.backgroundColor('#f0f0f0')
}
}
}
3.2 内存管理优化
合理的内存管理对于保证应用稳定性和性能至关重要。我们采取了多项措施优化内存使用。
内存泄漏检测与修复
- 事件监听器未正确移除
- 定时器未清理
- 闭包引用导致对象无法被垃圾回收
- 缓存对象无限增长
@Entry @Component
struct MemoryLeakExample {
@State count: number = 0
private timer: number | null = null
aboutToAppear() {
this.timer = setInterval(() => {
this.count++
}, 1000)
AppStorage.on('change', this.handleGlobalChange)
}
handleGlobalChange() {
console.log('Global state changed')
}
build() {
Text(`Count: ${this.count}`)
}
}
@Entry @Component
struct MemoryOptimizedExample {
@State count: number = 0
private timer: number | null = null
aboutToAppear() {
this.startTimer()
AppStorage.on('change', this.handleGlobalChange)
}
aboutToDisappear() {
this.cleanupResources()
}
startTimer() {
this.timer = setInterval(() => {
this.count++
}, 1000)
}
handleGlobalChange = () => {
console.log('Global state changed')
}
cleanupResources() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
AppStorage.off('change', this.handleGlobalChange)
}
build() {
Text(`Count: ${this.count}`)
}
}
对象池与资源复用
class ObjectPool<T> {
private pool: T[] = []
private maxSize: number
private createFn: () => T
private resetFn?: (obj: T) => void
constructor(options: {
initialSize: number
maxSize: number
create: () => T
reset?: (obj: T) => void
}) {
this.maxSize = options.maxSize
this.createFn = options.create
this.resetFn = options.reset
for (let i = 0; i < options.initialSize; i++) {
this.pool.push(this.createFn())
}
}
acquire(): T {
if (this.pool.length > 0) {
const obj = this.pool.pop()!
if (this.resetFn) {
this.resetFn(obj)
}
return obj
}
return this.createFn()
}
release(obj: T): void {
if (this.pool.length < this.maxSize) {
this.pool.push(obj)
}
}
clear(): void {
this.pool = []
}
get size(): number {
return this.pool.length
}
}
3.3 启动性能优化
应用启动速度直接影响用户体验,我们从多个维度优化了启动流程。
启动阶段 1:应用初始化
优化策略:减少初始化阶段的阻塞操作,将非必要的初始化推迟到应用启动后。
启动阶段 2:资源加载
优化策略:使用预加载机制,优先加载首屏必要资源,其他资源异步加载。
启动阶段 3:UI 渲染
优化策略:简化首屏 UI,使用骨架屏提升用户感知,避免复杂动画和计算。
const StartupConfig = {
preloadResources: [
'app_icon.png',
'main_theme.json',
'font_primary.ttf'
],
lazyLoadResources: [
'iconset_2x.png',
'advanced_features.json'
],
initializationTasks: [
{ id: 'auth', priority: 'high' },
{ id: 'config', priority: 'high' },
{ id: 'userData', priority: 'medium' },
{ id: 'analytics', priority: 'low' },
{ id: 'ads', priority: 'low' }
]
}
class StartupManager {
private highPriorityTasks: Promise[] = []
private mediumPriorityTasks: Promise[] = []
private lowPriorityTasks: Promise[] = []
async initializeApp() {
console.log('Starting app initialization...')
await this.preloadCriticalResources()
await Promise.all(this.highPriorityTasks)
console.log('High priority tasks completed')
this.showMainUI()
this.executeBackgroundTasks()
}
private async preloadCriticalResources() {
console.log('Preloading critical resources...')
const startTime = Date.now()
await Promise.all(
StartupConfig.preloadResources.map(resource => ResourceManager.loadResource(resource))
)
console.log(`Resource preloading completed in ${Date.now() - startTime}ms`)
}
registerTask(id: string, task: () => Promise) {
const taskConfig = StartupConfig.initializationTasks.find(t => t.id === id)
if (!taskConfig) {
console.warn(`Unknown task: ${id}`)
return
}
switch (taskConfig.priority) {
case 'high':
this.highPriorityTasks.push(task())
break
case 'medium':
this.mediumPriorityTasks.push(task())
break
case 'low':
this.lowPriorityTasks.push(task())
break
}
}
private showMainUI() {
console.log('Showing main UI...')
Router.replace({ uri: 'pages/MainPage', params: { initialized: true } })
}
private async executeBackgroundTasks() {
try {
await Promise.all(this.mediumPriorityTasks)
console.log('Medium priority tasks completed')
await Promise.all(this.lowPriorityTasks)
console.log('Low priority tasks completed')
await this.loadNonCriticalResources()
} catch (error) {
console.error('Error in background tasks:', error)
}
}
private async loadNonCriticalResources() {
console.log('Loading non-critical resources...')
await Promise.all(
StartupConfig.lazyLoadResources.map(resource => ResourceManager.loadResource(resource))
)
console.log('Non-critical resources loaded')
}
}
通过以上优化措施,我们的应用启动时间从原来的 3.5 秒减少到了 1.2 秒,首屏渲染时间减少了 60%,显著提升了用户体验。
四、鸿蒙开放能力接入
HarmonyOS 云开发能力为应用提供了强大的后端支持,我们集成了多项云服务来增强应用功能。
4.1 云开发能力集成
云数据库接入
class CloudDatabaseManager {
private db: cloudDB.CloudDBZone | null = null
private isInitialized: boolean = false
async initialize() {
try {
const cloudDB = await cloudDB.getCloudDB()
this.db = await cloudDB.openCloudDBZone({
zoneName: 'office_app_db',
createIfNotExist: true
})
this.isInitialized = true
console.log('Cloud database initialized successfully')
} catch (error) {
console.error('Failed to initialize cloud database:', error)
throw error
}
}
async saveDocument(document: Document): Promise<void> {
this.ensureInitialized()
try {
await this.db!.executeUpsert([document])
console.log(`Document ${document.id} saved successfully`)
} catch (error) {
console.error(`Failed to save document ${document.id}:`, error)
throw error
}
}
async queryDocuments(query: DocumentQuery): Promise<Document[]> {
this.ensureInitialized()
try {
let cloudQuery = this.db!.where(Document)
if (query.userId) {
cloudQuery = cloudQuery.equalTo(
'ownerId',
cloudDB.CloudDBZoneQuery.WhereClauseType.EQUALS,
query.userId
)
}
if (query.keyword) {
cloudQuery = cloudQuery.contains('title', query.keyword)
}
cloudQuery = cloudQuery.orderBy(
'lastModified',
cloudDB.CloudDBZoneQuery.OrderByDirection.DESC
)
if (query.pageSize && query.pageNum) {
const offset = (query.pageNum - 1) * query.pageSize
cloudQuery = cloudQuery.limit(query.pageSize, offset)
}
const result = await cloudQuery.find()
return result.getSnapshotObjects()
} catch (error) {
console.error('Failed to query documents:', error)
throw error
}
}
async subscribeToDocumentChanges(
documentId: string,
callback: (document: Document) => void
): Promise<number> {
this.ensureInitialized()
try {
const query = this.db!.where(Document)
.equalTo(
'id',
cloudDB.CloudDBZoneQuery.WhereClauseType.EQUALS,
documentId
)
const subscriptionId = await query.listen((snapshot, error) => {
if (error) {
console.error('Subscription error:', error)
return
}
if (snapshot) {
const documents = snapshot.getSnapshotObjects()
if (documents.length > 0) {
callback(documents[0])
}
}
})
console.log(`Subscribed to document ${documentId}, subscriptionId: ${subscriptionId}`)
return subscriptionId
} catch (error) {
console.error(`Failed to subscribe to document ${documentId}:`, error)
throw error
}
}
async unsubscribe(subscriptionId: number): Promise<void> {
this.ensureInitialized()
try {
await this.db!.cancelListen(subscriptionId)
console.log(`Unsubscribed from subscription ${subscriptionId}`)
} catch (error) {
console.error(`Failed to unsubscribe from ${subscriptionId}:`, error)
throw error
}
}
private ensureInitialized() {
if (!this.isInitialized || !this.db) {
throw new Error('Cloud database not initialized')
}
}
}
云函数集成
- 无需维护后端服务器
- 按需执行,自动扩缩容
- 降低客户端计算压力
- 统一业务逻辑处理
4.2 AppLinking 跨应用跳转
利用 HarmonyOS 的 AppLinking 能力,我们实现了应用间的无缝跳转,提升了用户体验。
class AppLinkingManager {
private appLinkingService: appLinking.AppLinkingService
constructor() {
this.appLinkingService = appLinking.getAppLinkingService()
}
async createAppLinking(params: AppLinkingParams): Promise<string> {
try {
const builder = this.appLinkingService.createAppLinkingBuilder()
builder.setDeepLink(params.deepLink)
if (params.title) {
builder.setTitle(params.title)
}
if (params.description) {
builder.setDescription(params.description)
}
if (params.imageUrl) {
builder.setImageUrl(params.imageUrl)
}
const shortLink = await builder.buildShortAppLinking()
return shortLink
} catch (error) {
console.error('Failed to create AppLinking:', error)
throw error
}
}
async handleReceivedLink(link: string): Promise<LinkHandleResult> {
try {
const resolvedLink = await this.appLinkingService.parseAppLinking(link)
const deepLink = resolvedLink.getDeepLink()
if (!deepLink) {
throw new Error('Invalid link: no deep link found')
}
const url = new URL(deepLink)
const params = new URLSearchParams(url.search)
const path = url.pathname
switch (path) {
case '/document':
return this.handleDocumentLink(params)
case '/meeting':
return this.handleMeetingLink(params)
case '/share':
return this.handleShareLink(params)
default:
return { type: 'unknown', params: {} }
}
} catch (error) {
console.error('Failed to handle AppLinking:', error)
return { type: 'error', error: error.message }
}
}
private handleDocumentLink(params: URLSearchParams): LinkHandleResult {
const docId = params.get('id')
if (!docId) {
throw new Error('Document ID is required')
}
return {
type: 'document',
params: {
documentId: docId,
mode: params.get('mode') || 'view',
userId: params.get('userId')
}
}
}
private handleMeetingLink(params: URLSearchParams): LinkHandleResult {
const meetingId = params.get('id')
if (!meetingId) {
throw new Error('Meeting ID is required')
}
return {
type: 'meeting',
params: {
meetingId,
password: params.get('pwd'),
joinNow: params.get('joinNow') === 'true'
}
}
}
private handleShareLink(params: URLSearchParams): LinkHandleResult {
return {
type: 'share',
params: {
content: params.get('content'),
senderId: params.get('senderId'),
timestamp: params.get('t')
}
}
}
}
4.3 近场通信能力
利用鸿蒙系统的近场通信能力,我们实现了设备间的快速文件传输和协作。
实战案例:会议室文档共享
在会议场景中,用户可以通过近场通信快速将文档分享给同一会议室的其他设备,无需复杂的配对过程。
class NearFieldCommunicationManager {
private nfcService: nfc.NfcController
private isScanning: boolean = false
private discoveredDevices: DeviceInfo[] = []
constructor() {
this.nfcService = nfc.getNfcController()
}
isNfcAvailable(): boolean {
return this.nfcService.isNfcAvailable()
}
enableNfc(): boolean {
return this.nfcService.enableNfc()
}
startDeviceDiscovery(callback: (devices: DeviceInfo[]) => void): boolean {
if (this.isScanning) {
console.warn('Already scanning for devices')
return false
}
this.isScanning = true
this.discoveredDevices = []
this.nfcService.on('deviceFound', (device) => {
if (!this.discoveredDevices.find(d => d.id === device.id)) {
this.discoveredDevices.push(device)
callback([...this.discoveredDevices])
}
})
this.nfcService.startDiscovery()
console.log('Started device discovery')
return true
}
stopDeviceDiscovery(): void {
if (!this.isScanning) return
this.nfcService.stopDiscovery()
this.nfcService.off('deviceFound')
this.isScanning = false
console.log('Stopped device discovery')
}
async sendFileToDevice(deviceId: string, fileInfo: FileInfo): Promise<boolean> {
try {
if (!(await fileio.access(fileInfo.path))) {
throw new Error(`File not found: ${fileInfo.path}`)
}
const transferTask = this.nfcService.createTransferTask(deviceId)
transferTask.on('progress', (progress) => {
console.log(`Transfer progress: ${progress.percent}%`)
})
const result = await transferTask.sendFile({
path: fileInfo.path,
name: fileInfo.name,
type: fileInfo.mimeType || 'application/octet-stream'
})
console.log(`File sent successfully: ${result.success}`)
return result.success
} catch (error) {
console.error(`Failed to send file to device ${deviceId}:`, error)
return false
}
}
startFileReceiving(receiver: FileReceiver): void {
this.nfcService.on('fileReceived', async (fileData) => {
try {
const savePath = await receiver.handleReceivedFile(fileData)
console.log(`File received and saved to: ${savePath}`)
receiver.onFileReceived(fileData.name, savePath)
} catch (error) {
console.error('Error handling received file:', error)
receiver.onError(error.message)
}
})
this.nfcService.enableFileReceiving()
console.log('File receiving enabled')
}
stopFileReceiving(): void {
this.nfcService.disableFileReceiving()
this.nfcService.off('fileReceived')
console.log('File receiving disabled')
}
}
五、开发实战经验总结
5.1 分布式应用开发最佳实践
状态管理
采用集中式状态管理方案,确保多设备间状态一致性。使用发布 - 订阅模式处理状态更新,减少直接依赖。
错误处理
建立统一的错误处理机制,对分布式环境下的网络中断、设备离线等异常情况进行优雅处理。
权限管理
提前规划权限需求,遵循最小权限原则,提供清晰的权限申请说明,提升用户信任度。
测试策略
建立多设备协同测试环境,模拟各种网络条件和设备状态,确保应用在复杂场景下稳定运行。
5.2 团队协作经验
- **架构组:**负责整体技术架构设计和技术选型
- **前端组:**专注 UI 组件和用户体验优化
- **分布式组:**负责设备通信和协同逻辑
- **测试组:**多设备兼容性测试和性能测试
在分布式应用开发过程中,团队协作尤为重要。建立清晰的接口规范和文档,定期进行技术分享,确保团队成员对分布式架构有统一理解。
六、项目成果与展望
6.1 项目成果
- 应用在 10+ 种不同型号的鸿蒙设备上实现了完美适配
- 文档同步延迟降低至 100ms 以内,达到实时协作体验
- 日均活跃用户增长 300%,用户满意度达到 4.8/5
- 通过鸿蒙认证,获得 HarmonyOS 优选应用推荐
6.2 技术创新点
创新技术方案
- **自适应 UI 框架:**自主研发的 UI 适配系统,可根据设备屏幕尺寸和形态自动调整布局和交互方式
- **智能任务调度:**根据设备性能和用户行为智能分配计算任务,优化资源利用
- **混合式同步策略:**结合实时同步和批量同步的优势,在保证数据一致性的同时优化网络使用
6.3 未来规划
**元服务支持:**将应用核心功能拆分为元服务,实现更轻量级的功能调用和分享。
**AI 能力集成:**接入鸿蒙 AI 能力,提供智能文档分析、会议记录自动生成等功能。
**全场景办公生态:**扩展支持更多办公场景,实现与企业现有系统的无缝集成。
七、结语
通过本次分布式智能办公应用的开发实践,我们深入探索了 HarmonyOS 的分布式能力,并且将其转化为实际的产品优势。在开发过程中,我们遇到了许多挑战,但也收获了宝贵的经验。
- 充分理解和利用 HarmonyOS 的分布式特性,不要简单地将传统应用移植到鸿蒙平台
- 重视性能优化和用户体验,特别是在多设备协同场景下
- 建立完善的测试体系,模拟各种真实使用场景
- 持续关注 HarmonyOS 的更新和新特性,及时应用到项目中
鸿蒙生态的发展为应用创新提供了广阔空间,我们相信,随着技术的不断成熟,分布式应用将成为未来移动应用的重要发展方向。我们期待与更多开发者一起,共同探索鸿蒙生态的无限可能!
相关免费在线工具
- RSA密钥对生成器
生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online
- Mermaid 预览与可视化编辑
基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online
- 随机西班牙地址生成器
随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
- Markdown转HTML
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online