试用编译鸿蒙应用的功能

[Chen-jj]

Taro 对鸿蒙的适配工作正在开发中，目前可以通过拉取 feat/harmony 分支的代码并编译后进行使用。

1. 下载 Taro 源码并编译

# 下载源码
$ git clone git@github.com:NervJS/taro.git
$ git checkout feat/harmony

# 安装依赖
$ yarn

# 编译
$ yarn build

# yarn link
$ cd packages/taro-harmony
$ yarn link
$ cd ../taro-mini-runner
$ yarn link
$ cd ../postcss-pxtransform
$ yarn link

2. 安装 @tarojs/cli@beta，创建 Taro 项目，建立软链

安装 @tarojs/cli beta 版本

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli@beta

# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli@beta

# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli@beta

创建 Taro 项目，建立软链

taro init myApp
cd myApp
yarn link @tarojs/plugin-platform-harmony
yarn link @tarojs/mini-runner
yarn link postcss-pxtransform

# OR
yarn link @tarojs/plugin-platform-harmony @tarojs/mini-runner postcss-pxtransform

3. 编译配置

// config/index.js
config = {
  // 配置使用插件
  plugins: ['@tarojs/plugin-platform-harmony'],
  mini: {
    // 如果使用开发者工具的预览器（previewer）进行预览的话，需要使用 development 版本的 react-reconciler。
    // 因为 previewer 对长串的压缩文本解析有问题。（真机/远程真机没有此问题）
    debugReact: true,
    // 如果需要真机断点调试，需要关闭 sourcemap 的生成
    enableSourceMap: false
  },
  // harmony 相关配置
  harmony: {
    // 【必填】鸿蒙应用的绝对路径
    projectPath: path.resolve(process.cwd(), '../MyApplication'),
    // 【可选】HAP 的名称，默认为 'entry'
    hapName: 'entry',
    // 【可选】JS FA 的名称，默认为 'default'
    jsFAName: 'default'
  }
}

4. 鸿蒙项目配置

鸿蒙配置文件的详细文档：配置文件的元素

4.1 配置路由

假设有鸿蒙项目 MyApplication，如果需要配置路由，可以修改 MyApplication/entry/src/main/config.json 的 modules.js 配置。

4.2 关闭系统自带的顶部导航栏

修改 MyApplication/entry/src/main/config.json 的 modules 配置，增加以下内容：

"metaData": {
  "customizeData":[
    {
      "name": "hwc-theme",
      "value": "androidhwext:style/Theme.Emui.NoTitleBar"
    }
  ]
}

5. 编译

taro build --type harmony --watch

6. 运行

6.1 创建一个鸿蒙 JS 项目，如 MyApplication

华为开发者工具：https://developer.harmonyos.com/cn/develop/deveco-studio
鸿蒙开发文档：https://developer.harmonyos.com/cn/documentation

6.2 使用鸿蒙开发者工具的 previewer、真机、远程真机进行预览

previewer文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252

[jiaozitang]

创建一个鸿蒙 JS 项目

5.1 创建一个鸿蒙 JS 项目，如 MyApplication

创建可参考文章：初窥鸿蒙

[jiaozitang]

taro build --type harmonyos --watch

需注意这是全局 taro 的打包方式，应检查是否和新建 taro 应用的 taro 版本一致。

[codering]

这个目前有啥进展吗？我这源码构建（yarn build）出错了，体验成本有点高啊。

     L27:    })
     L28:    onChange: EventEmitter

[ WARN  ]  Build Warn: ./src/components/textarea/textarea.tsx:27:6
           The event name conflicts with the "input" native DOM event name.

     L26:      eventName: 'input'
     L27:    }) onInput: EventEmitter

[14:08.5]  build finished in 95.13 s

lerna info run Ran npm script 'build' in '@tarojs/service' in 18.6s:
$ run-s clean prod
$ rimraf dist
$ tsc
lerna info run Ran npm script 'build' in '@tarojs/rn-transformer' in 43.4s:
$ tsc
lerna info run Ran npm script 'build' in '@tarojs/rn-supporter' in 9.4s:
$ tsc
lerna ERR! yarn run build exited 1 in '@tarojs/router'
lerna ERR! yarn run build stdout:
$ rollup -c rollup.config.js
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run build stderr:

/Users/zhao/workplace/github/taro/packages/taro-router/src/index.ts → dist/index.js...
[!] (plugin rpt2) Error: /Users/zhao/workplace/github/taro/packages/taro-router/src/router.ts(49,7): semantic error TS2722: Cannot invoke an object which is possibly 'undefined'.
src/router.ts
Error: /Users/zhao/workplace/github/taro/packages/taro-router/src/router.ts(49,7): semantic error TS2722: Cannot invoke an object which is possibly 'undefined'.
    at error (/Users/zhao/workplace/github/taro/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at throwPluginError (/Users/zhao/workplace/github/taro/node_modules/rollup/dist/shared/node-entry.js:11878:12)
    at Object.error (/Users/zhao/workplace/github/taro/node_modules/rollup/dist/shared/node-entry.js:12912:24)
    at Object.error (/Users/zhao/workplace/github/taro/node_modules/rollup/dist/shared/node-entry.js:12081:38)
    at RollupContext.error (/Users/zhao/workplace/github/taro/node_modules/rollup-plugin-typescript2/src/rollupcontext.ts:37:18)
    at /Users/zhao/workplace/github/taro/node_modules/rollup-plugin-typescript2/src/print-diagnostics.ts:41:11
    at arrayEach (/Users/zhao/workplace/github/taro/node_modules/rollup-plugin-typescript2/node_modules/lodash/lodash.js:516:11)
    at _.each (/Users/zhao/workplace/github/taro/node_modules/rollup-plugin-typescript2/node_modules/lodash/lodash.js:9342:14)
    at printDiagnostics (/Users/zhao/workplace/github/taro/node_modules/rollup-plugin-typescript2/src/print-diagnostics.ts:9:2)
    at Object.transform (/Users/zhao/workplace/github/taro/node_modules/rollup-plugin-typescript2/src/index.ts:234:5)

error Command failed with exit code 1.

lerna ERR! yarn run build exited 1 in '@tarojs/router'
lerna WARN complete Waiting for 4 child processes to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜  taro git:(feat/HarmonyOS) ✗

[Chen-jj]

基于 v3.4 对 harmony 插件进行了比较多改动，现在的 harmony 分支为 feat/harmony，上述文档也有改动。

[chuckchen314]

有计划啥时候release吗？

[chuckchen314]

这边说的鸿蒙应用是指HarmonyOS还是OpenHarmony的应用。目前在HarmonyOS应用开发运行OK，但是在OpenHarmony上运行不起来，定位到问题在vendor.js中，具体的还在定位中。
请问这个有谁遇到了？

[Chen-jj]

两者都是使用 DevEco Studio 开发吧，目前 previewer、远程真机是可以的。

OH 真机如果不行，目测是没有更新到 API6.