鸿蒙5.0开发【页面路由 router 库的使用】

鸿蒙系统小能手Mr.Li

于 2024-08-04 22:16:17 发布

阅读量359

点赞数 11

分类专栏：鸿蒙开发文章标签： harmonyos 服务器华为鸿蒙系统鸿蒙页面路由 router库

本文链接：https://blog.csdn.net/2401_82772199/article/details/140912669

版权

鸿蒙开发专栏收录该内容

164 篇文章 1 订阅

订阅专栏

第1个页面 index.ets



// 导入页面路由模块
import router from '@ohos.router'
// 公共回调信息
// import { base } from '@ohos.base';
// import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 跳转按钮绑定onClick事件，点击时跳转到第二页
        .onClick(() => {
          console.info(`Succeeded in clicking the 'Next' button.`)
          // 跳转到第二页
          router.pushUrl({ url: 'pages/Second' }).then(() => {
            console.info('Succeeded in jumping to the second page.')

          }).catch((err) => {
            console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

第2个页面 index.ets


// Second.ets
// 导入页面路由模块
import router from '@ohos.router'

@Entry
@Component
struct Second {
  @State message: string = 'Hi there'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 返回按钮绑定onClick事件，点击按钮时返回到第一页
        .onClick(() => {
          console.info(`Succeeded in clicking the 'Back' button.`)
          try {
            // 返回第一页
            router.back()
            console.info('Succeeded in returning to the first page.')
          } catch (err) {
            let code = (err).code;
            let message = (err).message;
            console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

按照教程导入这几个库都是失败的，ohpm install 提示找不到不知道咋解决😂

// import { base } from '@ohos.base';
// import { BusinessError } from '@kit.BasicServicesKit';
// import {router } from '@kit.ArkUI';

尝试导入lottie是可以成功的

ohpm install @ohos/lottie
ohpm INFO: fetch meta info of package '@ohos/lottie' success https://repo.harmonyos.com/ohpm/@ohos/lottie
ohpm INFO: fetch package done  1 @ohos/lottie https://contentcenter-drcn.dbankcdn.cn/pub_1/DevEcoSpace_DevEcoSpace_901_9/6c/v3/06815f9e-0508-44ec-b7b8-c2ed75139544/lottie-2.0.11.har
install completed in 0s 277ms

ohpm -v
1.2.0

harmonyos导入库 install成功后会默认加到 oh-package.json5中

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "",
  "dependencies": {
    "@ohos/lottie": "^2.0.11"
  },
  "devDependencies": {
    "@ohos/hypium": "1.0.6"
  }
}

ohpm list

hello-world@1.0.0 /Users/xxx/DevEcoStudioProjects/HelloWorld2
├── @ohos/hypium@1.0.6
└── @ohos/lottie@2.0.11

Previewer 整体还不错。

最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。