The background,

As a self-developed operating system that can realize the interconnection of all things, Hongmeng has attracted great attention and been placed high hopes by Chinese people since its launch. Harmony2.0 was launched this year for users to upgrade, and reached 120 million installations in just three months. At the recent Huawei Developer Conference, Huawei announced that Harmony2.0 had reached 150 million installations.

Taro is an open cross-terminal and cross-framework solution. Many developers are looking forward to applying the ability of small programs to hongmon OS. You can use Taro to develop OpenHarmony applications.

The Ark development framework of Hongmeng provides web-like paradigm programming, supporting the use of JS to develop the UI layer, whose syntax is similar to small programs. After preliminary investigation, Taro’s existing architecture can be used to adapt to Hongmeng

In June this year, we launched a new proposal to support Hong Meng. We hope to achieve three goals:

  • Developers can use Taro to develop hongmeng applications.
  • Developers can adapt existing Taro applications to the Hongmeng platform.
  • Developers can use Taro’s reverse conversion tool to convert native applications into Taro applications and then adapt them to the Hong Meng platform.

Currently, Taro has established an official partnership with OpenHarmony and established a cross-platform UI interest group. At the same time, Taro maintains internal communication and sharing with Huawei. With a large number of developers and excellent cases, Taro can effectively complement the Ecosystem of Hong Meng.

Second, implementation details

Hongmeng JS UI syntax and small program similar, but after all, the underlying principle is not the same, there are inevitably many differences. The following will briefly explain the main differences between Hongmeng and Applet, and how Taro deals with these differences.

1. Similarities and differences between Hongmeng and small programs

1.1 Project Organization

Hongmeng project organization and small program similar, there are entry file app.js, pages, custom components.

Pages and custom components are composed of three types of files:

  • .hmlUsed to describe layout structure. Compared with the template files of small programs, the syntax and support capabilities are slightly different.
  • .cssUsed to describe the page style.
  • .jsIt handles page and user interactions and supports ES6 syntax by default.

1.2 Configuration Files

And the small program entry file, page file, custom components corresponding to a configuration file is not the same, hongmeng JS UI configuration file only one.

Hongmeng routing and applets are configuration, need to be configured in the JS UI configuration file.

1.3 style

CSS has the same limitations as RN. For example, the box model is not supported, and components support only some CSS attributes.

1.4 Components & apis

Hongmeng provides a series of functional components, compared with the components of small programs, named, function slightly different.

API is the same, the TWO API sets have some intersection, usage, function differences.

2. Compatibility details

2.1 What can Taro solve?

Taro Is committed to smoothing out differences as much as possible, but as a framework, there are bound to be problems it can and can’t solve.

Syntax differences can be addressed by writing a runtime framework; Use hongmeng components and apis to achieve as much as possible the components and apis of wechat applet specification, so as to smooth out the differences between the two.

However, CSS differences, component and API capabilities differences, etc. depend on the underlying implementation, Taro cannot solve.

2.2 Hongmeng plug-in

Taro’s compatibility with Hongmon is mainly accomplished by the @tarojs/ plugin-platform-Harmony plugin, which can be compiled into Hongmon applications by developers. It mainly does these adaptations:

A) template

Those familiar with Taro should know that they use the

B) the runtime

The runtime is mainly compatible with the life cycle of small program and data update method setData in hongmeng terminal.

C) Components & apis

We use hongmeng’s native syntax to encapsulate the component library and API library conforming to the micro channel small program specification. While compatible with the attributes of wechat small program, it also retains the unique support attributes of Hongmeng.

Currently, 29 components and 16 apis have been adapted. See taro-component-sample for a sample library of components

3. The architecture diagram

Three, use method

If you are a new project, upgrade Taro to select Hongmeng template;

The old project needs to be manually configured as follows:

1. Upgrade Taro to V3.5.0-Canary.0

You need to install the CLI tool for V3.5.0-Canary.0 first

npm i -g @tarojs/cli@canary
Copy the code

Modify the Taro dependencies in package.json file to ~3.5.0-canary.0, and reinstall the dependencies.

If the installation fails or the project fails to open, you can delete node_modules, yarn.lock, and package-lock.json, install dependencies again, and try again.

2. Install taro Adapter Hongmeng plug-in

(1) Install @tarojs/ plugin-platform-Harmony in the Taro project

$ yarn add --dev @tarojs/plugin-platform-harmony
Copy the code

(2) Add the compile configuration in config/index.js


config = {
  // Configure using plug-ins
  plugins: ['@tarojs/plugin-platform-harmony'].mini: {
    // The Development version of the React-Reconciler is needed for a preview using the Developer Tools Previewer.
    // Because PreViewer has problems parsing long strings of compressed text. (Real/remote real does not have this problem)
    debugReact: true.// If real breakpoint debugging is required, sourcemAP generation needs to be turned off
    enableSourceMap: false
  },
  // harmony configuration
  harmony: {
    // [required] The absolute path of the application
    projectPath: path.resolve(process.cwd(), '.. /MyApplication'),
    // [optional] HAP name, default to 'entry'
    hapName: 'entry'.// [Optional] JS FA name, default is 'default'
    jsFAName: 'default'}}Copy the code

3. Prepare the Hongmeng operating environment

The development of Hongmeng software requires HUAWEI DevEco Studio, which provides template creation, development, compilation, debugging, release and other services.

It mainly includes the following contents:

(1) Register a developer account

(2) Download DevEco Studio installation package

(3) Start DevEco Studio and download the HarmonyOS SDK as guided by the tools

(4) Create MyApplication JS project

(5) Use the preview or real machine to view the application effect

First Glimpse of Hongmeng, Huawei Developer Tools, Hongmeng Development Document

4. Project operation

Run the command

$taro build -- Type Harmony -- WatchCopy the code

If you have set the package output path to Hongmeng project in Step 2(2), you can view the application effect of Taro for Hongmeng.

TestHarmony creates JS projects for you through DevEco Studio.

Four, the last

Next, we will continue to improve the adaptation of Hongmeng, and the official v3.5 version is expected to be released in 2022 Q1.

At the same time, we also hope that more developers in the community can participate in the construction of Taro. Whether it is to raise Issues, post on the forum, submit PR or help build the surrounding ecology, it is a valuable asset for us. Let’s build Taro stronger together.

The Taro team would like to thank all of you for your support along the way. It is because of your expectation and trust that we are urged to go better.

Finally, if you have any questions, you can scan the qr code below to add our Harmony assistant for feedback, thank you for your support!