鸿蒙三方库 | harmony-utils之EncryptUtil URL编解码详解

2301_79533122

17人浏览 · 2026-07-28 00:50:09

2301_79533122 · 2026-07-28 00:50:09 发布

前言

URL编码（百分号编码）用于将特殊字符转换为%XX格式，确保URL中不包含非法字符。@pura/harmony-utils 的 EncryptUtil 封装了URL编解码方法。本文将从API说明、代码实战、进阶用法、常见问题等多个维度进行全面讲解，帮助开发者快速掌握并应用到实际项目中。

在这里插入图片描述

一、URL编解码核心API

EncryptUtil 提供了以下URL编解码方法：

方法	说明	返回类型	使用场景
`encodeURL(str)`	URL编码	string	URL编码
`decodeURL(str)`	URL解码	string	URL解码
`encodeURLComponent(str)`	URL组件编码	string	参数编码
`decodeURLComponent(str)`	URL组件解码	string	参数解码

1.1 核心特性

简洁易用：封装复杂逻辑为一行调用，降低使用门槛
类型安全：完整的TypeScript类型定义，编译期即可发现错误
异常处理：内置异常捕获机制，避免运行时崩溃
双重编码：支持URL整体编码和组件编码

1.2 encodeURL与encodeURLComponent对比

特性	encodeURL	encodeURLComponent
编码范围	保留URL结构符	编码所有特殊字符
保留字符	😕?#[]@	不保留
适用场景	完整URL	查询参数值

二、完整使用步骤

2.1 安装依赖

ohpm install @pura/harmony-utils

2.2 URL编码

import { EncryptUtil } from '@pura/harmony-utils';

Button('URL编码')
  .width('100%')
  .onClick(() => {
    try {
      let original = 'name=张三&age=25';
      let encoded = EncryptUtil.encodeURL(original);
      this.result = `原文: ${original}\n编码: ${encoded}`;
    } catch (e) {
      this.result = '异常: ' + e;
    }
  })

2.3 URL解码

Button('URL解码')
  .width('100%')
  .onClick(() => {
    try {
      let encoded = 'name=%E5%BC%A0%E4%B8%89&age=25';
      let decoded = EncryptUtil.decodeURL(encoded);
      this.result = `编码: ${encoded}\n解码: ${decoded}`;
    } catch (e) {
      this.result = '异常: ' + e;
    }
  })

在这里插入图片描述

三、完整页面示例

import { EncryptUtil } from '@pura/harmony-utils';

@Entry
@Component
struct UrlEncodeDemo {
  @State result: string = '';

  build() {
    Column({ space: 12 }) {
      Button('URL编码').width('100%').onClick(() => {
        this.result = EncryptUtil.encodeURLComponent('name=张三&age=25');
      });
      Button('URL解码').width('100%').onClick(() => {
        this.result = EncryptUtil.decodeURLComponent('name=%E5%BC%A0%E4%B8%89');
      });
      Text(this.result).fontSize(14).fontColor('#333333')
    }
    .padding(16)
  }
}

四、进阶用法

4.1 构建查询参数

import { EncryptUtil } from '@pura/harmony-utils';

function buildQueryString(params: Record<string, string>): string {
  return Object.entries(params)
    .map(([k, v]) => `${EncryptUtil.encodeURLComponent(k)}=${EncryptUtil.encodeURLComponent(v)}`)
    .join('&');
}

4.2 解析查询参数

function parseQueryString(query: string): Record<string, string> {
  let result: Record<string, string> = {};
  query.split('&').forEach(pair => {
    let [k, v] = pair.split('=');
    result[EncryptUtil.decodeURLComponent(k)] = EncryptUtil.decodeURLComponent(v || '');
  });
  return result;
}