FlexUI Cross Platform Framework

Homepage

💡 Introduction

FlexUI 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). FlexUI is quite friendly to Web developers, especially those who are familiar with React or Vue. With FlexUI, developers can create the cross-platform app easily.

FlexUI is now applied in various organizations major apps such as Mobile QQ, Mobile QQ Browser, video apps, QQ Music App, and news apps, reaching hundreds of millions of ordinary users.

🔨 Getting started

Preparing environment

Install latest DevEco Studio.

Integrate flexui

1. Integrate flexui.har

ohpm i @flexui/engine@latest

2. Initialization code

• Get libflexui.so and UIAbility context.

  import libFlexUI from 'libflexui.so'
  AppStorage.setOrCreate("libFlexUI", libFlexUI)
  AppStorage.setOrCreate("abilityContext", this.context)
  AppStorage.setOrCreate("mainWindow", mainWindow)
  

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

  this.flexuiEngine = createFlexUIEngine(params)
  this.flexuiEngine.initEngine()
  this.flexuiEngine?.loadModule()
  

• Build FlexUIRoot component.

  FlexUIRoot({
      flexuiEngine: this.flexuiEngine,
      rootViewWrapper: this.rootViewWrapper,
      onRenderException: (exception: FlexUIException) => {
        this.exception = `${exception.message}\n${exception.stack}`
      },
  })
  

3. Release code

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

More details for ohos SDK integration.

📁 Documentation

To check out flexui examples and visit flexui.dev.

📄 License

This package is distributed under the Apache License, Version 2.0. It contains portions derived from Tencent Hippy, and the component framework bundled in flexui_jsfwk.js is derived from glass-easel (MIT License). See NOTICE for the copyright notices that must be retained when redistributing this package or a work based on it.