当前位置: 首页 > news >正文

【鸿蒙开发】HarmonyOS开发 URL动态路由设计

前言

2024 年是原生鸿蒙的关键一年,我们要加快推进各类鸿蒙原生应用的开发,集中打赢技术底座和三方生态两大最艰巨的战斗。余承东强调,要构建强大的鸿蒙生态,拉动中国电子工业崛起,开启终端未来大发展的新十年 。

去年 9 月,华为宣布全新 HarmonyOS NEXT 蓄势待发,鸿蒙原生应用全面启动。近几个月来,国内互联网大厂和头部企业纷纷宣布启动鸿蒙原生应用开发。目前已经有包括爱奇艺、支付宝、美团、米哈游、B站、高德地图在内的数百家头部合作伙伴宣布启动鸿蒙原生应用开发,涵盖出行、社交、游戏、办公、购物、生活、教育等18 个领域,鸿蒙新生态版图已经基本完善。

场景

之前在 iOS 或者 Android 开发的时候,我们有一套统一的 URL 规范,通过 URL 路径可以跳转到不同的App原生页面。iOS 类似 MGJRouter,Android 类似 ARouter。
主要场景就是可以通过 CMS 后台配置路径,在App内所有的资源位可以跳转到 App 的任何页面;当然也可以在开发中直接通过 URL的方式跳转。
如在App的首页Banner,需要跳转到某个商品详情页面,iOS/Android 的统一路径为:

hbh://mall/store/detail?id=88888

hbh 为 App 自定义的URL Scheme。
所以在鸿蒙 HarmoneyOS Next 开发中,我们需要继续沿用这套规范,通过 URL 跳转到不同的页面,且要保证 iOS、Andorid、HarmoneyOS Next 的跳转规则一致。

现在大多数的App都是使用组件化开发,如果两个业务组件需要相互跳转到对应组件模块的页面,就需要相互引用组件,这样就会造成依赖循环引用的问题。

所以,为了规范跳转和引用规则和避免造成循环引用的问题,在页面跳转的时候,我们尽量直接通过路由组件的方式跳转,模块库直接尽量减少相互依赖,业务模块也全部依赖 Router 组件即可。
下面是官网介绍动态import时的一个依赖示意图结构图,可以参考:
在这里插入图片描述

项目结构

首先,要确定项目依赖结构,鸿蒙 App 的项目结构一般为:HAP(主 App) 依赖 HSP(动态库) 或 HAR(静态库)。

在这里插入图片描述

一般我们的业务模块为创建为 HSP 动态库模式,也是官网建议的模式,主要是可以缩减包体积大小。

设计步骤

创建 Router 组件

因为 Router 为基础组建,需要发布到私有仓库或公共仓库,提供给其他组件依赖,这里我们创建为 HAR 静态库。

1.创建 Router 组件
2.创建静态组件 hbhrouter, 创建模块时,选择 Static Library.
创建管理类
在组件创建管理类HBHRouter,组件内部跳转直接使用官网Router跳转,使用Url库对URL进行解析。
这里举例App自定义URL Scheme 为:hbh://,如果遇到 http协议,直接打开浏览器即可!
路由的参数类型我们定义为:Record<string, string>类型。
代码如下:

import Url from "@ohos.url"; // URL解析
import { router } from "@kit.ArkUI"; // 路由// Router管理类
export class HBHRouter {// 打开某个链接public static openUrl(urlString: string): void {if (urlString.startsWith("http")) {// 如果是网页,直接打开webView// ... 跳转webview部分代码省略,也需要通过路由跳转到 webview组件} else if (urlString.startsWith("hbh")) {// 如果是自定义hbh地址,解析URI参数和路径const url = Url.URL.parseURL(urlString);// 路径const path = url.hostname + url.pathname;// Router参数类型为Record<string, string>let params: Record<string, string> = {};if (path) {// 解析 uri参数url.params.forEach((value, key) => {params[key] = value;});// 如果设置过映射router.pushNamedRoute({name: path,params: params,},router.RouterMode.Standard,(err) => {if (err) {// 如果跳转失败,再跳转到未找到页面HBHRouter.pushNotFoundPage();}});} else {// 否则跳转到未找到页面// ... 代码省略}}}
}

接着需要在hbhrouter组件根目录的Index.ets文件对外暴露接口即可:

export { HBHRouter } from './src/main/ets/components/utils/HBHRouter'

到此,组件代码就全部完成!

创建业务组件

1.比如我们需要一个商城组件,业务组件我们一般采用 HSP 动态库模式,创建一个hbhshop组件,创建模块时,选择 Shared Library.

2.创建店铺详情页面
在pages目录下创建ShopDetailPage.ets文件,代码如下:

import router from '@ohos.router';// 申明页面入口时,添加路由名称,名称和路径定义保持一致即可
@Entry({routeName: "mall/store/detail"})
@Component
export struct StoreDetailPage {// 接收Router参数@State storeId: string = (router.getParams() as Record<string, string>).storeId;// 或// @State storeId: string = (router.getParams() as Record<string, string>)['storeId'];build() {Row() {Column() {Text(`这是 hbhshop 组件模块`).fontSize(30).fontWeight(FontWeight.Bold)Text(`来到了storeId为${this.storeId}的店铺`).fontSize(20).fontWeight(FontWeight.Regular).margin({ top:15 })}.width('100%')}.height('100%')}
}

