HarmonyOS URL 参数处理实战:getQueryValue 与 getParamsUrl 详解

📅 2026/7/13 21:28:08 👁️ 阅读次数 📝 编程学习
HarmonyOS URL 参数处理实战:getQueryValue 与 getParamsUrl 详解

文章目录

    • 前言
      • 背景:URL 结构复习
      • getQueryValue:从 URL 中取出指定参数的值
      • getParamsUrl:动态拼接 URL 参数
      • Map 和 Record 两种格式,怎么选
      • 追加 vs 替换:第三个参数的区别
      • 实际项目中的使用场景
      • 写在最后

前言

近期发现一款很有意思的HarmonyOS 三方库, 地址 @pura/harmony-utils(V1.4.0) , 作者是"桃花镇童长老", 我这里也是直接通过该作者公布的源码进行案例编写进行,写了到目前写了一部分demo ,感觉确实很有帮助,这里呢也是开始写一个系列的演示demo 供大家参考。如有帮助可以在OpenHarmony中进行下载安装进行使用哦

案例demo导航展示

↓↓↓↓↓↓接下来言归正传 ↓↓↓↓

做 HarmonyOS 应用时,处理 URL 参数是个高频需求:H5 页面跳转带参数、后台接口 URL 里取某个字段的值、动态拼接查询参数……每次都自己用字符串 split 或写正则,太麻烦了,FormatUtil 提供了两个专门处理这些的工具。

背景:URL 结构复习

在看代码前,先简单回顾一下 URL 的结构:

https://example.com/api?name=若城&age=18&city=深圳 ↑ 问号后面是查询参数(query string)

查询参数是key=value对,多个参数用&分隔。还有一个细节:中文会被 URL 编码成%E8%8B%A5...的形式。

演示代码里预设了一个 URL:

@StateinputUrl:string='https://example.com/api?name=若城&age=18&city=深圳';@StateinputUrlKey:string='name';

getQueryValue:从 URL 中取出指定参数的值

// 从 URL 中取 'name' 参数的值constv=FormatUtil.getQueryValue(this.inputUrl,this.inputUrlKey);this.addLog(`getQueryValue("${this.inputUrlKey}"):${v}`);// getQueryValue("name"): 若城

两个参数:

  1. 完整的 URL 字符串
  2. 要取的参数名(key)

返回对应的值,如果参数不存在则返回undefined或空字符串。

URL 中的中文值会自动解码:name=若城取出来就是'若城',不是编码后的%E8%8B%A5%E5%9F%8E

演示代码里直接嵌了按钮点击逻辑,注意 try-catch:

Button('getQueryValue').height(38).fontSize(13).backgroundColor('#00796B').onClick(()=>{try{constv=FormatUtil.getQueryValue(this.inputUrl,this.inputUrlKey);this.addLog(`getQueryValue("${this.inputUrlKey}"):${v}`);}catch(e){this.addLog(`getQueryValue 失败:${e}`);}})

URL 格式异常时可能抛出异常,所以套了 try-catch。

getParamsUrl:动态拼接 URL 参数

这个方向反过来:我有一个 URL 和一组参数,要把参数拼接到 URL 上。

用 Map 传参,覆盖模式false= 用新参数替换原有同名参数):

constparams=newMap<string,string>([['token','abc123'],['v','2']]);consturl=FormatUtil.getParamsUrl(this.inputUrl,params,false);this.addLog(`getParamsUrl(Map):${url}`);// https://example.com/api?token=abc123&v=2// 注意:false 模式会用新参数替换原有查询参数

用 Record 传参,追加模式true= 在原有参数基础上追加):

constparams:Record<string,string>={};params['debug']='true';params['t']=Date.now().toString();consturl=FormatUtil.getParamsUrl(this.inputUrl,params,true);this.addLog(`getParamsUrl(Record,append):${url}`);// https://example.com/api?name=若城&age=18&city=深圳&debug=true&t=1716624000000

三个参数:

  1. 原始 URL
  2. 参数:Map<string, string>Record<string, string>
  3. 是否追加(true= 追加到原有参数,false= 替换原有参数)

Map 和 Record 两种格式,怎么选

getParamsUrl支持两种格式传参,各有适合的场景:

Map:参数顺序固定,适合有顺序要求的场景

// Map:保持插入顺序constparams=newMap<string,string>([['token','abc123'],['v','2']]);

Record:字面量风格,写起来更简洁

// Record:适合动态构建constparams:Record<string,string>={};params['debug']='true';params['t']=Date.now().toString();

两种格式功能上完全等价,选哪个看你的使用习惯。

追加 vs 替换:第三个参数的区别

这是最容易搞混的地方,举个例子来说明:

原始 URL:https://example.com/api?name=若城&age=18

追加{ v: '2' }

  • append = truehttps://example.com/api?name=若城&age=18&v=2(原参数保留)
  • append = falsehttps://example.com/api?v=2(原参数被清除)

使用场景:

  • append = true:给已有 URL 添加额外参数(如 token、时间戳)
  • append = false:完全重新设置查询参数

实际项目中的使用场景

场景 1:WebView 跳转时追加 token

constbaseUrl='https://m.example.com/home';constparams:Record<string,string>={};params['token']=GlobalContext.getContext().get<string>('token')??'';params['platform']='harmonyos';constfinalUrl=FormatUtil.getParamsUrl(baseUrl,params,true);// 在 WebView 里加载 finalUrl

场景 2:分享链接加上用户 ID

constshareUrl='https://example.com/article/123';constparams=newMap<string,string>([['invite',userId]]);constshareLink=FormatUtil.getParamsUrl(shareUrl,params,true);

写在最后

两个 URL 工具方法,职责分明:

  • getQueryValue:从 URL 里取某个参数的值,自动解码
  • getParamsUrl:给 URL 动态追加或替换参数

比自己手写 URLSearchParams 或者正则解析要简洁很多,也不容易出 URL 编码相关的 bug。