开天辟地 HarmonyOS(鸿蒙) - 开发基础: HAR(Harmony Archive)

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

开天辟地 HarmonyOS(鸿蒙) - 开发基础: HAR(Harmony Archive)

示例如下:

pages\basic\HarDemo.ets

/*
 * HAR(Harmony Archive) - 静态共享包
 *   支持独立发布(比如要发布你自己实现的第三方库时,就可以将其封装为一个 har 包)
 *   支持 UIAbility 组件,但是不支持 ExtensionAbility 组件
 *   不支持在 main_pages.json 中声明页面,也就是说无法通过页面地址跳转到 har 包内的页面,但是可以通过命名路由的方式跳转到 har 包内的页面
 *   在编译时与应用程序链接,代码直接嵌入到应用二进制文件中
 */

import { TitleBar } from '../TitleBar';
import { MainPage as har1_MainPage, hello as har1_hello } from 'har1' // 源码方式引用本地的 har 模块的示例
import { MainPage as har2_MainPage, hello as har2_hello } from 'har2' // 文件方式引用指定的 har 文件时示例
import { DialogHelper } from '@pura/harmony-dialog' // 引用第三方 har 包的示例
import { router } from '@kit.ArkUI';

@Entry
@Component
struct HarDemo {

  build() {
    Column() {
      TitleBar()
      Tabs() {
        TabContent() { MySample1() }.tabBar('基础').align(Alignment.Top)
      }
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .layoutWeight(1)
    }
  }
}

/*
 * HAR(Harmony Archive)是静态共享包
 * 右键单击全局项目,然后 New -> Module... -> Static Library 即可创建新 har 包
 * 在 har 项目中的 oh-package.json5 的 main 指定的文件中,配置需要导出的功能
 * 如需编译打包,则选中 har 模块,然后在 Build 菜单中编译即可,编译后是 .har 文件
 *
 * 源码方式引用本地的 har 模块时,如果需要在 entry 模块中引用,则在 entry/oh-package.json5 中做类似如下的配置
 * {
 *   "dependencies": {
 *     "har1": "../har1"
 *   }
 * }
 * 然后执行 ohpm install 后即可
 * 导入的方法类似如下 import { MainPage as har1_MainPage } from 'har1'
 *
 * 文件方式引用指定的 har 文件时,如果需要在 entry 模块中引用,则在 entry/oh-package.json5 中做类似如下的配置
 * {
 *   "dependencies": {
 *     "har2": "../library/har2.har"
 *   }
 * }
 * 然后执行 ohpm install 后即可(如果文件更新了则需要再执行 ohpm install)
 * 导入的方法类似如下 import { MainPage as har2_MainPage } from 'har2'
 *
 * 引用第三方 har 包时,先在 https://ohpm.openharmony.cn/ 中找到需要的第三方包
 * 如果需要在全局项目中引用,则在全局目录下执行类似如下的命令即可 ohpm i @pura/harmony-dialog
 * 然后会发现,在全局项目中的 oh-package.json5 中多了类似如下的配置
 * {
 *   "dependencies": {
 *     "@pura/harmony-dialog": "^1.1.3"
 *   }
 * }
 */
@Component
struct MySample1 {

  @State message: string = ""

  aboutToAppear(): void {
    // 调用 har 包中的接口
    this.message += `${har1_hello("webabcd")}\n` // 参见 har1/src/main/ets/utils/Helper.ets
    this.message += `${har2_hello("webabcd")}\n` // 参见 har2/src/main/ets/utils/Helper.ets
  }

  build() {
    Column({ space: 10 }) {

      Text(this.message)

      // 显示 har 包中的页面
      har1_MainPage({param1: "value1"}).height(120) // 参见 har1/src/main/ets/components/MainPage.ets
      har2_MainPage({param1: "value1"}).height(120) // 参见 har2/src/main/ets/components/MainPage.ets

      // 跳转到 har 包中的指定的页面
      Button("通过命名路由跳转到 har 包的指定的页面").onClick(() => {
        router.pushNamedRoute({
          name: 'routeName1', // 命名路由的名称,参见 har1/src/main/ets/components/MyPage.ets
          params: { // 传参
            param1: "value1",
          }
        })
      })
      Button("通过命名路由跳转到 har 包的指定的页面").onClick(() => {
        router.pushNamedRoute({
          name: 'routeName2', // 命名路由的名称,参见 har2/src/main/ets/components/MyPage.ets
          params: { // 传参
            param1: "value1",
          }
        })
      })

      Button("第三方库测试").onClick(() => {
        DialogHelper.showToast('第三方库测试');
      })
    }
  }
}

\har1\Index.ets

// 注:在项目中的 oh-package.json5 的 main 标签需要配置为本文件(Index.ets)

// 当前 HAR 库需要导出的功能
export { MainPage } from './src/main/ets/components/MainPage'
export { MyPage } from './src/main/ets/components/MyPage'
export { hello } from './src/main/ets/utils/Helper'

\har1\src\main\ets\utils\Helper.ets

export function hello(name: string) {
  return `hello(har1):${name}`
}

\har1\src\main\ets\components\MainPage.ets

@Component
export struct MainPage {

  // 组件参数,在调用此组件的时候可以对其初始化
  param1: string = ""

  @State message: string = 'hello har1\n';

  aboutToAppear(): void {
    this.message += `param1: ${this.param1}`
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(36)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

\har1\src\main\ets\components\MyPage.ets

import { router } from "@kit.ArkUI";

/*
 * @Entry() - 通过 routeName 指定命名路由的名称,其他包可以通过 router.pushNamedRoute() 导航至指定名称的页面
 */
@Entry({ routeName: "routeName1" })
@Component
export struct MyPage {
  @State message: string = 'hello routeName1\n';

  aboutToAppear(): void {
    /*
     * router.getParams() - 获取 router 传递过来的数据
     */
    const params = router.getParams() as Record<string, string>
    this.message += `param1: ${params.param1}`
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(36)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

\har2\Index.ets

// 注:在项目中的 oh-package.json5 的 main 标签需要配置为本文件(Index.ets)

// 当前 HAR 库需要导出的功能
export { MainPage } from './src/main/ets/components/MainPage'
export { MyPage } from './src/main/ets/components/MyPage'
export { hello } from './src/main/ets/utils/Helper'

\har2\src\main\ets\utils\Helper.ets

export function hello(name: string) {
  return `hello(har2):${name}`
}

\har2\src\main\ets\components\MainPage.ets

@Component
export struct MainPage {

  // 组件参数,在调用此组件的时候可以对其初始化
  param1: string = ""

  @State message: string = 'hello har2\n';

  aboutToAppear(): void {
    this.message += `param1: ${this.param1}`
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(36)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

\har2\src\main\ets\components\MyPage.ets

import { router } from "@kit.ArkUI";

/*
 * @Entry() - 通过 routeName 指定命名路由的名称,其他包可以通过 router.pushNamedRoute() 导航至指定名称的页面
 */
@Entry({ routeName: "routeName2" })
@Component
export struct MyPage {
  @State message: string = 'hello routeName2\n';

  aboutToAppear(): void {
    /*
     * router.getParams() - 获取 router 传递过来的数据
     */
    const params = router.getParams() as Record<string, string>
    this.message += `param1: ${params.param1}`
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(36)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

源码 https://github.com/webabcd/HarmonyDemo
作者 webabcd

posted @   webabcd  阅读(4)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示