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

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

3天内不再提示

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

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-05-13 17:48 次阅读
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

前言:

鸿蒙推出了鸿ArkUi-X 框架所以就写个文章分享一下

效果图:

f293d9a85f6006ad198a9daff00022f8_720.jpg 首先需要下载支持 ArkUI-X 套件的华为开发工具 DevEco ,版本为 4.0 以上,目前可以下载预览版进行体验。

开发前请熟悉鸿蒙开发指导文档:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

DevEco Studio 4.0Beta下载链接

[Windows(64-bit)]https://link.juejin.cn?target=https%3A%2F%2Fgitee.com%2Flink%3Ftarget%3Dhttps%253A%252F%252Fcontentcenter-vali-drcn.dbankcdn.cn%252Fpvt_2%252FDeveloperAlliance_package_901_9%252F38%252Fv3%252FefALRNm3TJuKHfv-1xzjew%252Fdevecostudio-windows-4.0.0.201.zip%253FHW-CC-KV%253DV1%2526HW-CC-Date%253D20230613T085338Z%2526HW-CC-Expire%253D315360000%2526HW-CC-Sign%253D49E7D85C8A485D5D1F04944DFE1AFCFEE3F60E03D25A01BEFE12BA6CEADD19E0 "https://gitee.com/link?target=https%3A%2F%2Fcontentcenter-vali-drcn.dbankcdn.cn%2Fpvt_2%2FDeveloperAlliance_package_901_9%2F38%2Fv3%2FefALRNm3TJuKHfv-1xzjew%2Fdevecostudio-windows-4.0.0.201.zip%3FHW-CC-KV%3DV1%26HW-CC-Date%3D20230613T085338Z%26HW-CC-Expire%3D315360000%26HW-CC-Sign%3D49E7D85C8A485D5D1F04944DFE1AFCFEE3F60E03D25A01BEFE12BA6CEADD19E0"

[Mac(X86)]https://link.juejin.cn?target=https%3A%2F%2Fgitee.com%2Flink%3Ftarget%3Dhttps%253A%252F%252Fcontentcenter-vali-drcn.dbankcdn.cn%252Fpvt_2%252FDeveloperAlliance_package_901_9%252F71%252Fv3%252FA3thi3-kRTSeO4Jp0DSigA%252Fdevecostudio-mac-4.0.0.201.zip%253FHW-CC-KV%253DV1%2526HW-CC-Date%253D20230613T085132Z%2526HW-CC-Expire%253D315360000%2526HW-CC-Sign%253DBA233FE054A7D07F4B1C3ED80C84F9DD29112E49BB6D5D1506C5A5A0238741AD "https://gitee.com/link?target=https%3A%2F%2Fcontentcenter-vali-drcn.dbankcdn.cn%2Fpvt_2%2FDeveloperAlliance_package_901_9%2F71%2Fv3%2FA3thi3-kRTSeO4Jp0DSigA%2Fdevecostudio-mac-4.0.0.201.zip%3FHW-CC-KV%3DV1%26HW-CC-Date%3D20230613T085132Z%26HW-CC-Expire%3D315360000%26HW-CC-Sign%3DBA233FE054A7D07F4B1C3ED80C84F9DD29112E49BB6D5D1506C5A5A0238741AD"

