尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

HarmonyOS7 页面参数校验要放入口处:ArkUI/ArkTS 实战拆解

HarmonyOS7 页面参数校验要放入口处:ArkUI/ArkTS 实战拆解 文章目录前言为什么这个问题经常被写乱参数校验要校什么推荐步骤ArkUI/ArkTS 示例关键代码说明参数失败时怎么分级参数错误后不要继续硬跑写在最后前言详情页崩溃很多时候不是接口慢也不是组件复杂而是入口参数一开始就是脏的。比如id为空、类型不对、从通知跳进来少了字段、老版本页面还传着旧参数。参数校验如果散落在加载数据、渲染标题、点击按钮里后面排查会很累。我在 HarmonyOS7 项目里更倾向于把参数校验放在页面入口进入页面先得到一个可信的 ViewState后面的 UI 只关心正常态、错误态和加载态。不要让页面里的每个角落都猜“参数是不是有效”。入口校验一次后面少很多防御式代码。为什么这个问题经常被写乱页面参数校验要放入口处 这类内容很容易被写成“代码能跑就算讲完了”但对初学者来说这恰恰是最不够的地方。真正让人卡住的往往不是某个组件名记不住而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。所以这篇文章不只想给你一个能跑的例子更想把背后的判断过程讲清楚。你只要把这个判断过程吃透后面自己改页面、补需求、查问题时心里会稳很多。参数校验要校什么参数校验点失败后的处理articleId非空、格式正确展示参数错误页|source| 是否在允许范围内 | 使用默认来源 ||preview| 是否是布尔值 | 默认false||fromPush| 是否影响返回路径 | 单独记录入口类型 |我不建议把所有参数都强行校验到很严格。真正会影响数据请求、权限判断、返回路径的参数必须严格只影响文案的小参数可以给默认值。推荐步骤在页面生命周期或初始化方法里读取参数。用一个明确方法做转换比如parseParams()。转换成功后写入State页面进入正常态。转换失败时写入错误文案不继续请求接口。UI 层只根据pageStatus渲染不重复判断原始参数。ArkUI/ArkTS 示例下面示例模拟文章详情页。它把参数解析、错误态、加载态和正文展示都放在一个闭环里。import{router}fromkit.ArkUIclassDetailParams{articleId:stringsource:stringlistpreview:booleanfalse}typePageStatuschecking|ready|invalidEntryComponentstruct DetailParamCheckPage{StatepageStatus:PageStatuscheckingStateerrorText:stringStatetitle:stringStateparams:DetailParamsnewDetailParams()aboutToAppear():void{constparsedthis.parseParams(router.getParams())if(parsed.articleId.length0){this.pageStatusinvalidthis.errorText缺少文章 ID无法打开详情页return}this.paramsparsedthis.title文章${parsed.articleId}this.pageStatusready}privateparseParams(raw:Object|undefined):DetailParams{constresultnewDetailParams()constrecordrawasRecordstring,Objectif(recordundefined||recordnull){returnresult}constidValuerecord[articleId]if(typeofidValuestringidValue.trim().length0){result.articleIdidValue.trim()}constsourceValuerecord[source]if(sourceValuelist||sourceValuepush||sourceValuesearch){result.sourcesourceValue}constpreviewValuerecord[preview]if(typeofpreviewValueboolean){result.previewpreviewValue}returnresult}BuilderInvalidView(){Column({space:12}){Text(页面打不开).fontSize(22).fontWeight(FontWeight.Bold)Text(this.errorText).fontSize(14).fontColor(#666666)Button(返回上一页).onClick(()router.back())}.padding(24).alignItems(HorizontalAlign.Start)}BuilderContentView(){Column({space:12}){Text(this.title).fontSize(24).fontWeight(FontWeight.Bold)Text(来源${this.params.source}).fontSize(13).fontColor(#777777)if(this.params.preview){Text(预览模式部分操作已禁用).fontSize(13).fontColor(#B26B00).padding(10).backgroundColor(#FFF4D8).borderRadius(8)}Text(这里展示详情内容。实际项目里可以在参数校验通过后再发起网络请求。).fontSize(16).lineHeight(24)}.padding(16).alignItems(HorizontalAlign.Start)}build(){Column(){if(this.pageStatusinvalid){this.InvalidView()}elseif(this.pageStatusready){this.ContentView()}else{LoadingProgress().width(36).height(36)}}.width(100%).height(100%)}}关键代码说明parseParams()是整篇的重点。它把不可信的router.getParams()转成可信的DetailParams。后面的 UI 不再直接读取原始参数避免到处写typeof判断。pageStatus把页面状态收敛成三个值检查中、可展示、参数错误。真实项目里可以再加loading和networkError但不要把“参数错误”和“接口失败”混在一起。错误态页面不只是给用户看的也是给开发者排查问题看的。文案明确到“缺少文章 ID”比空白页有价值很多。参数失败时怎么分级入口校验不是所有失败都直接返回上一页。我会按影响范围分三层处理失败类型例子UI 策略必填缺失articleId为空错误态停止请求可选异常source不在枚举里使用默认值并继续影响权限preview、fromPush异常降级到保守权限这种分级能避免页面过度敏感。用户从旧通知、分享链接、搜索结果进入时参数形态可能并不完全一致真正要拦截的是会导致错误数据或越权操作的字段。参数错误后不要继续硬跑参数校验失败后最重要的是停住后续链路。缺少articleId时继续请求接口只会把一个入口问题伪装成网络问题排查方向会被带偏。可选参数可以更宽松。source不在预期范围内时使用默认来源继续展示比直接把页面打断更合适。真正需要拦截的是会影响数据请求、权限判断和返回路径的字段。UI 也不要再读取原始params。入口处解析出DetailParams后页面后续只面对可信对象和pageStatus这样代码会少很多重复判断。写在最后参数校验看起来是小事但它决定了页面的下限。HarmonyOS7 页面越多、入口越复杂就越应该把这件事前置。入口处多写十几行清晰代码后面能少掉很多隐形 bug。
返回列表