Weex Environment Construction (WIN7)

Install node. js

1. Node. JS requires 4.0 +
2. Baidu Cloud Http://pan.baidu.com/s/1o84g6c6
3. Official website https://nodejs.org/en/
4. Installation tutorial See here node. JS Installation Diagram

Installing Weex-toolkit

After installing node. js, open the CMD tool now installs Weex-toolkit, which is the Weex integration environment.

NPM install-g Weex-toolkit

With Weex-toolkit, you can use the Weex command.

The version I'm using is that this may change quickly


Let's take a look at the Weex command.

Usage:weex Foo/bar/we_file_or_dir_path [Options]usage:weex Debug [Options] [We_file|bundles_dir]usage:weex init Optio NS:--QR display QR code for Playgroundapp [Boolean]--SMALLQR display small-scale ve   Rsion of QR code for Playgroundapp,try it if you use the default font in CLI [Boolean] -O,--output transform Weex we file to JS bundle, output path must specified (single JS bundle file or D IR) [for Create sub cmd]it specified we file output path [d                Efault: "No Jsbundle output"]--watch using with-o, watch input path, auto run transform if change Happen-s,--server start a HTTP file server, Weex. We file'll be transforme to JS bundle on the SE RVer, specify local root path using the option [St Ring]--port HTTP Listening port number, default is 8081 [default:-1]--wsport WebSocket listening port number, default is  8082 [Default:-1]--np do not open preview browser automatic [Boolean]-F,--force [for Create sub Cmd]force to replace exsisting file (s) [Boolean]-H,--host [de Fault: "127.0.0.1"] Weex debug-h for Weex debug help information. For CMD example & more information Visithttps://www.npmjs.com/package/weex-toolkit

If you just want to debug a we file, then the execution of Weex Xxx.we can be run in a local browser, of course, if you do

Weex test.we--qr-h

--QR is the display of the local address file of the QR code, after the installation of playground can both scan the QR code to see the page of the We file.
-H is a hot update, and of course only valid for browsers

Initialize Project Hello Weex

First set up an app folder, I am this directory D:\webxm\nodejs\weex-test

Then use CMD to enter the Weex-text directory, or open cmd directly in this directory (press and hold the SHIFT key and right-click to select "Open command Window Here")

Execute the following command

Press ENTER to see the following information

File:. Gitignore created.file:README.md created.file:index.html Created.file:package.json created.file:src/main.we Created.file:webpack.config.js created.

Then install the dependent

NPM Install

Now we have created a directory, and we have initialized a weex-test project here.

Directory structure diagram

src-Code Catalog
index-Browser Launch page
Configuration file for Webpack.config.js-webpack
Observe that there are four of these commands in Package.json.

{  "name": "Weex-test",  "version": "1.0.0",  "description": "",  "main": "Index.js",  "scripts": {    "Build": "Webpack",    "dev": "Webpack--watch", "    Serve": "Serve-p 8080",    "test": "Echo \" Error:no Test Specif Ied\ "&& exit 1"  },

Change to the following (8080 port can be changed casually)

{"Name": "Weex-test", "Version": "1.0.0", "description": "", "Main": "Index.js", "scripts": {"Build": "Webpack", "Dev": " Webpack & serve-p 8080 "," Test ":" Echo \ "Error:no test specified\" && exit 1 "},

Now try to start the project.

NPM Run Dev

Now the browser accesses the localhost:8080 will appear the following interface

Well, now that we've started up this project.

Another way to start

First enter the SRC working directory, run the corresponding we file, the command is as follows

Weex xxx.we

The file I'm running is this

The windows of your system default browser will automatically open and show Hello weex!

Portal:Weex real Machine debug QR code

Weex Environment Construction (WIN7)