【OpenHarmony应用开发】如何在Gitee上发布应用第三方库

npm是js的包管理器，通过npm我们可以来管理OpenHarmony第三方库这里以eTS组件为例创建本地组件IDE：DevEco Studio 3.0.0.900首先我们新建项目选择API 8，eTS等待项目完成我们可以看到在entry目录下，有个package.json文件，我们的第三方库都是会使用npm命令安装在e...

如此之白

201人浏览 · 2022-04-25 11:59:52

如此之白 · 2022-04-25 11:59:52 发布

npm是js的包管理器，通过npm我们可以来管理OpenHarmony第三方库

这里以eTS组件为例

创建本地组件

IDE：DevEco Studio 3.0.0.900

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_第三方库

首先我们新建项目

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_第三方库_02

选择API 8，eTS

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_ide_03

等待项目完成

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_第三方库_04

我们可以看到在entry目录下，有个package.json文件，我们的第三方库都是会使用npm命令安装在entry下

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_Gitee_05

接下来我们要创建自己的第三方组件了，我们新建一个module

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_ide_06

选择Ohos Library

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_Gitee_07

给module起个名字，这里我就叫test了，选择eTS，Finish

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_Gitee_08

我们可以看到在新的module下面有个index.ets文件，用来导出我们的组件

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_Gitee_09

这里我重新写了下MainPage.ets组件，组件可以使用Previewer进行预览

@Entry
@Component
export struct MainPage {
  build() {
    Column().height(100).width(100).backgroundColor(Color.Blue)
  }
}

我们的组件是一个100X100的蓝色小块

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_第三方库_10

怎么使用我们本地的这个组件呢？我们在entry/src/main/ets/MainAbility/pages/index.ets文件中

import { MainPage } from '../../../../../../test/index'

// 也可以使用 import { MainPage } from 'test/index'
// 也可以正常预览，但是会报错，建议还是采取相对路径形式

@Entry
@Component
struct Index {
  build() {
    Row() {
      // 我们的组件
      MainPage()
    }
    .height('100%')
  }
}

看看效果，组件可以正常使用

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_ide_11

接下来就是发布这个组件了。

创建Gitee项目

登录我们的Gitee，新建仓库用来发布我们的组件

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_OpenHarmony_12

初始化仓库

不需要添加.gitignore，如果添加了请删掉

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_Gitee_13

添加README文件

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_OpenHarmony_14

初始仓库都是私有的，我们需要进入管理页面

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_Gitee_15

将仓库设为开源

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_第三方库_16

获取仓库地址，这里我的地址是https://gitee.com/hytyj_hamstermie/ohos-test.git

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_Gitee_17

发布组件到Gitee

进入我们test modules目录，这就是我们需要发布的内容

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_第三方库_18

我们首先需要修改我们的package.json

{
  "name": "@ohos/test",
  # 添加作者
  "author": "talkweb_tiantianjiang",
  # 自己可以修改描述
  "description": "a npm package which contains arkUI2.0 page",
  "ohos": {
    "org": ""
  },
  # 这里是第一个版本所以是1.0.0
  "version": "1.0.0",
  "main": "index.ets",
  "types": "",
  # 这里是我们的Gitee库地址    
  "repository": {  
    "type": "git",
    "url": "https://gitee.com/hytyj_hamstermie/ohos-test.git"
  },
  # license保持与Gitee库一致
  "license": "Apache License 2.0",
  "dependencies": {}
}

接下来我们在这个目录下直接新建git仓库

推荐Git Bash与TortoiseGit

TortoiseGit真的很方便

右键Git Bash Here
执行命令

$ git init

关联gitee仓

$ git remote add origin https://gitee.com/hytyj_hamstermie/ohos-test.git

将所有文件添加至缓存区

$ git add .

第一次强制拉取远程仓master分支

$ git pull origin master --allow-unrelated-histories

提交我们的代码到缓存区

$ git commit -m '第一次版本提交'

可以看到我们本地有一个master分支

$ git branch
* master

发布我们的代码到gitee仓master分支

$ git push origin master

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_OpenHarmony_19

NPM本地安装组件

请不要在DevEco IDE中添加第三方库

命令行进入项目entry目录，执行npm命令

npm install git+https://gitee.com/hytyj_hamstermie/ohos-test.git

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_OpenHarmony_20

在IDE中可以查看到变化，点击Sync Now

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_第三方库_21

我们在entry/src/main/ets/MainAbility/pages/index.ets文件中修改组件的引用路径

import { MainPage } from '@ohos/test'

@Entry
@Component
struct Index {
  build() {
    Row() {
      MainPage()
    }
    .height('100%')
  }
}

重启previewer可以查看到组件已经可以使用了

新IDE有点问题，若无法显示或者无法看到更新内容：

1、删除.preview文件夹后，重启previewer

2、重启IDE

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_Gitee_22

组件版本管理

这里为了展示我先建立两个版本分支

1.0.0
1.0.1

# 新建并切换分支1.0.0
$ git checkout -b 1.0.0
# 提交1.0.0分支
$ git push origin 1.0.0

# 新建并切换分支1.0.1
$ git checkout -b 1.0.1

我们修改分支1.0.1下的内容
package.json

{
    ...
    "version": "1.0.1"，
    ...
    
}

entry/src/main/ets/MainAbility/pages/index.ets

把方块改成红色400X400

@Entry
@Component
export struct MainPage {
  build() {
    Column().height(400).width(400).backgroundColor(Color.Red)
  }
}

提交分支

$ git commit -am "版本1.0.1"
$ git push origin 1.0.1

在Gitee上可以看到两个分支

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_OpenHarmony_23

接下来我们来安装1.0.1版本的组件

npm install git+https://gitee.com/hytyj_hamstermie/ohos-test.git#1.0.1

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_Gitee_24

删除.preview文件，后重启previewer

【OpenHarmony应用开发】如何在Gitee上发布应用第三方库_OpenHarmony_25

欢迎加入Laval社区

社区规范：仅讨论OpenHarmony相关问题。

更多推荐

openharmony6.1 投屏工具

目前openharmony6.1上video codec没有适配好的情况下，hdc shell能连接时，没有合适的投屏工具用来展示设备界面（以前4.1及5.0的投屏工具在openharmony6.1用不了）。基于此，写了个简单的投屏工具（见附件），欢迎取用。

Laval社区

RISC-V向量扩展

RISC-V向量扩展介绍博客原文链接QQ技术交流群：750659141 标准头文件 #include <riscv_vector.h> 可以用下面宏定义来测试运行环境是否支持RVV //判断是否支持RVV扩展 #if defined(__riscv) && defined(__riscv_vector) #define IS_RISCV_WITH_RVV 1 #el

Laval社区

OH5.0.3 wifi热点无法切换5G调试记录

UI上切换热点为5G不生效，ap热点频段仍在2.4G 查看communication\wifi\wifi\relation_services\wifi_hal_service\wifi_hal_ap_interface.c 函数未支持解决方案： foundation/communication/wifi/wifi/services/wifi_standard/wifi_framew