安装 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

有了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)的更多相关文章

  1. weex 环境搭建

    最近为了项目需要(实际上是为了年底KPI),领导要求用3天时间,学习并使用weex开发一个页面,说实话,压力山大.在这之前压根儿就没听说过啊,一脸懵逼 无奈之余只能Google了,惊喜的发现weex的 ...

  2. win7下android开发环境搭建(win7 64位)

    win7下android开发环境搭建(win7 64位)   一.安装 JDK 下载JDK最新版本,下载地址如下: http://www.oracle.com/technetwork/java/jav ...

  3. Android测试环境搭建(win7)

    一.安装JDK并配置环境变量 1.在Java官方网站上下载相应系统的jdk文件安装,如win7 64 位系统下安装jdk-6u45-windows-x64,全部选择默认的安装路径即可安装完成. 2.配 ...

  4. OpenCV 环境搭建( Win7 32位 / VS2010 / OpenCV2.4.8 )

    前言 本文介绍如何搭建 OpenCV 开发环境 配置如下: 操作系统:WIN7 32位 开发平台:VS2010 OpenCV 版本:2.4.8 第一步:安装 OpenCV 2.4.8 1. 登陆 Op ...

  5. Weex 环境搭建 (一)

    1  安装Node.js 去Node.js 官网  https://nodejs.org/      下载安装文件安装. 安装好后,根据如下命令检查是否安装正常. 在windows 环境下,开始-运行 ...

  6. adt-bundle环境搭建(Win7+Win10)

    一.adt-bundle安装包 安装包的下载地址:http://tools.android-studio.org/index.php/adt-bundle-plugin  链接中包含有windows. ...

  7. weex环境搭建

    1. 安装weex-toolkit sudo npm install -g weex-toolkit 装完之后就可以使用weex命令了.输入weex命令可以看到: weex test.we --qr ...

  8. cocos2dx 环境搭建 win7 +vs2012+ cocos2dx-2.1.4

    转自:http://my.eoe.cn/swer03160828/archive/20067.html 1) 如果在win32 下面编写的cocos2dx 的代码其文件 .cpp,.h 的文件,基本上 ...

  9. PHP 环境搭建(win7+php5.6+apache或nginx)

    安装介质 PHP5.6.16(php-5.6.16-Win32-VC11-x64.zip) Apache2.4.18(httpd-2.4.18-win64-VC14.zip) nginx (nginx ...

随机推荐

  1. 【WP 8.1开发】手机客户端应用接收推送通知

    上一篇文章中,已经完成了用于发送通知的服务器端,接下来我们就用这个服务端来测试一下. 在开始测试之前,我们要做一个接收通知的WP应用. 1.启动VS Express for Windows,新建项目, ...

  2. windows下zookeeper伪集群搭建

    下载 http://www.apache.org/dyn/closer.cgi/zookeeper/ 解压 D:\Java\soft\zookeeper-3.4.6 伪集群 1.在 \zookeepe ...

  3. 深入理解PHP内核(十一)函数-函数的内部结构

    原文链接:http://www.orlion.ga/330/ php的函数包括用户定义的函数.内部函数(print_r count…).匿名函数.变量函数($func = 'print_r'; $fu ...

  4. Hadoop官方文档翻译—— YARN ResourceManager High Availability 2.7.3

    ResourceManager High Availability (RM高可用) Introduction(简介) Architecture(架构) RM Failover(RM 故障切换) Rec ...

  5. Datatables 在asp.net mvc中的使用

    前言 最近使用ABP(ASP.NET Boilerplate)做新项目,以前都是自己扩展一个HtmlHelper来完成同步/异步分页,但是有个地方一直不满意,排序太费劲. 以前接触过一点点的Datat ...

  6. Testing - Tips

    1 --- 冒烟测试.可用性测试和回归测试的区别? 在测试领域中,冒烟测试(smoke test).可用性测试(sanity test)和回归测试(regression test)彼此之间很相似,范围 ...

  7. 精选12个时尚的 CSS3 效果【附源码下载】

    这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...

  8. S Gallery – 很有特色的响应式 jQuery 相册插件

    S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...

  9. java线程(1)--概念基础

    参考:http://lavasoft.blog.51cto.com/62575/99150 http://blog.csdn.net/baby_newstar/article/details/6783 ...

  10. lucene 的评分机制

    lucene 的评分机制 elasticsearch是基于lucene的,所以他的评分机制也是基于lucene的.评分就是我们搜索的短语和索引中每篇文档的相关度打分. 如果没有干预评分算法的时候,每次 ...