Weex is dedicated to enabling developers to build Android, iOS and Web applications based on common cross-platform Web development languages and development experience. In short, with the WeexSDK integrated, you can use the JavaScript language and front-end development experience to develop mobile applications.

The Weex rendering engine is separate from the DSL syntax layer and Weex is not strongly dependent on any particular front-end framework. At present, vue. js and Rax, these two front-end frameworks are widely used in Weex page development, and Weex also provides the most complete support for these two front-end frameworks.

Weex’s other main goal is to follow popular Web development technologies and combine them with native development technologies to achieve a high degree of unity in development efficiency and operational performance. In the development phase, a Weex page is just like a normal web page; At runtime, Weex pages take full advantage of native components and capabilities of various operating systems

OSX environment

$sudo chmod -r 777 /usr/local/lib/node_modules/ $NPM I -g weex -Toolkit // Do not use sudo run $weex -v // Check the current WEEX tool versionCopy the code

Windows environment

$NPM I -g weex -Toolkit $WEEx -v // View the current WEEX tool versionCopy the code

The first WEEX-V will prompt NPM source selection, it is recommended to choose Taobao mirror, the reason we all know, WEEX Ali produced, big factory endorsement, is a product.

Weex Playground scan code installation

Weex Native runtime instance & Weex file preview tool

Initialize the project

Then initialize the Weex project:

$ weex create awesome-project
Copy the code

Select relevant options

// Add CD project NPM start to the related directoryCopy the code

Start the local Web service and open it in Chrom on the local PC. The browser previews the rendering effect as follows:

Compile and run

By default, the WEEx create command does not initialize iOS and Android projects. You can run the Weex platform add command to add projects for a specific platform.

weex platform add ios
weex platform add android
Copy the code

The installation process may take some time due to different network environments. If the installation fails, ensure that the network is normal.

In order to be able to open Android and iOS projects on your local machine, you should configure the client development environment. For iOS, you should have Xcode installed and configured

. For Android, you should have Android Studio installed and configured

. When the development environment is ready, run the following command to launch the application on an emulator or a real device:

weex run ios
weex run android
weex run web
Copy the code

The Android end preview

Let’s start by opening our Android Studio and launching AVD. Copy the dist/index.js file contents in our project into app/ Assets /dist/index.js in Android Studio.

After saving, click the ⚡ (lightning) symbol on the toolbar to update. You can preview the actual effect of the original. There is no automatic hot update like a browser.

debugging

Weex-toolkit also provides powerful debugging functions. You only need to perform:

weex debug
Copy the code

This command launches a debug service and opens the debug page in Chrome, which currently only supports v8-based desktop browsers. For details, see the weeX-Toolkit documentation.

This is taking a little longer

Different from normal Web development