【鸿蒙实战开发】HarmonyOS 页面路由 router 库的使用

第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 整体还不错 。。。。

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我两个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing ，不定期分享原创知识。