Taro 3.5 canary released: support adaptation to Hongmeng&&OpenHarmony

Author of this article: JD Hongmeng Co-construction Team-Jiang Shangze, JJ

1. Background

Hongmeng, as a self-researched and developed operating system that can realize the interconnection of everything, has received a lot of attention once it was launched, and it has been placed high hopes by the Chinese. And Hongmeng did not disappoint. After Harmony 2.0 was officially launched this year for users to upgrade, it achieved 120 million installed capacity in just three months, and at the recent Huawei Developer Conference, Huawei announced Harmony 2 .0 installed capacity has exceeded 150 million.

Many application vendors have gradually introduced adapted Hongmeng applications. Taro is an open cross-terminal and cross-framework solution. Many developers look forward to porting the capabilities of small programs to Hongmeng OS. You can use Taro to develop Hongmeng && OpenHarmony applications. .

Hongmeng's Ark development framework provides Web-like paradigm programming, supports the use of JS to develop the UI layer, and its syntax is similar to that of small programs. After preliminary research, Taro's existing architecture can be used to adapt to Hongmeng

In June of this year, we created a new proposal to support Hongmeng, hoping to achieve three major 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 natively developed small programs into Taro applications, and then adapt to the Hongmeng platform.

At present, Taro and OpenHarmony have established an official cooperative relationship, and were invited to establish the cross-platform front-end framework interest group (SIG-CROSS-PLATFORM-UI) . At the same time, Taro maintains internal communication and sharing with Huawei Hongmeng &&OpenHarmay, and Taro has a huge amount of Developers and excellent cases can effectively complement the ecosystem of Huawei Hongmeng &&OpenHarmay.

2. Implementation details

Hongmeng's JS UI syntax is similar to that of small programs, but after all, the underlying principles of the two are different, and there are inevitably many differences. Next, I will briefly introduce the main differences between Hongmeng and Mini Programs, and how Taro handles these differences.

1. The similarities and differences between Hongmeng and Mini Programs

1.1 Project organization

app.js ’s project organization is similar to that of small programs, with entry files 061b2d0d230dd4, pages, and custom components.

The pages and custom components are composed of three types of files:

• .hml used to describe the layout structure. Compared with the template file of the applet, there are a few differences in grammar and support capabilities.
• .css used to describe the page style.
• .js used to process the interaction between the page and the user, and ES6 syntax is supported by default.

1.2 Configuration file

Unlike the entry file, page file, and custom component specified by the applet, there is only one configuration file for Hongmeng JS UI.

's 161b2d0d230e72 routing is the same configuration type as the applet, and needs to be configured in the JS UI configuration file.

1.3 Style

In terms of CSS, Hongmeng has many limitations like RN. For example, the box model is not supported, and each component only supports some CSS properties.

1.4 Components & API

Hongmeng provides a series of feature-rich components, which are slightly different in naming and functions compared with the components of the applet.

The API is also the same. The API sets of the two are partially overlapped, and there are differences in usage and functions.

2. Compatibility details

2.1 What can Taro solve?

Taro adapts Hongmeng to try to smooth out the differences as much as possible, but as a framework, it is destined to have problems that it can and cannot solve.

Syntax differences can be dealt with by writing a runtime framework; use Hongmeng's components and APIs to implement the components and APIs of the WeChat applet specification as much as possible to smooth out the differences in use between the two.

However, differences in CSS, components and API capabilities depend on the underlying implementation of Hongmeng, which cannot be solved by Taro.

2.2 Hongmeng plug-in

Taro's compatibility work in @tarojs/plugin-platform-harmony mainly completed by the 061b2d0d230f35 plug-in. Developers can compile the Hongmeng application by introducing the plug-in. It mainly does these adaptation tasks:

a) Template

<template> who are familiar with Taro should be aware that Taro uses the recursion of the 061b2d0d230f5b tag on the small terminal to render the dynamic DOM tree of the page. There is no <template> , so we use custom components for recursion.

b) Runtime

The runtime is mainly compatible with the life cycle of the applet and the data update method setData .

c) Components & API

We use Hongmeng's native syntax to encapsulate component libraries and API libraries that comply with WeChat applet specifications. While compatible with the attributes of the WeChat applet, it also retains the unique support attributes of Hongmeng.

At present, 29 components and 16 types of API are adapted. Component sample library can refer to: taro-components-sample

3. Architecture diagram

3. How to use

If you are a new project, upgrade Taro and choose Hongmeng template;

The old project needs to be manually configured as follows:

1. Upgrade Taro to v3.5.0-canary.0

First, you need to install the CLI tool of v3.5.0-canary.0

npm i -g @tarojs/cli@canary

Then update the local Taro dependencies of the project: modify the version of the Taro dependencies in package.json ~3.5.0-canary.0 , and then reinstall the dependencies.

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

2. Install taro to adapt the Hongmeng plug-in

(1) Install the @tarojs/plugin-platform-harmony

$ yarn add --dev @tarojs/plugin-platform-harmony

(2) Add compilation configuration in 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'
  }
}

3. Prepare Hongmeng operating environment

To develop Hongmeng software, you need HUAWEI DevEco Studio, which provides services such as template creation, development, compilation, debugging, and release.

Mainly include the following:

(1) Register a developer account

(2) Download the DevEco Studio installation package

(3) Start DevEco Studio and download the HarmonyOS SDK according to the tool guide

(4) Create a new MyApplication JS project

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

"A " 161b2d0d2311f0 161b2d0d2311f1 "Huawei Developer Tools" "Hongmeng Development Document"

4. Project Operation

Run command

$ taro build —type harmony —watch

If you set the path of packaged output to Hongmeng project in step 2(2), you can view the application effect of Taro to Hongmeng.

testHarmony is your JS project created by DevEco Studio.

Four, finally

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

At the same time, we also hope that more developers in the community will participate in the joint construction. Whether it is raising Issues, posting on forums, submitting PR, or helping to build the surrounding ecology, it is a valuable asset for us. Let us work together to build Taro. powerful.

The Taro team sincerely thanks everyone for supporting us along the way. It is precisely because of everyone's expectations and trust that we are urged to move towards better.

Finally, this version done by the obscurity of adaptation Jingdong within obscurity to build a team together, to thank the following students: @AdvancedCat , @jiaozitang , @ huozhongyi123 , @ Troy-SXJ , @JSZabc , @crazyonebyone , @evernoteHW , @soulhat , @xueshuai , @LuMeiling

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!

Welcome to follow the Bump Lab blog: aotu.io

Or follow the AOTULabs official account (AOTULabs) and push articles from time to time.