鸿蒙三方组件库封装与发布## 背景上一篇我们拆解了抖音项目这一篇我们就讲讲基础UI组件的封装以及组件库的发布 ## 前

背景

上一篇我们拆解了抖音项目这一篇我们就讲讲基础UI组件的封装以及组件库的发布

前置准备

概念

首页了解下鸿蒙的仓库，OHPM（OpenHarmony Package Manager）由OpenHarmony三方库中心仓网站、命令行工具、OpenHarmony三方库中心仓仓库三个部分组成，此网站是属于开放原子开源基金会，由华为云提供服务

仓库地址 ohpm.openharmony.cn/#/cn/home

后面我们发布开源组件库都是发布在此中央仓库上

注册仓库

官方注册就行 ohpm.openharmony.cn/#/cn/home

申请组织

这里组织是分组的概念后面你发布的组件都在这个组织下面

环境配置

这里以Mac电脑为例

安装ohpm(安装完鸿蒙开发工具的都支持)环境，这里不再赘述
生成工具公私密钥发布组件会用到，执行命令行(.ssh_ohpm文件夹没有先创建，hm为名称可自定义)
```
ssh-keygen -m PEM -t RSA -b 4096 -f ~/.ssh_ohpm/hm 
```
会提示

这个密码要自己设置一个否则发布的时候会报以下错

密码设置后会生成两个文件
- hm文件为私钥本地执行命令配置公钥路径
```
    ohpm config set key_path ~/.ssh_ohpm/hm 
```
- hm.hub为公钥，文本编辑器打开全部复制
  
  仓库上个人中心->认证管理->新增,复制到此处
仓库上个人中心->复制发布码

发布前还需要配置发布码，执行命令(your_publish_id为复制的发布码)
```
    ohpm config set publish_id your_publish_id
```

至此配置方便已经结束，下面创建个具体项目发布以tabsLayout为例子

创建

先创建个项目

file->new->Module 选择Static Library

完善基础信息在组件库目录的oh-package.json5中配置基础信息，要严格按照官方格式否则审核不过 ohpm.openharmony.cn/#/cn/help/c… 基础信息完善后下面三个文件很重要，否则提交时会报错

提交审核

打Har包

执行命令

ohpm publish <HAR路径>

发布结束，个人中心中Package会显示审核中.一般1~2个工作日就过了，很快.

TabComponent组件

目前组件已经发布到开源仓库请移步 ohpm.openharmony.cn/#/cn/detail…

tabsLayout

简介

tabslayout 是一个UI组件库，主要用于导航的tabItem，可配置图片，文字，等基础属性，方便开发及扩展

安装

ohpm install @cornflower/tabslayout

或者在模块的oh-package.json5中添加

"dependencies": {
    "@cornflower/tabslayout": "1.0.0"
}

支持参数

参数	类型	描述
name	string	tab名称
normalIcon	string Resource	默认tab图标
selectIcon	string Resource	选中tab图标
iconWidth	number	icon宽度默认30vp
iconHeight	number	icon高度默认30vp
normalColor	ResourceColor	默认文字颜色
selectColor	ResourceColor	选中文字颜色
normalTextSize	number string Resource	默认文字大小默认16vp
selectTextSize	number string Resource	默认文字大小默认16vp
showBadge	@Prop boolean	是否显示右上角消息默认不显示
badgeTextSize	number string	右上角消息尺寸默认6vp
badgeLargeSize	number string	右上角带文字消息尺寸默认18vp
badgeColor	ResourceColor	右上角消息颜色默认红色
badgeTextColor	ResourceColor	右上角消息文字颜色默认白色
badgeTextSize	number string	右上角消息文字大小默认10vp
message	string	右上角消息提示信息
tabHeight	Length	tab高度默认56vp
currentIndex	number	默认index
selectIndex	@Prop number	选中的index

使用

导入引用

import { TabComponent } from '@cornflower/tabslayout'

builder方式图标+文字

@Builder AddBuilder() {
  TabComponent({
    name: "首页",
    currentIndex: 0,
    selectIndex: this.currentIndex,
    normalIcon: $r("app.media.icon"),
    selectIcon: $r("app.media.icon"),
    showBadge: false,
    message:''
  }).width("100%").height(56)
}

builder纯文字

@Builder AddBuilder() {
  TabComponent({
    name: "首页",
    currentIndex: 0,
    selectIndex: this.currentIndex,
    showBadge: false,
    message:''
  }).width("100%").height(56)
}

例子

仿写抖音底部导航

@Preview
@Component
export struct DyTabContainer {
  @State selectIndex: number = 0
  @State showBadge: boolean = false
  private controller: TabsController = new TabsController()

  @Builder AddBuilder() {
    TabComponent({
      name: "",
      currentIndex: 2,
      selectIndex: this.selectIndex,
      normalIcon: $r("app.media.icon"),
      selectIcon: $r("app.media.icon"),
      normalColor: "#696969",
      selectColor: '#505050',
      showBadge: false,
      message:''
    }).width("100%").height(56)
  }

  aboutToAppear() {
    this.showBadge = true
  }

  @Builder TabBuilder(item: ItemTab) {
    TabComponent({
      name: item.name,
      currentIndex: item.index,
      selectIndex: this.selectIndex,
      showBadge: item.index === 3 ? this.showBadge : false,
      normalColor: "#696969",
      selectColor: '#505050',
      message:''
    }).width("100%").height(56)
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        ForEach(DEFAULT_TABS, (item: ItemTab, index: number) => {
          if (index == 2) {
            TabContent() {
              Column() {
                Text(item.name).fontSize(32)
              }.width('100%')
            }.tabBar(this.AddBuilder())
          } else {
            TabContent() {
              Column() {
                Text(item.name).fontSize(32)
              }.width('100%')
            }.tabBar(this.TabBuilder(item))
          }


        })
      }
      .vertical(false)
      .onChange((index: number) => {
        this.selectIndex = index
        if (index == 3) {
          this.showBadge = false
        }
      })
      .width('100%')
    }.width('100%').height('100%').backgroundColor('#000000')
  }
}

仿写微信底部导航

@Preview
@Component
export struct WxTabContainer {
  @State selectIndex: number = 0
  @State showFindBadge: boolean = false
  @State badgeMessage: string = ''
  private controller: TabsController = new TabsController()

  aboutToAppear() {
    this.showFindBadge = true
    this.badgeMessage = '11'
  }

  @Builder TabBuilder(item: ItemTab) {
    TabComponent({
      name: item.name,
      currentIndex: item.index,
      selectIndex: this.selectIndex,
      showBadge: item.index === 2 ? this.showFindBadge : false,
      normalColor: "#000000",
      selectColor: '#0CC160',
      iconWidth:26,
      iconHeight:26,
      normalIcon: item.icon,
      selectIcon: item.selectIcon,
      message: item.index === 2 ? this.badgeMessage : ''
    }).width("100%")
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        ForEach(DEFAULT_WX_TABS, (item: ItemTab, index: number) => {
          TabContent() {
            Column() {
              Text(item.name).fontSize(32)
            }.width('100%')
          }.tabBar(this.TabBuilder(item))

        })
      }
      .vertical(false).barHeight(60)
      .onChange((index: number) => {
        this.selectIndex = index
        if (index === 2) {
          this.showFindBadge = false
        }
      })
      .width('100%')
    }.width('100%').height('100%').backgroundColor('#ffffff')
  }
}

将要开发功能

添加json动画能力
添加导航条