DOCSEARCHbyAlgolia
Submit Docs

Weex - Mobile Cross-platform UI Framework

repository·master·Indexed 29 days ago

https://github.com/alibaba/weex

A framework for building cross-platform mobile user interfaces for Android, iOS, Web, and OpenHarmony. It provides a JavaScript orchestration layer to enable web-standard APIs within native runtimes and supports integration with frameworks like Vue or Rax.

Tokens
84.2K
Snippets
34
Records
656
Agent score
97%

What's inside weex

  2. Locate OpenHarmony (OHOS) Weex resources and examples

    master

    The ohos directory contains the following key components for OpenHarmony development:

    • Advanced API Extension Package: AdvancedAPI_OHOS
    • Web Advanced API Extension Package: web_api_ohos
    • OpenHarmony Integration Module: web_scenekit_hsp
    • OpenHarmony Extension Plugin Package: weex-openharmony
    • HarmonyOS Migration Guides: Located in the docs directory within the ohos folder.
    • Example Projects:
      • ohos/example/ohos-example: DevEco Studio project.
      • ohos/example/weex-example: Weex OpenHarmony project.
    • Test Cases:
      • ohos/Test/commonTest: Weex test case project.

  3. Understand the Weex HarmonyOS Loader mechanism

    master

    The Weex HarmonyOS Loader is a build-time tool (typically a Webpack/Babel plugin) that transforms Vue templates and scripts to enable HarmonyOS compatibility. It performs three main tasks:

    1. Attribute & Event Parsing: It scans Vue templates for specific attributes and events (e.g., @touchstart, :show-scrollbar). It extracts the handler names, parameters, and modifiers (like .stop or .prevent).
    2. Class ID Injection: For elements with tracked attributes or events, the loader injects a unique class name following the pattern weex-harmony-register-[moduleHash]-[id]. This allows the runtime to map native events back to the correct DOM elements.
    3. Script Transformation: It uses Babel to modify the component's JavaScript. It injects an import for weex_harmongy_registerGesture and automatically injects the registration logic into the mounted lifecycle hook to ensure events are registered when the component enters the DOM.

  4. Implement partial refreshes for Weex pages

    master

    After successful preloading, use history.pushState to achieve partial page refreshes when navigating with parameters. In the Weex project, you must implement a listener for the pushState event.

    Typically, this involves extracting parameters from the routerUrl using UrlUtil.getUrlParams(routerUrl) and then executing a JavaScript command via the Web controller to trigger a reload with the new parameters.

    // Example of partial refresh implementation
let params = UrlUtil.getUrlParams(routerUrl);
webManagerInstance.getWebController(webId)?.runJavaScript(`reloadUrl("${params}")`);

if (WebManager.getInstance().isPreloadFinish(routerUrl)) {
  PageModelController.getInstance().loading(false);
}

  5. Run the Weex Playground App on iOS

    master

    To run the Weex Playground App on an iOS device or simulator:

    1. Ensure CocoaPods is installed on your system.
    2. Open a terminal, navigate to the ios directory, and execute pod install to install dependencies.
    3. Open the WeexDemo.xcworkspace file using Xcode.
    4. Click the Run button in Xcode.

  6. Scaffold a Weex project using weex-toolkit

    master

    To start a new project using the Webpack template, install the weex-toolkit globally and use the weex create command. This will scaffold a project structure suitable for large-scale applications using weex-loader and Webpack.

    $ npm install -g weex-toolkit
$ weex create my-project # default will create the webpack template
$ cd my-project && npm start

  7. Build the legacy Weex Android SDK for backward compatibility

    master

    If you are an existing user and need to maintain compatibility with the old com.taobao.weex package name, you can build the weex_sdk_legacy version.

    Warning: weex_sdk_legacy is provided for backward compatibility only and will not be maintained. You should migrate to weex_sdk as soon as possible.

    ./gradlew clean assembleRelease -PapachePackageName="false"

  8. Register a custom loader for .vue files in Webpack

    master

    To support HarmonyOS adaptation, you may need to use a custom loader (e.g., transform-loader.js) to parse .vue files. When configuring Webpack, ensure your custom loader is placed at the end of the use array so that it executes after other loaders like vue-loader.

    Example configuration for webpack.common.conf.js:

    module.exports = {
  module: {
    rules: [
      {
        test: /\.vue(\?[^?]+)?$/,
        use: [
          {
            loader: 'vue-loader',
            options: {
              postcss: [require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })],
              compilerOptions: {
                modules: [
                  {
                    postTransformNode: el => {
                      require('weex-vue-precompiler')()(el)
                    }
                  }
                ]
              }
            }
          },
          {
            loader: path.resolve(__dirname, 'transform-loader.js'),
          }
        ],
      },
    ]
  },
};

  9. Configure Android Studio Build Variants for Weex

    master

    You can switch between the modern and legacy package structures within Android Studio using the Build Variants window (accessible via SHIFT + Enter -> Build Variants).

    • To use files under org.apache.weex: Select apacheRelease in the Active Build Variants dropdown.
    • To use files under com.taobao.weex: Select legacyRelease or release in the Active Build Variants dropdown.

  10. Run Apache-Rat to verify release files

    master

    Apache-Rat can be used to verify that release files comply with license requirements. To run it against the Weex project, you must first download the Apache Rat binary (version 0.12 is tested) and decompress it. Then, execute the Ant build command pointing to the project's Rat configuration and the downloaded Rat JAR file.

    For specific rule definitions, refer to scripts/rat-ant-build.xml in the repository.

    ant -buildfile scripts/rat-ant-build.xml -lib path_to_the_folder_you_place_rat/apache-rat-0.12.jar