0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

如何在鸿蒙系统上弄一个ArkUI应用

OpenHarmony技术社区 来源:鸿蒙技术社区 作者:拓维云创qzk 2021-11-15 09:28 次阅读

大家可以看到很明显这是一个 ArkUI 的应用,在远程模拟器上目前还只可以跑在 P40 Pro 上。

其实为了这个目的,只需要做到两个步骤,第一步整出一个 ArkUI 的应用来,第二步将该应用放上 Hi3516 跑起来,OK,这就是总体思路,然后顺着这个步骤,一步一步来做。

整一个 ArkUI的应用

因为我这里的主要目的是为了测试 3516 标准系统是否支持 ArkUI 框架,所以仅仅写了一个超简单的 demo,因为这 demo 还不属于本文章的重点,就是小示例。

①首先创建一个声明式 UI 工程

如下图在 deveco studio 中创建工程的时候注意一下,别的没什么区别。

②将图片放入对应目录

右键 resources 文件夹,点击 New>Resource Directory,选择 Resource Type 为 Media(图片资源),选择资源限定词为 Device-Phone,详细参考官方大大。

这里需要注意的是如果采用把图片放在 rawfile 下的时候,这个时候在远程模拟器的 P40 Pro 是可以完美显示的,但是在 3516 中图片显示不出来,具体原因还有待深究!有兴趣的大佬可以去深究一拨儿,我以后也会去看这个问题。

③添加代码引用资源

直接将 entry/src/main/default/pages/index.ets 中的文件替换为如下内容:

@Entry
@Component
structMyComponent{
build(){
Stack(){
Image($r('app.media.cat'))
.objectFit(ImageFit.Contain)
.height(357)
Text('Cat')
.fontSize(26)
.fontWeight(500)
}
}
}

④修改应用名字

这个配置文件是 string.json,所存在目录为:

entry/src/main/resources/base/element/string.json

试着将应用放入 Hi3516 上跑起来

因为我们这个是属于把应用放入实体设备,所以签名这一步是必不可少的,签名完成后,在打出 hap 包后,再把 hap 包想办法扔进设备,并且可以运行。

openharmony 签名打包

下面这几步骤就是 openharmony 签名过程,缺一不可。

生成密钥和证书请求文件,这里先了解哈这两个概念:

  • 密钥:包含非对称加密中使用的公钥和私钥,存储在密钥库文件中,格式为 .p12,公钥和私钥对用于数字签名和验证。

  • 证书请求文件:格式为 .csr,全称为 Certificate Signing Request,包含密钥对中的公钥和公共名称、组织名称、组织单位等信息,用于向 AppGallery Connect 申请数字证书。

然后操作方法就是打开你的 deveco studio,然后按照下图进行操作:

f02e0ac0-458d-11ec-b939-dac502259ad0.png

然后就会弹出下述界面:

f087f59e-458d-11ec-b939-dac502259ad0.png

如果是第一次使用的话,肯定是没有生成过密钥的,也就是 .p12 文件,所以这里需要 new 一个,这里需要重点关注的是 new 的时候会让你写一个密码,这个密码写了啥,一定要记住,后面会用,不然整个打包过程就会直接 fail。

接下来就按照提示填就可以了。这一步完成之后会生成一个 .p12 文件和一个 .csr 文件,这两个文件很重要缺一不可。

生成应用证书文件:生成应用证书文件的格式为 .cer,由华为 AppGallery Connect 颁发。

先进入 openharmonysdk 的目录下,这里是 deveco studio 的安装目录,然后敲命令行,执行如下命令:

f126f694-458d-11ec-b939-dac502259ad0.png

keytool 是 jdk 中的一个工具,在我把路径加好之后仍然找不到,所以大家如果也遇到我的这个错误可以直接加上全路径。

这里只需要关注的两个参数,一个是 -input,另外一个是 -output。
  • -input:这里需要填写的路径是在上面步骤中生成的 .csr 文件。

  • -output:这里需要填写的是这一次操作会生成的应用证书文件:.cer,这在签名中会用到。

生成应用 Profile 文件:这一步和上面一样需要先进入到 deveco studio 安装目录中的 openharmony sdk 路径下,然后敲命令行,如下图所示:

