Weex

Get started quickly

Built-in components

The <text> component is unique to Weex and is a block-level text container that can be used to render text.
Text can only be placed in <text> tags, otherwise it will be ignored.
In the <style> tag, you can write CSS to describe the style of a component. It should be noted that these styles can only be applied to the current component in Weex. (mandatory scoped).

native components

Weex uses the Widget (application extension) provided by the native system to render. Although Weex emphasizes consistency across platforms, we still accept the behavior and UI differences of the platforms themselves. For example the switch component looks different on Android and iOS (the appearance on the web side simulates iOS).
Weex also allows you to extend more native components, but you need to implement them on each platform and keep their behavior consistent. The most practical approach is to integrate existing native components into the Weex platform.

Native modules, built-in modules

For those functions that do not depend on the UI, Weex recommends wrapping them into modules and then importing them using weex.requireModule('xxx') . This is a way to use javascript to call native functionality such as networking, storage, clipboard and page navigation. For example, calling the ajax request module

Write once, run everywhere

Support for developing features for specific platforms. Weex provides weex.config.env and WXEnvironment (which are the same) to get the current runtime environment. You can use WXEnvironment.platform to determine which platform the code runs on. In addition to platform, WXEnvironment also contains other environment information, such as osVersion and deviceModel, refer to Weex variable for more details.

Support for multiple front-end frameworks

Both Vue.js and Rax are already integrated into the Weex SDK, so you don't need to import them.
You can integrate your favorite front-end framework into Weex. Need to know a lot of low level details about the communication between js-native and the native rendering engine.

Create an App

The command-line tool weex-toolkit can be used to quickly create an empty project, initialize iOS and Android development environments, debug, install plugins, and more. Only supports creating Vue.js projects

initialization

npm install weex-toolkit -g

Use the weex create command to create an empty template project:

weex create awesome-app

There is an empty Weex + Vue.js project in the awesome-app folder of the current directory.

develop

npm install
npm start

The tool will start a local web service listening on port 8081. You can open http://localhost:8081 to see how the page renders under the Web.
The source code is in the src/ directory and you can develop it like a normal Vue.js project.

compile and run

By default the weex create command does not initialize iOS and Android projects, you can add platform-specific projects by executing weex platform add.

weex platform add ios
weex platform add android