router路径定义时,使用: @Entry({routeName: “router_page”})的routerName参数进行定义;
参数接收使用:(router.getParams() as Record<string, string>)
同样在hbhshop组件根目录的Index.ets对外暴露接口即可:

export { StoreDetailPage } from './src/main/ets/components/pages/ShopDetailPage'

import './src/main/ets/pages/StoreDetailPage'

业务组件配置完成!

HAP 主项目中跳转测试

1.添加依赖
在HAP主项目entry模块中,oh-package.json5添加依赖:

"dependencies": {'hbhshop': "file:../hbhshop",'hbhrouter': "file:../hbhrouter"}

因为 hbhrouter静态库还没有发布到远程仓库,这里我们直接依赖本地组件。

2.引入组件页面
需要在跳转页面前,提前引入模块到当前组件,比如我们在entry主模块要跳转到hbhshop组件的ShopDetailPage页面,那么在跳转之前需要:

import 'hbhshop'

如果场景是动态配置的,不知道在什么时机引入合适,可以直接写到App的模块入口EntryAbility.ets中,只要保证跳转之前引用过模块即可!

3.跳转测试
我们在Demo page 目录下自带的index.ets页面中添加测试代码:

// 导入Router
import { HBHRouter } from 'hbhrouter'
@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Row() {Column() {Text(this.message).fontSize(30).fontWeight(FontWeight.Bold)}.width('100%')Button("跳转到店铺详情").onClick(()=> {const url = 'hbh://mall/store/detail?storeId=88888'// 通过Router跳转HBHRouter.openUrl(url)})}.height('100%')}
}

这里需要注意的是,如果引用动态库,需要 编辑 Run Configuration,添加动态库 hbhshop 依赖,如下图:
在这里插入图片描述在这里插入图片描述

或者在HAP(entry)模块打开自动依赖选项:
在这里插入图片描述

写在最后

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。随着鸿蒙的不断发展以及国家的大力支持,未来鸿蒙职位肯定会迎来一个大的爆发,只有积极应对变化,不断学习和提升自己,我们才能在这个变革的时代中立于不败之地。在这里插入图片描述

相关文章:

  • Mac环境下,简单反编译APK
  • 探索未来制造,BFT Robotics引领潮流
  • Flink SQL实践
  • Python 机器学习 基础 之 【实战案例】中药数据分析项目实战
  • 自动化机械臂喷涂生产线方案五
  • 电子电气架构 —— 刷写模式:并行刷写
  • mysql中 redo日志(下)
  • 手撸 串口交互命令行 及 AT应用层协议解析框架
  • 北航第四次数据结构与程序设计编程题复习
  • 宝塔面板和 LNMP 环境下反代 HFish 蜜罐平台的正确方法
  • Spring Boot 复习
  • 正式发布 | 极海首款GHD3440电机专用栅极驱动器,构建多元电机产品矩阵
  • python使用阿里云邮箱发送email邮件
  • 【lesson4】服务端配置信息模块实现
  • 【C#】IndexOf的使用
  • php的引用
  • Apache Zeppelin在Apache Trafodion上的可视化
  • Fundebug计费标准解释:事件数是如何定义的?
  • JavaScript设计模式系列一:工厂模式
  • java概述
  • JS专题之继承
  • VuePress 静态网站生成
  • 工作踩坑系列——https访问遇到“已阻止载入混合活动内容”
  • 基于Volley网络库实现加载多种网络图片(包括GIF动态图片、圆形图片、普通图片)...
  • 经典排序算法及其 Java 实现
  • 聊聊redis的数据结构的应用
  • 码农张的Bug人生 - 初来乍到
  • 前端_面试
  • 十年未变!安全,谁之责?(下)
  • 使用权重正则化较少模型过拟合
  • 它承受着该等级不该有的简单, leetcode 564 寻找最近的回文数
  • 听说你叫Java(二)–Servlet请求
  • 网络应用优化——时延与带宽
  • 以太坊客户端Geth命令参数详解
  • 在Docker Swarm上部署Apache Storm:第1部分
  • ionic异常记录
  • ​草莓熊python turtle绘图代码(玫瑰花版)附源代码
  • (14)目标检测_SSD训练代码基于pytorch搭建代码
  • (22)C#传智:复习,多态虚方法抽象类接口,静态类,String与StringBuilder,集合泛型List与Dictionary,文件类,结构与类的区别
  • (bean配置类的注解开发)学习Spring的第十三天
  • (javascript)再说document.body.scrollTop的使用问题
  • (Redis使用系列) Springboot 在redis中使用BloomFilter布隆过滤器机制 六
  • (附源码)spring boot基于小程序酒店疫情系统 毕业设计 091931
  • (附源码)ssm高校志愿者服务系统 毕业设计 011648
  • (过滤器)Filter和(监听器)listener
  • (黑客游戏)HackTheGame1.21 过关攻略
  • (经验分享)作为一名普通本科计算机专业学生,我大学四年到底走了多少弯路
  • (精确度,召回率,真阳性,假阳性)ACC、敏感性、特异性等 ROC指标
  • (四)鸿鹄云架构一服务注册中心
  • (算法二)滑动窗口
  • (一)C语言之入门:使用Visual Studio Community 2022运行hello world
  • (转)利用PHP的debug_backtrace函数,实现PHP文件权限管理、动态加载 【反射】...
  • (最完美)小米手机6X的Usb调试模式在哪里打开的流程
  • .Net 8.0 新的变化
  • .net core webapi 大文件上传到wwwroot文件夹