安装 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. Android线程之AsyncTask

    在之前的博客中为大家分享过关于Android多线程处理,想必大家对于Android为什么要使用多线程已经有了清晰的认识,我就在简单唠两句,Android规定UI界面的更新必须在在主线程进行,对于访问网 ...

  2. tomcat匹配Servlet的流程(原创)

  3. 学习RxJS:Cycle.js

    原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么 Cycle.js 是一个极简的JavaScript框架( ...

  4. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  5. ajax检查用户名是否存在

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c ...

  6. Visual Studio远程调试监视器(MSVSMON.EXE)的32位版本不能用于调试64位进程或64位转储

    在VS2013中调试Silverlight项目时,提示:无法附加.Visual Studio远程调试监视器(MSVSMON.EXE)的32位版本不能用于调试64位进程或64位转储.请改用64位版本. ...

  7. 分享本年度最佳的15个 Photoshop 实例教程

    毫无疑问,Photoshop 是任何其类型的设计相关工作的最佳工具.有这么多东西,你可以用它来设计,发挥你的想象力,一切皆有可能. 现在,几乎所有的封面图像都会用 Photoshop 来修饰. 您可能 ...

  8. laravel吐槽系列之一

    最近项目中经常使用到了laravel框架,对于这个框架之前只是弱弱地接触了一点,没有深入接触,这下有时间好好研究它了(主要是不得不研究了).说实话,laravel让我打开眼界了,之前对框架的使用一直停 ...

  9. Android开发中遇到的requestFeature() must be called before adding content异常

    缘起 上一篇博文中讲到了几种实现全屏显示Activity内容的方法.然而实际在实现中发现了一些问题,在本篇博文中进行总结下.首先交代一下开发环境,本人使用的是Android Studio 1.5.1, ...

  10. c#设计模式之简单工厂

    1.面向对象的3大属性,封装.继承.多态,以一个加单的计算机为例: 创建一个父类Operation 有两个属性 和一个计算方法(虚方法),便于子类重写: public class Operation ...