HarmonyKit | 鸿蒙新特性 API:URL 编解码 encodeURIComponent 模式切换

📅 2026/7/7 16:41:30
HarmonyKit | 鸿蒙新特性 API:URL 编解码 encodeURIComponent 模式切换
HarmonyKit | 鸿蒙新特性 APIURL 编解码 encodeURIComponent 模式切换引言移动端 URL 编解码的三个场景URL 编解码是 HarmonyKit 中使用频率排名前三的工具。追查 API 日志中%E4%BD%A0%E5%A5%BD这样的编码参数、构造带有中文关键词的搜索请求、解码被邮件客户端或聊天软件多次编码的链接——这些场景几乎每天都会遇到。HarmonyKit 的 URL 编解码工具只有约 120 行代码但围绕它有两个值得深入讨论的设计决策encodeURIComponent与encodeURI的行为差异、以及模式切换按钮与双按钮布局的权衡。项目仓库https://atomgit.com/VON-/harmony-kitURL 编码原理百分号编码URL 设计规范RFC 3986规定了 URL 中允许出现的字符集。字母、数字、以及-_.~可以直接出现。其余所有字符——空格、中文、、、?、#——都必须进行百分号编码。规则字符 → UTF-8 字节序列 → 每个字节写为%XXXX 是十六进制值。例中文字符你的 UTF-8 编码是E4 BD A0编码后是%E4%BD%A0。JavaScript 提供了两个编码函数区别关键leturlhttps://api.example.com/search?q你好page1;encodeURI(url);// → https://api.example.com/search?q%E4%BD%A0%E5%A5%BDpage1// URL 结构(: / ? )保留只编码参数值中的中文encodeURIComponent(url);// → https%3A%2F%2Fapi.example.com%2Fsearch%3Fq%3D%E4%BD%A0%E5%A5%BD%26page%3D1// 全部编码包括 URL 结构字符如果你用encodeURIComponent编码完整 URL 后放到浏览器地址栏浏览器会把它当成一个参数值。反之用encodeURI编码参数值不会被编码服务器会把当成参数分隔符导致参数截断。Utils 层实现exportclassUrlUtils{staticencode(input:string):string{returnencodeURIComponent(input);}staticdecode(input:string):string{returndecodeURIComponent(input);}staticencodeFull(input:string):string{returnencodeURI(input);}staticdecodeFull(input:string):string{returndecodeURI(input);}}四个静态方法两两配对。encode/decode对应参数编码encodeFull/decodeFull对应完整 URL 编码。每个方法输入 string输出 string。decodeURIComponent和decodeURI对不合法的百分号序列如残缺的%E0%A4%A会抛出URIError。必须在 UI 层 try/catch 处理。模式切换按钮Statemode:number0;Button(this.mode0?模式: 参数编码:模式: 完整URL).fontSize(11).height(28).backgroundColor(#f0f0f0).fontColor(#333).onClick((){this.modethis.mode0?1:0;});一个按钮显示当前模式。点击切换只一次操作。为什么不用两个按钮如 Base64 的编码|解码因为两种编码模式是互斥的选择——同方向、不同范围。切换按钮比两个独立按钮更准确表达互斥语义。操作按钮和错误处理编码按钮蓝色 #007aff和解码按钮橙色 #ff9500在模式切换按钮右侧。Blank()将两者推到两端。doDecode(){if(!this.input.trim())return;try{this.outputthis.mode0?UrlUtils.decode(this.input):UrlUtils.decodeFull(this.input);}catch(e){this.output解码失败请检查输入;}}URIError 的技术信息对非技术用户无帮助——解码失败请检查输入是更友好的替代。三个典型使用场景API 调试%E4%BD%A0%E5%A5%BD→ 解码 → “你好”。快速人眼确认参数含义。构造搜索链接输入中文关键词 → 编码 → 拼接到搜索引擎 URL 后面。修复双重编码URL 经过邮件/聊天软件转发被多次编码%变%25解码一次查看原始内容。项目仓库https://atomgit.com/VON-/harmony-kit