Before learning Weex, you need to build a local development environment. If you want to experience the charm of Weex, you can use the dotWe online running environment provided by Weex, the address is dotwe.org/vue.

Install dependencies

Weex provides scaffolding tools for WEEX-Toolkit to assist in development and commissioning. You need to install node. js and the Weex Cli environment first.

Installation Node. Js

There are several ways to install Node.js. The easiest way is to download the executable installation program from the Node.js website and install it directly. For Mac, you can also install Homebrew using the following command:

brew install node
Copy the code

After the installation is complete, you can use the following command to check whether the installation is successful.

$node -v v6.11.3 $NPM -v 3.10.10Copy the code

The NPM package management tool is usually installed after the Node.js package is installed. Therefore, you can use NPM to install weeX-Toolkit.

npm install -g weex-toolkit
Copy the code

To upgrade weeX-Toolkit, run the following command:

Weex update weex-devtool@latest //@ Latest indicates the latest versionCopy the code

If you are a domestic developer, you can also use the NPM image of Taobao to install WeeX-Toolkit. The installation commands are as follows:

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g weex-toolkit
Copy the code

After the installation is complete, run the WEEx command to verify the installation. If the installation is successful, the weex command line tool parameters are displayed, as shown in the following figure.

Install weexpack

Weexpack is a new generation of weeX engineering development kit, is based on weeX rapid prototyping tools. Weexpack can quickly help developers create WEEX projects and plug-ins on the cli, add weeX application templates for corresponding platforms, pack weeX applications, install them on mobile phones, create WEEX plug-in templates, and publish plug-ins to the WEEX application market. To install weexpack, run the following command:

npm install -g weexpack
Copy the code

Install Weektools

Weex-toolkit is a scaffolding command line tool that can be used to create, debug, and package weeX projects. Weex-toolkit does not support initialization of Vue projects until version 1.0.1, so be aware of the version of Weex-Toolki. The weeX-Toolkit installation commands are as follows:

npm install -g weex-toolkit
Copy the code

If you use the above command to install, use from https://registry.npmjs.org for installation source, for domestic users to had better choose from ali’s image to download, install needs to execute the following commands.

NPM install - g CNPM - registry=https://registry.npm.taobao.org / / taobao mirror NPM install - g weex - toolkitCopy the code

After the installation, run the weex -v or weex command to check whether the installation is successful.

Installing the Android Environment

To support the Android platform, you need to configure the Android development environment: Install the Java environment, Android Studio, and Android SDK. Before installing and compiling an Android project, ensure that the Android build-tool version is at least 23.0.2.

Installing the iOS Environment

To support the iOS platform, you need to configure the iOS development environment: Install Xcode, cocoaPods, and related environments. Xcode is an integrated development tool provided by Apple, which can be used to develop macOS and iOS applications. CocoaPods is a third-party open source library tool responsible for iOS project management. Using CocoaPods properly can improve program development efficiency.

Create a project

Next, use the create command provided by Weex to initialize a Weex project.

weex create weexdemo
Copy the code

After the preceding command is executed, a project created using the Weex or Vue template is created in the project weexdemo directory. The project directory structure is as follows:

├─ ios.config.json // Weex ├─ ios.config.json / / ios project configuration ├ ─ ─ package - lock. Json ├ ─ ─ package. The json / / project NPM package management ├ ─ ─ platforms / / platform template directory │ ├ ─ ─ ios / / ios native platform directory │ └ ─ ─ android / / the android native platform ├ ─ ─ the plugins / / plug-in download directory │ └ ─ ─ the README. Md ├ ─ ─ SRC / / business source directory │ └ ─ ─ index. We ├ ─ ─ the tools / / tools directory │ └ ─ ─ ├─ ├─ index.html ├─ webpack.config.js // Webpack module ├─ webpack.config.js // Web Platform directory │ ├─ index.html ├─ webpack.config.js // Webpack module ├─ webpack.config.js // Web Platform Directory │ ├─ index.html ├─ webpack.config.js // Webpack moduleCopy the code

However, the WEEX project created by using the create command does not contain the native iOS and Android project templates by default. If you need to add native project templates, you can switch to the appName directory and install dependencies. By default, the templates will be installed in the Platforms directory. The official templates support weeX bundle debugging and plug-in mechanisms by default. The installation command is as follows:

Weexpack platform add ios // Install the ios template. Weexpack platform add Android // Install the Android templateCopy the code

After template installation is complete, the following template directory is added to the project directory. The directory structure is as follows:

├── ├─ ios │ ├─ AndroidCopy the code

When hybrid development is needed, you can use the native development environment to open an Android or iOS project and develop native features.

Development and operation

When you use the create command to create a WEEX project, weeX-Toolkit has generated a standard project structure for you. In this case, open the initial Weex project and navigate to/SRC /index.vue, which is the default Weex home page. The code looks like this

<template>
  <div class="wrapper">
    <image :src="logo" class="logo" />
    <text class="greeting">The environment is ready! </text> <HelloWorld/> </div> </template> <script> import HelloWorld from'./components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data () {
    return {
      logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
    }
  }
}
</script>

Copy the code

Before running the WEEx project, run the NPM install command to install dependencies of the project. You can view dependencies related to the project in the package.json file. Then, use the command “NPM run dev & NPM run serve” in the root directory of the project to start the Watch mode and the static server. Open a browser, simply enter “http://localhost:8081/index.html” to start a preview page, use the qr code is generated by Weex provide playground app scan can be seen in the mobile phone page rendering on mobile phones, as shown in the figure below.

If you need to run the project on an emulator or a real machine, you can use the following command to start the application and start the server service before running the client command.

Weex Run ios // Running on ios devices Weex Run Android // Running on Android devicesCopy the code

Note that before running the startup command, ensure that the native operating environment required by Android and iOS is correctly configured, and start the emulator or connect to a mobile device before running the startup command.

After executing the startup command, if no error occurs during project compilation, the system will ask the user to select an installed device at runtime, as shown in the following figure.

If there are no errors, you should see something like the following.