【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库 原创 精华

发布于 2022-4-22 16:57
浏览
7收藏

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

这里以eTS组件为例

创建本地组件

IDE:DevEco Studio 3.0.0.900

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

首先我们新建项目

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

选择API 8,eTS

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

等待项目完成

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区
选择Ohos Library

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

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

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

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

怎么使用我们本地的这个组件呢?我们在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%')
  }
}

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

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

创建Gitee项目

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

初始化仓库

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

添加README文件

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

将仓库设为开源

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

发布组件到Gitee

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

我们首先需要修改我们的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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

NPM本地安装组件

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

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

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

我们在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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

组件版本管理

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

  • 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上可以看到两个分支

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

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

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

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

删除.preview文件,后重启previewer

【甜甜酱OH实践】如何在Gitee上发布OpenHarmony应用第三方库-开源基础软件社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-4-22 17:06:16修改
8
收藏 7
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