Node.jsWeex 环境搭建(win7)

安装 Node.js

  1. node.js需要4.0+
  2. 百度云下载地址http://pan.baidu.com/s/1o84g6c6
  3. 官网下载地址https://nodejs.org/en/
  4. 安装教程请看那里node.js安装图解

安装 weex-toolkit

安装好node.js后,打开CMD工具以往设置weex-toolkit,那是weex的集成环境。

npm install -g weex-toolkit

Node.js 1

有了weex-toolkit就可以运用weex命令了

本身利用的版本是如图,那么些恐怕变动的迅猛
Node.js 2

先看一下weex命令
Node.js 3

Usage: weex foo/bar/we_file_or_dir_path  [options]
Usage: weex debug [options] [we_file|bundles_dir]
Usage: weex init

Options:
  --qr          display QR code for PlaygroundApp                      [boolean]

  --smallqr     display small-scale version of QR code for PlaygroundApp,try it
                if you use default font in CLI                         [boolean]

  -o, --output  transform weex we file to JS Bundle, output path must specified
                (single JS bundle file or dir)
                [for create sub cmd]it specified we file output path
                                                 [default: "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 will be transforme to JS

                bundle on the server , specify local root path using the option
                                                                        [string]

  --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                                              [default: "127.0.0.1"]


weex debug -h for Weex debug help information.

for cmd example & more information please visit
https://www.npmjs.com/package/weex-toolkit

假如你只是想调节和测试某些we文件,那么执行weex
xxx.we即能够运作在该地浏览器中,当然假诺实施

weex test.we --qr -h

–qr
正是显示本地地址文件的二维码,安装playground后既能够扫描二维码看到we文件的页面。
-h 是热更新,当然只对浏览器有效

开始化项目hello weex

先创立一个app文件夹,作者是以此目录D:\webxm\nodejs\weex-test

然后选取cmd进入weex-text这么些目录,只怕在那一个目录直接打开cmd(按住shift键同时点击鼠标右键选用【在这里打开命令窗口】)

推行如下命令

Node.js 4

按下回车键出现如下音讯

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.

紧接着安装依赖

npm install

方今我们创设了三个目录,然后还要在那里初始化了2个weex-test项目。

目录结构图

Node.js 5

src-代码目录
index-浏览器运维页面
webpack.config.js-webpack的配置文件
观测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 specified\" && exit 1"
  },

改成如下(8080端口足以随便改)

{
"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"
},

现在摸索运维这一个类型

npm run dev

Node.js 6
于今浏览器访问一下localhost:8080会产出如下界面

Node.js 7

好了,未来我们早就运维起来了这么些类型。

另一种运转方式

先进入src工作目录,运转对应的we文件,命令如下

weex xxx.we

自个儿启动的文本是以此

Node.js 8

您系统暗中认可浏览器的窗口将自行打开并且展现Hello Weex!

传送门:weex
真机调节和测试2维码