Hippy Cross Platform Framework

Homepage

💡 Introduction

Hippy is a cross-platform development framework, that aims to help developers write once, and run on multiple platforms(iOS, Android, ohos, Web, and so on). Hippy is quite friendly to Web developers, especially those who are familiar with React or Vue. With Hippy, developers can create the cross-platform app easily.

Hippy is now applied in Tencent major apps such as Mobile QQ, Mobile QQ Browser, Tencent Video App, QQ Music App, and Tencent News, reaching hundreds of millions of ordinary users.

🔨 Getting started

Preparing environment

Install latest DevEco Studio.

Integrate hippy

1. Integrate hippy.har

ohpm i hippy@latest

2. Initialization code

• Get libhippy.so and UIAbility context.

  TypeScriptCopy

  import libHippy from 'libhippy.so'
  AppStorage.setOrCreate("libHippy", libHippy)
  AppStorage.setOrCreate("abilityContext", this.context)
  AppStorage.setOrCreate("mainWindow", mainWindow)
  

• Create HippyEngine、init HippyEngine、and load js bundle.

  TypeScriptCopy

  this.hippyEngine = createHippyEngine(params)
  this.hippyEngine.initEngine()
  this.hippyEngine?.loadModule()
  

• Build HippyRoot component.

  TypeScriptCopy

  HippyRoot({
      hippyEngine: this.hippyEngine,
      rootViewWrapper: this.rootViewWrapper,
      onRenderException: (exception: HippyException) => {
        this.exception = `${exception.message}\n${exception.stack}`
      },
  })
  

3. Release code

 hippyEngine?.destroyModule(rootId, () => {
   hippyEngine?.destroyEngine();
 });

More details for ohos SDK integration.

📁 Documentation

To check out hippy examples and visit framework.tds.qq.com.