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)的更多相关文章
- weex 环境搭建
最近为了项目需要(实际上是为了年底KPI),领导要求用3天时间,学习并使用weex开发一个页面,说实话,压力山大.在这之前压根儿就没听说过啊,一脸懵逼 无奈之余只能Google了,惊喜的发现weex的 ...
- win7下android开发环境搭建(win7 64位)
win7下android开发环境搭建(win7 64位) 一.安装 JDK 下载JDK最新版本,下载地址如下: http://www.oracle.com/technetwork/java/jav ...
- Android测试环境搭建(win7)
一.安装JDK并配置环境变量 1.在Java官方网站上下载相应系统的jdk文件安装,如win7 64 位系统下安装jdk-6u45-windows-x64,全部选择默认的安装路径即可安装完成. 2.配 ...
- OpenCV 环境搭建( Win7 32位 / VS2010 / OpenCV2.4.8 )
前言 本文介绍如何搭建 OpenCV 开发环境 配置如下: 操作系统:WIN7 32位 开发平台:VS2010 OpenCV 版本:2.4.8 第一步:安装 OpenCV 2.4.8 1. 登陆 Op ...
- Weex 环境搭建 (一)
1 安装Node.js 去Node.js 官网 https://nodejs.org/ 下载安装文件安装. 安装好后,根据如下命令检查是否安装正常. 在windows 环境下,开始-运行 ...
- adt-bundle环境搭建(Win7+Win10)
一.adt-bundle安装包 安装包的下载地址:http://tools.android-studio.org/index.php/adt-bundle-plugin 链接中包含有windows. ...
- weex环境搭建
1. 安装weex-toolkit sudo npm install -g weex-toolkit 装完之后就可以使用weex命令了.输入weex命令可以看到: weex test.we --qr ...
- cocos2dx 环境搭建 win7 +vs2012+ cocos2dx-2.1.4
转自:http://my.eoe.cn/swer03160828/archive/20067.html 1) 如果在win32 下面编写的cocos2dx 的代码其文件 .cpp,.h 的文件,基本上 ...
- 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 ...
随机推荐
- Android线程之AsyncTask
在之前的博客中为大家分享过关于Android多线程处理,想必大家对于Android为什么要使用多线程已经有了清晰的认识,我就在简单唠两句,Android规定UI界面的更新必须在在主线程进行,对于访问网 ...
- tomcat匹配Servlet的流程(原创)
- 学习RxJS:Cycle.js
原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么 Cycle.js 是一个极简的JavaScript框架( ...
- Responsive Web CSS – 在线响应式布局创建器
如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...
- ajax检查用户名是否存在
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.c ...
- Visual Studio远程调试监视器(MSVSMON.EXE)的32位版本不能用于调试64位进程或64位转储
在VS2013中调试Silverlight项目时,提示:无法附加.Visual Studio远程调试监视器(MSVSMON.EXE)的32位版本不能用于调试64位进程或64位转储.请改用64位版本. ...
- 分享本年度最佳的15个 Photoshop 实例教程
毫无疑问,Photoshop 是任何其类型的设计相关工作的最佳工具.有这么多东西,你可以用它来设计,发挥你的想象力,一切皆有可能. 现在,几乎所有的封面图像都会用 Photoshop 来修饰. 您可能 ...
- laravel吐槽系列之一
最近项目中经常使用到了laravel框架,对于这个框架之前只是弱弱地接触了一点,没有深入接触,这下有时间好好研究它了(主要是不得不研究了).说实话,laravel让我打开眼界了,之前对框架的使用一直停 ...
- Android开发中遇到的requestFeature() must be called before adding content异常
缘起 上一篇博文中讲到了几种实现全屏显示Activity内容的方法.然而实际在实现中发现了一些问题,在本篇博文中进行总结下.首先交代一下开发环境,本人使用的是Android Studio 1.5.1, ...
- c#设计模式之简单工厂
1.面向对象的3大属性,封装.继承.多态,以一个加单的计算机为例: 创建一个父类Operation 有两个属性 和一个计算方法(虚方法),便于子类重写: public class Operation ...