f1b66d56-458d-11ec-b939-dac502259ad0.png

命令中的 provisionsigtool.jar 这个文件在 sdk 目录中就存在。

这里需要注意的参数有 -out 和 distribution-certificate:

  • -out:这个参数指定本次生成的文件存放目录,为 .p7b。

  • distrubution-certificate:这个参数用来指定上文中生成的 .cer 文件。

配置应用签名信息:在 deveco studio 中按照下述图片点击出第二副配置界面:

f218e396-458d-11ec-b939-dac502259ad0.png

按照上图点击 Project Structure,然后弹出:

f2926a04-458d-11ec-b939-dac502259ad0.png

上图中的 .p12 文件为 2.1.1 中生成的,上图中的密码是 2.1.1 中设置的密码,key alias 也是在 2.1.1 中设备的别名;上图中的 .p7b 文件是在 2.1.3 中生成的,上图中的 .cer 文件是在 2.1.2 中生成的。

打 release 的 hap 包:按照下图所示,使用 dev eco 进行生成 hap 包。

f33da6b2-458d-11ec-b939-dac502259ad0.png

②将上文中生成好的带签名的 hap 包烧录进去系统

PS:本身琢磨源码的想法,所以我没有采用工具进行安装,而是把 hap 包放入系统源码中,然后修改一些配置文件,让其成为系统的自带应用,然后编译,最后在烧录系统。

这里对烧录系统有疑问,而你恰好也是 ubuntu 系统的话,可以参考我的上一篇文章:

https://harmonyos.51cto.com/posts/8994

将 hap 包放入指定位置:将 hap 包放入到 applications/standard/hap 目录下。

f3bc8efa-458d-11ec-b939-dac502259ad0.png

上图中可以看到我将 hap 包重新命名为了 Temp.hap。

修改编译配置文件:这里的编译配置文件一共需要修改两个,一个是 BUILD.gn,另一个是 ohos.build。

applications/standard/hap/BUILD.gn,按照下图进行添加:

f4492586-458d-11ec-b939-dac502259ad0.png

applications/standard/hap/ohos.build,按照下图进行添加:

f4c714a0-458d-11ec-b939-dac502259ad0.png

启动编译:执行下列命令进行编译。

./build.sh--product-nameHi3516DV300

编译完成之后,进行烧录,就可以看到诱人的 ArkUI 应用了。

责任编辑:haq
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙系统
    +关注

    关注

    183

    文章

    2634

    浏览量

    66309
  • HarmonyOS
    +关注

    关注

    79

    文章

    1974

    浏览量

    30149

