企业官网建设流程全解析

建网站服务器用哪种,做网站应该买哪一种服务器,重置wordpress,wordpress新建菜单一、背景 公司鸿蒙项目采用壳工程 功能模块拆分为独立工程的架构模式#xff0c;既实现代码解耦#xff0c;也方便多团队并行开发#xff0c;但独立工程之间无法直接引用源码#xff0c;那就要考虑如何实现 “主工程按钮点击跳转到功能工程的页面”问题#xff0c;通过以…一、背景公司鸿蒙项目采用壳工程 功能模块拆分为独立工程的架构模式既实现代码解耦也方便多团队并行开发但独立工程之间无法直接引用源码那就要考虑如何实现 “主工程按钮点击跳转到功能工程的页面”问题通过以下案例来实现这个思路步骤二、前置了解先了解几个鸿蒙的核心概念1、HAR 包鸿蒙的 “模块归档包”包含代码、资源、依赖的独立单元是跨工程依赖的唯一载体2、跨工程依赖主工程通过依赖功能工程的 HAR 包 / 本地模块间接访问其组件3、NavPathStack鸿蒙原生全局路由栈是承载所有页面包括跨工程页面的容器。三、具体流程案例lucyTest工程→loginTest 工程 login模块跨工程跳转主要分为三部分发送方lucyTest 主工程配置接收方loginTest 登录工程配置跳转逻辑实现3.1、接收方3.1.1、准备可被跳转的模块在loginTest工程内新建login模块可被其他工程依赖并提供可跳转的页面loginPage.ets目的定义跨工程跳转的目标页面组件后续通过路由映射让主工程识别。3.1.2、配置路由表在loginTest的login模块中创建route_map.json目的鸿蒙路由系统通过route_map.json识别页面的 “唯一标识name” 与 “渲染入口”是跨工程跳转的 “页面身份证”。具体使用方法可参考此文章https://blog.csdn.net/weixin_71403100/article/details/154455692?spm1001.2014.3001.5502{ routerMap: [ { name: loginPage, pageSourceFile: src/main/ets/_generated/BuilderMap.ets, buildFunction: loginPageBuilder, data: { needLogin: false } } ] }3.1.3、生成页面构建器统一页面入口在loginTest的login模块中创建BuilderMap.ets定义页面的构建函数目的将页面组件封装为Builder函数匹配route_map.json中的buildFunction让路由系统能直接调用渲染页面。备注当路由页面少时这一步可以直接放到第一步中当大型项目页面多时建议抽成一个文件在index中统一导出3.1.4、导出模块入口对外暴露能力在login 模块 index.ets 导出目标组件目的主工程依赖模块后通过index.ets统一访问模块的能力页面、方法。//路径 /loginTest/login/Index.ets export * from ./src/main/ets/_generated/BuilderMap3.1.5、将login模块打包为HAR包3.2、发送方3.2.1、引入 login 模块本地依赖 / HAR 包依赖二选一方式1:本地路径依赖工程在同一目录下1、在lucyTest的build-profile.json5中注册login模块2、在lucyTest的oh-package.json5中声明依赖方式 2HAR 包依赖将login模块的 HAR 包放入lucyTest的libs目录再在oh-package.json5中依赖执行ohpm install安装依赖主工程即可访问login模块的能力。3.2.2 初始化 login 模块动态导入 传递上下文在lucyTest的EntryAbility.ets中动态导入login模块并执行初始化传递主工程上下文3.2.3、配置全局路由栈承载跨工程页面的容器在lucyTest的跳转页面如Index.ets中创建全局唯一的 NavPathStack鸿蒙原生路由栈所有页面都需通过它跳转// lucyTest/entry/src/main/ets/pages/Index.ets Entry Component struct Index { // 全局路由栈承载主工程跨工程的页面 private globalNavStack: NavPathStack new NavPathStack(); build() { Column(){ // Navigation绑定全局路由栈页面跳转的容器 Navigation(this.globalNavStack){ // 跳转按钮 Button(跳转到login组件) .onClick((){ // 后续实现跳转逻辑 }) } .height(100%) .width(100%) } } }3.3、实现跨工程跳转逻辑在lucyTest的Index.ets按钮点击事件中调用NavPathStack.pushPathByName通过loginPage路由名称跳转目的通过route_map.json中注册的loginPage名称让路由系统找到对应的页面构建函数渲染跨工程的loginPage组件。// lucyTest/entry/src/main/ets/pages/Index.ets Button(跳转到login组件) .onClick((){ // 跳转到login模块的loginPage页面 this.globalNavStack.pushPathByName(loginPage, null, false); })四、技能总结主要使用到Navigation路由导航HAR包跨工程依赖动态导入 harInit五、会遇到的坑以下是因为粗心大意而遇到的坑总结下以免后续再犯1、主工程找不到 login 模块检查build-profile.json5/oh-package.json5的路径是否正确执行ohpm install2、跳转过去是个空白检查路由表信息的配置项是否正确检查是否绑定NavPathStack3、harInit方法未找到检查login模块的index.ets是否导出了harInit