[Mac(ARM)]https://link.juejin.cn?target=https%3A%2F%2Fgitee.com%2Flink%3Ftarget%3Dhttps%253A%252F%252Fcontentcenter-vali-drcn.dbankcdn.cn%252Fpvt_2%252FDeveloperAlliance_package_901_9%252Fed%252Fv3%252FIFYYMuT9SbCPCHZntvlrKQ%252Fdevecostudio-mac-arm-4.0.0.201.zip%253FHW-CC-KV%253DV1%2526HW-CC-Date%253D20230613T085231Z%2526HW-CC-Expire%253D315360000%2526HW-CC-Sign%253D8F98E23E393E3D0D104BDBF7F33684D36C48613303909E6D04D016DB0E7E8696 "https://gitee.com/link?target=https%3A%2F%2Fcontentcenter-vali-drcn.dbankcdn.cn%2Fpvt_2%2FDeveloperAlliance_package_901_9%2Fed%2Fv3%2FIFYYMuT9SbCPCHZntvlrKQ%2Fdevecostudio-mac-arm-4.0.0.201.zip%3FHW-CC-KV%3DV1%26HW-CC-Date%3D20230613T085231Z%26HW-CC-Expire%3D315360000%26HW-CC-Sign%3D8F98E23E393E3D0D104BDBF7F33684D36C48613303909E6D04D016DB0E7E8696"

ide 安装过程就简单

fc37600a8b963b2387ecd55bd1443e1a_720.jpg DevEco 安装完成后,首次进入需要设置 nodejs 与 ohpm。可以选择本机已经安装好的路径,若本机没有安装 nodejs 与 ohpm 也可以在这里下载安装。(这里借用了网友的图片哈尴尬) image.pngimage.png

image.png

安装 OpenHarmony SDK

38b06a8eb512f66a47f92d9e2c1aeace_720.jpgf3d4f76ef22c16f04d1833d7e84e7c04_720.jpg

安装 ArkUI-X SDK

38b06a8eb512f66a47f92d9e2c1aeace_720.jpg

49a638c76ae0b97f9bfdf00f5dff7d22_720.jpg

01b37256aa960f912146497407088b75_720.jpg

配置环境

3e2736aa378a54c54ba7bad478c947ba_720.jpg 这里提示我们没有配置ANDROID_HOME 因为这里跑iOS 后面我们再讲一下跑Androi的

创建 Harmon OS 工程

72b4e841518a523a0fbee9e3377e49fc_720.jpg

9fe309dee5fd0cd65e6c8a93113e8053_720.jpg

编译 OpenHarmony 工程

ba133e04bde5ad5ef55a8624a6e62ab2_720.jpg

选择app格式

3e860620552c81d66500e4c0f9e25f86_720.jpg

查看编译后生成的androidiOS native 工程

6ab7722ba0222a750f43c6cfc47a7c4f_720.jpg

找到磁盘上的iOS 工程 导入xcode

05e69b8a29d3d20969c54b8431242b96_720.jpg

需要把这里改成iOS 13.0 最新版的mac os 系统

1139f0c991a4e2d673f9800f641b0f2e_720.jpg

运行

4f397b5ed5511f51d6cd05ec2fb8fd36_720.jpg

如图

f293d9a85f6006ad198a9daff00022f8_720.jpg
查看包里面内容 在 LibChecker 中也可以看到该 APP 使用了 ArkUI 的依赖:(这个是Android方便查看哈 iOS同理)
image.png

HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿

搜狗高速浏览器截图20240326151450.png

最后总结

鸿蒙的 ArkUi-X其实之前朋友就有提到过 一直没有去尝试,国庆放长假期回来我觉得有必要分享给大家,在这里我也希望鸿蒙能够崛起 这样也可以给我们开发者创造出更多的岗位 至于这个语言arkts 算是ts超集, 前端的同学比较容易上手跟flutter也比较像 学起来也没什么难度。ArkTS + ArkUI-X ,让国产自研技术达到了一个新高度,完成了从零到一的迈步,让自研不再是 PPT ,不再是“套壳”。

审核编辑 黄宇

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

    关注

    0

    文章

    404

    浏览量

    18317
  • 鸿蒙
    +关注

    关注

    60

    文章

    2858

    浏览量

    45354