原文标题:亲测!ArkUI在3516标准系统可以完美跑起来!

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:OpenHarmony技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    Taro鸿蒙技术内幕系列():如何将React代码跑在ArkUI

    基于 Taro 打造的京东鸿蒙 APP 已跟随鸿蒙 Next 系统公测,本系列文章将深入解析 Taro 如何实现使用 React 开发高性能鸿蒙应用的技术内幕。
    的头像 发表于 10-25 17:24 310次阅读
    Taro<b class='flag-5'>鸿蒙</b>技术内幕系列(<b class='flag-5'>一</b>):如何将React代码跑在<b class='flag-5'>ArkUI</b><b class='flag-5'>上</b>

    鸿蒙开发ArkUI-X基础知识:【ArkUI代码工程及构建介绍】

    ArkUI作为OpenHarmony的默认开发框架,在本项目(ArkUI-X)中需要做到套代码同时支持多平台构建,所以会采取共仓开发的方式,部分仓直接指向OpenHarmony相关开源仓。
    的头像 发表于 05-25 16:45 2074次阅读
    <b class='flag-5'>鸿蒙</b>开发<b class='flag-5'>ArkUI</b>-X基础知识:【<b class='flag-5'>ArkUI</b>代码工程及构建介绍】

    鸿蒙ArkUI-X跨平台开发:【 编写第一个ArkUI-X应用】

    通过构建简单的ArkUI页面跳转示例,快速了解资源创建引用,路由代码编写和UI布局编写等应用开发流程。
    的头像 发表于 05-21 17:36 694次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>-X跨平台开发:【 编写第<b class='flag-5'>一个</b><b class='flag-5'>ArkUI</b>-X应用】

    鸿蒙ArkUI-X跨语言调用说明:【平台桥接(@arkui-x.bridge)】

    平台桥接用于客户端(ArkUI)和平台(Android或iOS)之间传递消息,即用于ArkUI与平台双向数据传递、ArkUI侧调用平台的方法、平台调用ArkUI侧的方法。
    的头像 发表于 05-21 15:09 740次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>-X跨语言调用说明:【平台桥接(@<b class='flag-5'>arkui</b>-x.bridge)】

    鸿蒙跨平台框架:【ArkUi-X】创建工程

    鸿蒙推出了鸿ArkUi-X 框架所以就写个文章分享
    的头像 发表于 05-13 17:48 935次阅读
    <b class='flag-5'>鸿蒙</b>跨平台框架:【<b class='flag-5'>ArkUi</b>-X】创建工程

    鸿蒙ArkUI:【从代码到UI显示的整体渲染流程】

    方舟开发框架(简称ArkUI)是鸿蒙开发的UI框架,提供如下两种开发范式,我们 **只学声明式开发范式**
    的头像 发表于 05-13 16:06 904次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>:【从代码到UI显示的整体渲染流程】

    鸿蒙开发学习:初探【ArkUI-X】

    **简单来说,ArkTS + ArkUI-X 对标的框架为 flutter,次代码,编译为 native 全平台运行**
    的头像 发表于 05-13 15:58 1030次阅读
    <b class='flag-5'>鸿蒙</b>开发学习:初探【<b class='flag-5'>ArkUI</b>-X】

    鸿蒙ArkUI开发实战:制作【简单计数器】

    `@Entry` 修饰符表示页面的入口,它需要在 `main_pages.json` 配置才可以在设备正常显示, `@Component` 修饰符表示 `Index` 是
    的头像 发表于 04-08 18:05 616次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>开发实战:制作<b class='flag-5'>一</b><b class='flag-5'>个</b>【简单计数器】

    鸿蒙ArkUI实例:【自定义组件】

    组件是 OpenHarmony 页面最小显示单元,页面可由多个组件组合而成,也可只由组件组合而成,这些组件可以是ArkUI开发框架自
    的头像 发表于 04-08 10:17 632次阅读

    鸿蒙ArkUI开发实战:eTS版【笑话app】

    制作款笑话app,使用ArkUI
    的头像 发表于 03-25 16:04 449次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>开发实战:eTS版【笑话app】

    纯血鸿蒙系统,拿什么与安卓、iOS比?

    ArkUI …… 2、鸿蒙进阶 Stage模型 网络、数据管理 次开发多段部署 …… 3、鸿蒙多媒体技术 音频 视频 相机 图片 …… 4、鸿蒙
    发表于 02-21 21:04

    何在鸿蒙系统安装Google Play

    随着鸿蒙(HarmonyOS)系统的逐渐普及和用户基数的增加,些用户希望能在鸿蒙系统使用Go
    的头像 发表于 01-31 17:13 1.6w次阅读

    鸿蒙ArkUI开发-应用添加弹窗

    弹窗是种模态窗口,通常用来展示用户当前需要的或用户必须关注的信息或操作。在弹出框消失之前,用户无法操作其他界面内容。ArkUI为我们提供了丰富的弹窗功能
    的头像 发表于 01-24 17:22 654次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>开发-应用添加弹窗

    鸿蒙ArkUI开发-Video组件的使用

    以视频功能为例,在应用开发过程中,我们需要通过ArkUI提供的Video组件为应用增加基础的视频播放功能。借助Video组件,我们可以实现视频的播放功能并控制其播放状态。常见的视频播放场景包括观看网络的较为流行的短视频,也包括查看我们存储在本地的视频内容。
    的头像 发表于 01-23 16:59 1326次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>开发-Video组件的使用

    鸿蒙ArkUI开发-Tabs组件的使用

    鸿蒙ArkUI开发-Tabs组件的使用
    的头像 发表于 01-19 16:01 1881次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>开发-Tabs组件的使用