鸿蒙开发和调试 ArkUI 步骤 #14766
Replies: 6 comments 16 replies
-
构建鸿蒙应用后,在ide里面运行 提示找不到对应的npm包 Cannot find module '@tarojs/runtime' or its corresponding type declarations. |
Beta Was this translation helpful? Give feedback.
-
使用的是@tarojs/[email protected],devEco build阶段没问题,仅previewer报错,我们暂时还没有测试机 |
Beta Was this translation helpful? Give feedback.
-
ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/image.ets:28:17 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/image.ets:28:17 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/button.ets:17:20 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/icon.ets:63:17 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/icon.ets:63:17 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/video.ets:91:16 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:152:24 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:152:27 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:164:24 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:164:27 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:171:54 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:193:27 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:194:21 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:195:21 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:196:21 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:197:21 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:209:24 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/slider.ets:93:46 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/button.ets:110:4 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/checkbox.ets:52:14 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/checkbox.ets:128:10 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/checkbox.ets:137:10 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/form.ets:17:6 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/form.ets:30:6 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/icon.ets:56:6 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/image.ets:27:6 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/input.ets:73:8 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/label.ets:43:6 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/label.ets:62:6 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:149:14 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:161:14 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:190:14 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/picker.ets:206:14 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/radio.ets:56:14 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/radio.ets:131:10 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/radio.ets:140:10 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/richText.ets:16:6 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/scrollView.ets:87:10 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/scrollView.ets:100:10 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/slider.ets:65:8 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/style.ets:13:36 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/swiper.ets:48:4 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/switch.ets:46:10 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/text.ets:58:6 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/textArea.ets:53:10 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/video.ets:84:6 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/view.ets:37:6 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/view.ets:51:6 ERROR: ArkTS:ERROR File: D:/DevEcoStudioProjects/Demo/entry/src/main/ets/npm/@tarojs/components/webview.ets:20:6 COMPILE RESULT:FAIL {ERROR:50}
|
Beta Was this translation helpful? Give feedback.
-
用的是Build Version: 4.0.3.700 这个版本呢 |
Beta Was this translation helpful? Give feedback.
-
flex wrap 不支持了么 |
Beta Was this translation helpful? Give feedback.
-
@xuanzebin 有计划支持元服务吗,目前在鸿蒙api12上测试会提示部分属性和方法不支持元服务,希望taro4.0也能支持和兼容元服务 |
Beta Was this translation helpful? Give feedback.
-
背景
Taro 目前正在适配最新的 HarmonyOS Stage 应用模型,基于最新的 API 10 进行组件和 API 的适配。
Taro 源码项目分支:feat/v3.7-ets
框架支持:目前仅支持使用
react
来进行开发,后续待组件和 API 逐渐完善后再考虑支持 Vue 等其他框架。Taro 适配鸿蒙时 Taro 源码主要相关的 packge 的文件结构和作用
taro-platform-harmony
index.ts
Taro 鸿蒙适配平台的入口文件。
src/apis
Taro 以小程序 API 为基准,针对 OpenHarmony API 10 进行的适配。目前所有的 API 都存放在此,新建和修改 API 则只需关注此文件夹即可。
src/components
Taro 以小程序组件为基准的,利用 ArkTS 提供的自定义组件实现的一套组件 UI,包含常见的 View、Image、Text 等 UI 组件的实现。
src/program
Taro 针对鸿蒙平台提供的平台基类,用于编译的启动、配置修改等功能。
src/runtime-ets
Taro 针对鸿蒙平台实现的一套新的运行时方案,里面包含了在鸿蒙环境里可以跑通的 DOM、BOM 对象的实现。
src/runtime-framework
Taro 针对 React、Solid 等框架实现的与鸿蒙系统的桥接。
taro-vite-runner
index.harmony.ts
Taro 鸿蒙平台编译器入口文件。
src/harmony/postcss
Taro 针对鸿蒙项目样式文件的处理。
src/harmony/asset.ts
Taro 针对鸿蒙项目依赖、图片和字体等资源的处理。
src/harmony/babel.ts
Taro 针对鸿蒙项目 ts 和 js 文件的转义处理。
src/harmony/config.ts
Taro 针对鸿蒙项目 VIte 编译配置生成。
src/harmony/emit.ts
Taro 针对鸿蒙项目编译产物抛出。
src/harmony/entry.ts
Taro 针对鸿蒙项目入口文件处理。
src/harmony/ets.ts
Taro 针对运行时生成的 ets 文件处理。
src/harmony/page.ts
Taro 针对鸿蒙项目的页面文件处理。
src/harmony/style.ts
调用
src/harmony/postcss
中的逻辑,样式处理插件的入口。开发和调试步骤
1. 申请成为华为合作伙伴,获得下载和使用 OpenHarmony 开发套件的白名单
(1)登录 HarmonysOS 应用开发门户,点击右上角注册按钮,注册开发者帐号。
(2)进入 HUAWEI DevEco Studio 套件货架中心,申请白名单,由于目前最新版本的 OpenHarmony SDK 和 IDE 仍未对外开发,因此个人开发者若想尝鲜,需要先申请白名单成为合作伙伴后才能继续进行下面的步骤。
(3)白名单申请通过后,进入货架,下载 IDE 版本为 DevEco Studio 4.0.3.600 的 DevEcoStudio4.0-API10 开发套件。
(4)下载完成后,打开 IDE 安装包进行安装,安装成功后启动 DevEco Studio,根据引导解压套件里附带的 SDK 压缩包,并根据引导在 IDE 中配置好 SDK 的使用路径。
(5)SDK 配置成功后,看到设置面板中各个 SDK 的版本号与下面的图片中相同,则标识配置成功了。
2. 创建一个用于开发和调试的 Harmony 项目和 Taro 项目
(1)创建 Harmony 项目
(a)创建新项目,选择需要开发的设备,然后
Mode
选择Stage
模型,Compile SDK
选择4.0.0(API 10)
,按照引导操作后一个新的项目就被创建出来了。(b)关注目录
entry/src/main/ets/pages/Index.ets
下面的文件,熟悉文件结构。pages
目录下为页面入口,新建项目的页面目录会包含若干个.ets
文件,应用级配置信息位于build-profile.json5
,当前的模块信息 、编译信息配置项位于entry/build-profile.json5
。项目结构详情。(c) 创建好项目后,根据配置插件指引,将下载的套件附带的插件配置在项目配置中。
(d) 修改项目的权限配置,根据项目需要在鸿蒙主项目
entry/src/main/module.json5
中所需要使用到的机器权限。(2)创建 Taro 项目
(a)若没有 Taro 脚手架,则需要提前安装一个最新版本的 Taro 脚手架
(b)使用命令
taro init
创建一个新的 Taro 项目,这里称这个项目为 Taro-Harmony-Demo,创建时需要注意,框架只能选择使用react
的默认模板。(c)将 Taro 项目中与 Taro 相关的、依赖版本和 Taro 脚手架版本相等的依赖筛选出来,将这些依赖的版本号调整至
3.7.0-alpha.25
,重新安装依赖。3. 拉取 Taro 最新源代码,并切换至鸿蒙开发分支
feat/v3.7-ets
(1) 拉取 Taro 仓库源代码并安装依赖
(2)切换到鸿蒙开发分支,安装依赖并构建项目文件
4. link 相关的 Taro package,并设置 Taro 项目 config 配置
(1)进入 Taro 源码仓库,到
packages/taro-platform-harmony
、packages/taro-vite-runner
、packages/taro-service
、packages/taro-react
和packages/taro-plugin-react
这五个 package 中执行yarn link
,再回到步骤 2 创建的 Taro 项目中,将这 5 个 package link 上去。(2)之后进入到创建的 Taro-Harmony-Demo 项目中,调整 config/index.ts 的编译配置项
(3)设置 script 命令
5. 编译 Taro-Harmony-Demo 项目,运行和调试鸿蒙应用
(1)在 Taro-Harmony-Demo 项目根目录下执行
yarn dev:harmony
,执行 Taro 项目在鸿蒙平台下的编译,编译后的文件会根据上一步的 projectPath 来进行输出。(2)进入我们在步骤 2 中创建的鸿蒙项目,可以发现 Taro 编译的文件已经打到了该项目下,此时连接鸿蒙测试真机(需要联系华为的同事进行提供),即可在 IDE 进行对应的运行和调试 Debug。
以上就是开发和调试 Taro 适配鸿蒙 Stage 模型应用的流程和步骤,欢迎有共建想法的同学参与进来,并提交相关的 pr 和讨论~😆
Beta Was this translation helpful? Give feedback.
All reactions