收藏 人收藏
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

    评论

    相关推荐
    热点推荐

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

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

    鸿蒙ArkUI-X平台开发:【SDK目录结构介绍】

    本文档配套ArkUI-X,将OpenHarmony ArkUI开发框架扩展到不同的OS平台,比如Android和iOS平台,让开发者基于
    的头像 发表于 05-20 16:28 1620次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平台</b>开发:【SDK目录结构介绍】

    ArkUI-X平台框架接入指南

    ArkUI平台框架(ArkUI-X)进一步将ArkUI开发
    发表于 05-18 18:21

    ArkUI-X框架LogInterface使用指南

    ArkUI-X框架的LogInterface拦截日志。 Android平台创建ArkUI-X框架
    发表于 06-15 23:20

    ArkUI-X平台应用改造指南

    工作量大幅增加,开发成本也随之上升,而且很难保持一致的交互体验。 ArkUI-X 平台框架是基于 HarmonyOS 打造的
    发表于 06-16 23:05

    ArkUI-X平台技术落地-华为运动健康(一)

    开发工作量以及保证体验一致性,对于运动健康App而言,显得尤为重要。作为鸿蒙NEXT系统生态中的重要一员,ArkUI-X框架是我们平台技术
    发表于 06-18 22:53

    ArkUI-X平台技术落地-华为运动健康(二)

    率(目前代码复用率为74.3%,提升研发效率30%),并且用户体验追平原生native页面的体验效果。后续规划,运动健康应用内部更多高频使用的页面和模块(如单次运动模块、运动记录页面等)也会逐渐迁移到ArkUI-X平台
    发表于 06-18 23:04

    ArkUI-X应用工程结构说明

    )并可以部署到相应的OS平台,降低平台应用开发成本。 应用工程目录结构介绍 平台应用
    发表于 06-19 23:11

    ArkUI-X案例解析

    实现的,应首先符合ArkUI-X框架的规格要求. 在应用UI方面存在的差异,是无法借助Bridge能力来弥补的。在此建议使用ArkUI-X框架中已经适配完毕的组件,这些组件功能相对稳定
    发表于 06-23 22:40

    资讯速递 | ArkUI-X 预览版已正式开源!

    OpenHarmony项目群技术指导委员会(以下简称“TSC”)-平台应用开发框架TSG所孵化项目 —— ArkUI-X,近期已正式开源 ,开发者基于一套主代码,就可以将在OpenH
    发表于 08-11 16:10

    鸿蒙ArkUI-X平台技术:【开发准备】

    本文档适用于ArkUI平台应用开发的初学者。通过开发环境搭建、应用工程创建、编译和运行,熟悉ArkUI
    的头像 发表于 05-24 10:40 1409次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平台</b>技术:【开发准备】

    鸿蒙ArkUI-X平台技术:【开发初体验】

    在DevEco Studio中导入ArkUI-X Sample,快速创建平台工程
    的头像 发表于 05-17 15:54 1714次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平台</b>技术:【开发初体验】

    鸿蒙ArkUI-X平台开发:【 应用工程结构说明】

    本文档配套ArkUI-X,将OpenHarmony ArkUI开发框架扩展到不同的OS平台,比如Android和iOS平台,让开发者基于
    的头像 发表于 05-19 21:05 1252次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b><b class='flag-5'>平台</b>开发:【 应用<b class='flag-5'>工程</b>结构说明】

    鸿蒙ArkUI-X语言调用说明:平台差异化【Android、ios动态化】

    ArkUI-X支持动态化,使用者可以根据自己需要动态发布平台内容,从而使平台部分和宿主应用进行解耦。
    的头像 发表于 05-23 14:38 1846次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>跨</b>语言调用说明:<b class='flag-5'>平台</b>差异化【Android、ios动态化】

    鸿蒙ArkUI-X框架开发:【开发准备】

    本文档适用于ArkUI-X框架开发的初学者。通过环境搭建、代码下载、代码编译、API扩展和使用,快速了解平台项目开发流程。
    的头像 发表于 05-23 21:02 1108次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI-X</b><b class='flag-5'>框架</b>开发:【开发准备】