鸿蒙HarmonyOS开发:如何使用第三方库,加速应用开发

文章目录

      • [一、如何安装 ohpm-cli](#一、如何安装 ohpm-cli)
      • 二、如何安装三方库
        • [1、在 oh-package.json5 文件中声明三方库,以 @ohos/crypto-js 为例:](#1、在 oh-package.json5 文件中声明三方库,以 @ohos/crypto-js 为例:)
        • [2、安装指定名称 pacakge_name 的三方库,执行以下命令,将自动在当前目录下的 oh-package.json5 文件中自动添加三方库依赖。](#2、安装指定名称 pacakge_name 的三方库,执行以下命令,将自动在当前目录下的 oh-package.json5 文件中自动添加三方库依赖。)
      • [三、解决"Cannot find module" 错误](#三、解决"Cannot find module" 错误)
      • 四、如何在项目中使用三方库
      • 五、使用示例详细介绍

一、如何安装 ohpm-cli

ohpm 依赖于 node 运行时,支持 node.js 16.x 及以上版本,请提前安装 nodejs。

下载 ohpm 工具包,点击链接获取

解压文件,进入"ohpm/bin"目录,打开命令行工具,执行 init 命令,安装 ohpm。

  • 安装完成之后,执行如下命令:

    ohpm -v

终端输出为版本号(如:1.0.0),则表示安装成功。

若您想在其他目录使用 ohpm-cli,请将安装 bin 目录路径配置到系统环境变量 path 中。

  • 安装三方库

    ohpm install <package_name>

  • 测试三方库是否正确安装

为了确认 ohpm install 是否正常执行,可检查安装目录下 oh_modules 目录是否存在,并且其中是否包含您所安装三方库的目录。在安装目录下执行以下命令可进行查看:

复制代码
ohpm ls <package_name>
  • 更新三方库

    ohpm update <package_name>

  • 卸载直接依赖的三方库

    ohpm uninstall <package_name>

二、如何安装三方库

OpenHarmony三方库中心仓:https://ohpm.openharmony.cn/

  • 安装的依赖文件
    entry/oh_modules

项目中只能引用 oh_modules 目录下的三方库,若您引用的三方库未安装在 oh_modules 目录下,请先下载安装三方库。

  • oh-package.json5 文件

须在 oh-package.json5 文件中 dependencies 字段中列出引用的三方库,其版本号遵循 semver 规范。

复制代码
{
  "dependencies": {
    "fooLib": "file:./fooLib.har",  // 本地压缩包引用
    "foler": "file:../folder",  // 本地文件夹引用
    "remoteLib1": "1.0.0"  // 远程引用,固定版本
    "remoteLib2": "~3.2.1"  // 远程引用,保持主版本和次版本不变,patch 版本可更新到最新版本。即 3.2.1 ≤ version < 3.3.0
    "remoteLib3": "^3.1.0"  // 远程引用,保持主版本不变,次版本、patch 版本可更新到最新版本。即 3.1.0 ≤ version < 4.0.0
  }
}
1、在 oh-package.json5 文件中声明三方库,以 @ohos/crypto-js 为例:
复制代码
"dependencies": {
   "@ohos/crypto-js": "2.0.1"
}

依赖声明之后,执行以下命令,依赖三方库会存储在当前目录的 oh_modules 目录下。

复制代码
ohpm install
2、安装指定名称 pacakge_name 的三方库,执行以下命令,将自动在当前目录下的 oh-package.json5 文件中自动添加三方库依赖。
复制代码
ohpm install <pacakge_name>

三、解决"Cannot find module" 错误

如果没有正确的安装三方库,而在代码中进行使用,就会出现 "Cannot find module" 错误,解决方法如下:

安装该三方库,执行以下命令:

复制代码
ohpm install <package_name>

四、如何在项目中使用三方库

在您的项目中如需使用某个三方库,请引入该三方库,确保该三方库存储到 oh_module 目录中。

复制代码
import { CryptoJS } from '@ohos/crypto-js'

var hash = CryptoJS.MD5("123456")

五、使用示例详细介绍

1、axios

Axios ,是一个基于 promise 的网络请求库,可以运行 node.js 和浏览器中。本库基于Axios 原库v1.3.4版本进行适配,使其可以运行在 OpenHarmony,并沿用其现有用法和特性。

  • 下载安装

    ohpm install @ohos/axios

  • 需要权限

    ohos.permission.INTERNET

  • 创建一个实例

javascript 复制代码
const instance = axios.create({
  baseURL: 'https://www.xxx.com/info',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
  • 发送http请求
    创建axios实例后,便可通过该实例的api来发送各种http请求,常用的api定义如下
  • 全局 axios 默认值
javascript 复制代码
axios.defaults.baseURL = 'https://www.xxx.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  • 拦截器
    axios可以分别为请求和响应配置拦截器,请求拦截器可在请求发送前进行拦截,响应拦截器可以在then()或者catch()方法执行前进行拦截

    在拦截器中,开发者可以对请求的参数或者响应的结果做一些统一的处理,比如在请求拦截器中统一为所有请求增加token这一Header,在响应拦截器中统一处理错误响应。
javascript 复制代码
// 添加请求拦截器
axios.interceptors.request.use((config:InternalAxiosRequestConfig) => {
  // 对请求数据做点什么
  return config;
}, (error:AxiosError) => {
  // 对请求错误做些什么
  return Promise.reject(error);
});


// 添加响应拦截器
axios.interceptors.response.use((response:AxiosResponse)=> {
  // 对响应数据做点什么
  return response;
}, (error:AxiosError)=> {
  // 对响应错误做点什么
  return Promise.reject(error);
});
  • 获取请求结果
    api的返回值类型均为Promise,Promise是JavaScript中用于表示异步操作结果的对象,若操作成功,其中会包含具体结果,若操作失败,其会包含错误的原因。在实际应用中,开发者可以通过该对象的then()方法来处理操作成功时的结果,通过catch()方法来处理操作失败的情况
javascript 复制代码
get(...)
  .then((response:AxiosResponse)=>{
    //处理请求成功的结果
    ...
  })
  .catch((error:AxiosError)=>{
    //处理请求失败的错误
    ...
  })
  • 响应结构
    AxiosResponse是axios定义的响应结果类型,默认情况下,通过axios发送的所有请求,其成功的响应结果都是该类型。其包含的属性如下
javascript 复制代码
{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写,而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},
  
  // `request` 是生成此响应的请求
  request: {}

  // `performanceTiming` 计算HTTP请求的各个阶段所花费的时间
  performanceTiming: http.PerformanceTiming
}
  • 使用
javascript 复制代码
import axios from '@ohos/axios'

axios.get(url[, config])
.then(res)=>{
console.info("result:" + JSON.stringify(res.data));
}
2、crypto-js

本软件是移植开源软件 crypto-js 源码在OpenHarmony上进行功能适配,在OpenHarmony上已支持原库crypto-js的功能,目前crypto-js已支持的算法有:MD5、SHA-1、SHA-256、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2、AES、RC4、DES等。

  • 下载安装

    ohpm install @ohos/crypto-js

  • 使用说明

    import { CryptoJS } from '@ohos/crypto-js'

  • 或者

    import CryptoJS from '@ohos/crypto-js'

  • md5算法使用

    const hash = CryptoJS.MD5("123456") //传参是需要加密的内容,返回值是加密后的数据

相关推荐
别说我什么都不会10 小时前
ohos.net.http请求HttpResponse header中set-ccokie值被转成array类型
网络协议·harmonyos
码是生活10 小时前
鸿蒙开发排坑:解决 resourceManager.getRawFileContent() 获取文件内容为空问题
前端·harmonyos
鸿蒙场景化示例代码技术工程师10 小时前
基于Canvas实现选座功能鸿蒙示例代码
华为·harmonyos
小脑斧爱吃鱼鱼11 小时前
鸿蒙项目笔记(1)
笔记·学习·harmonyos
鸿蒙布道师12 小时前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
zhang10620912 小时前
HarmonyOS 基础组件和基础布局的介绍
harmonyos·基础组件·基础布局
马剑威(威哥爱编程)12 小时前
在HarmonyOS NEXT 开发中,如何指定一个号码,拉起系统拨号页面
华为·harmonyos·arkts
GeniuswongAir14 小时前
Flutter极速接入IM聊天功能并支持鸿蒙
flutter·华为·harmonyos
90后的晨仔17 小时前
鸿蒙ArkUI框架中的状态管理
harmonyos
别说我什么都不会1 天前
OpenHarmony 5.0(API 12)关系型数据库relationalStore 新增本地数据变化监听接口介绍
api·harmonyos