Weex 环境搭建(win7)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Weex 环境搭建(win7)相关的知识,希望对你有一定的参考价值。
安装 Node.js
- node.js需要4.0+
- 百度云下载地址http://pan.baidu.com/s/1o84g6c6
- 官网下载地址https://nodejs.org/en/
- 安装教程请看这里node.js安装图解
安装 weex-toolkit
安装好node.js后,打开CMD工具现在安装weex-toolkit,这是weex的集成环境。
npm install -g weex-toolkit
有了weex-toolkit就可以使用weex命令了
我使用的版本是如图,这个可能变化的很快
先看一下weex命令
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键同时点击鼠标右键选择【在此处打开命令窗口】)
执行如下命令
按下回车键出现如下信息
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
现在我们创建了一个目录,然后并且在这里初始化了一个weex-test项目。
目录结构图
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
现在浏览器访问一下localhost:8080会出现如下界面
好了,现在我们已经启动起来了这个项目。
另一种启动方式
先进入src工作目录,运行对应的we文件,命令如下
weex xxx.we
我运行的文件是这个
你系统默认浏览器的窗口将自动打开并且显示Hello Weex!
传送门:weex 真机调试二维码
以上是关于Weex 环境搭建(win7)的主要内容,如果未能解决你的问题,请参考以下文章