Weex introduction

Weex is a set of easy-to-use cross-platform development solutions, which can build high-performance and extensible native applications based on web development experience. It comes from Ali team.

Weex installation

Prerequisites: The Node environment must be installed before Weex installation

Checking the Node environment

[yunxi@localhost yunxi]$node -v v7.3.0 [yunxi@localhost yunxi]$NPM -v 3.10.10Copy the code

Npm install weex

NPM is a JavaScript package management tool that makes it easy for developers to share and reuse code.

[yunxi@localhost yunxi ]$ npm install -g week-toolkit
Copy the code

Domestic developers can consider using TAOBAO’s NPM image CNPM to install WEEX-Toolkit

[yunxi@localhost yunxi ]$ sudo npm install -g cnpm
[yunxi@localhost yunxi ]$ sudo cnpm install -g weex-toolkit

Copy the code

After the installation is complete, you can run the WEEx command to verify the installation. The weex command line tool parameters are displayed:

[yunxi@localhost yunxi ]$ weex

Copy the code

Weex opens the HelloWorld

The sample program

With the above installation working, create our sample hello.we file; The content of the document is as follows:

<template>
   <div>
     <text class="text" style="color: #FF0000;">Hello world</text>
   </div>
</template>

<style>
   .text{
     font-size: 50;
   }
</style>

<script></script>
Copy the code

Description:

Compile operation

[yunxi@localhost yunxi ]$ weex hello.we
info Sat Jan 07 2017 17:27:24 GMT+0800 (CST)WebSocket  is listening on port 8082
info Sat Jan 07 2017 17:27:24 GMT+0800 (CST)http  is listening on port 8081
Copy the code

Execution result: We will see the successful execution page in the browser page, showing a red “Hello World “effect.

Terminal preview

Playground App(Weex-project. IO /download.ht…) , we add — QR parameter after the command to generate the QR code.

[yunxi@localhost yunxi ]$ weex hello.we --qr

Copy the code

After executing the above commands, a TWO-DIMENSIONAL code will be generated on the console, which can be scanned by Playground App on the mobile end to see the effect.

Development and debugging

[yunxi@localhost yunxi ]$ weex debug hello.we
Copy the code

Create a project

[yunxi@localhost yunxi ]$ mkdir wuyu-platform-weex
[yunxi@localhost yunxi ]$ cd wuyu-platform-weex
[yunxi@localhost wuyu-platform-weex ]$ weex init
prompt: Project Name:  (wuyu-platform-weex)
file: .gitignore created.
file: README.md created.
file: index.html created.
file: package.json created.
file: src/weex-bootstrap.we created.
file: webpack.config.js created.

Copy the code

We created a project called Wuyu-platform-weex. Next perform the project dependency package installation and compile and run.

[yunxi@localhost wuyu-platform-weex ]$ npm install
[yunxi@localhost wuyu-platform-weex ]$ npm run dev
[yunxi@localhost wuyu-platform-weex ]$ npm run serve
Copy the code

Weex development kit Weexpack

Weexpack is a new generation of Weex engineering development kit, it allows developers to create Weex projects through simple commands, the project will run on different development platforms.

Weexpack installation

Weexpack installation use the command NPM install Weexpack -g or CNPM install Weexpack -g, here we use Taobao image.

[yunxi@localhost yunxi ]$ sudo cnpm install weexpack -g
Copy the code

Weexpack initialization project

We create a project wuyu-weex, using the weexpack init project name will automatically create a folder named after the project name and initialize the project.

[yunxi@localhost yunxi ]$ weexpack init wuyu-weex
=> Initialize a new Weex app (wuyu-weex)
Copy the code

Enter the project installation dependency

[yunxi@localhost yunxi ]$ cd wuyu-weex
[yunxi@localhost wuyu-weex ]$ npm install
Copy the code

Weexpack initialization project description

Tree structure shows directory structure, author in the Mac environment. Run the following command to display the tree directory structure

[yunxi@localhost wuyu-weex ]$ find . -print | sed -e 's; [^ /] * /. | _____; g; s; ____ |; |; g'
Copy the code

The following structure of Weexpack initialization looks like this:

- > / wuyu - weex. | -. Gitignore | -- README. Md | -- package. Json | -- android. Config. The json | -- ios. Config. The json | - Webpack. Config. Js | - / SRC | | -- index. We | - / HTML 5 | | - index. The HTML | - / ios | | - / playground | | - / SDK | | - / WXDevtool | - / android | | - / playground | | - / appframeworkCopy the code

Directory structure description:

  • Webpack.config. js is the Webpack configuration file used to generate JSBunlde for.we files
  • Ios.config. json is the ios project configuration file
  • Android.config. json is the Android project configuration file
  • The/SRC directory houses the Weex page
  • / HTML5 is an H5 side entry file
  • /ios places ios projects
  • / Android Places Android projects

Engineering operation and packaging

If everything works fine, you’re ready to run with a Weexpack package or emulator.

The Android platform

Packaging and building on Android are one thing

[yunxi@localhost wuyu-weex ]$ weexpack run android
Copy the code
The Ios platform

Ios run under

[yunxi@localhost wuyu-weex ]$ weexpack run ios
Copy the code

Under the Ios packaging

[yunxi@localhost wuyu-weex ]$ weexpack build ios
Copy the code