本文详细讲解如何搭建 weex 开发环境
一、前端必备 node.js + webpack 部分(weex-toolkit 自带 webpack，可不装 webpack)
1、安装 node.js（现在的 node 一般都会集成 npm,管理 node 依赖包用的）
windos 系统推荐 win7 64 位或者 win10 64 位
下载地址http://nodejs.cn/download/
选择你需要安装的版本（windows ，mac，linux 3 种系统的版本），
下载你需要的版本（推荐用 node8.7.0 或者 8.9.0 64 位版本）如果是 8.9 的话能同时满足 egg.js 的使用条件，win7 win10 64 位系统下实测可用，太新的可能会导致 weex-toolkit 安装失败），
点击安装包，下一步，下一步，安装完成即可。
提示：注意确认系统是否自动添加了环境变量路径
如果没有，可自己添加系统环境变量路径或者用户环境变量 npm 一般在用户环境变量，node 在系统环境
Path：C:\Users\Administrator\AppData\Roaming\npm;C:\Program Files\nodejs
执行 cmd 查看 node 和 npm 版本号
node -v
npm -v
安装 npm 淘宝镜像（非必须）
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装后可用 cnpm 代替 npm 运行命令行，一般在安装依赖包出现下载失败的时候用
2、安装 webpack（对 weex 来说非必须，weex-toolkit 自带 webpack，可不装 webpack 直接略过）
//全局安装（推荐 webpack3）
npm install -g webpack@3
//或者
安装到你的项目目录
首先切换 cd 到你的项目目录
如 cd myworkplace
//myworkplace 为你创建的文件夹名字
然后
npm install --save-dev webpack@3
二、weex 部分
1、安装 weex toolkit
一般全局安装
npm install -g weex-toolkit
验证是否安装成功
weex -v
如果失败则卸载重新安装试试
卸载命令
npm uninstall -g weex-toolkit 或 npm remove -g weex-toolkit
2、安装 java jdk（打包安卓必备）
现在 java 安装包，网上的安装包都是国外的，很难下载下来
可用这个链接下载，http://www.wmzhe.com/soft-301...
现在完成之后直接全部下一步，不要动配置，然后配置环境变量（具体操作可参考结尾备注网址）
用户变量
变量名：JAVA_HOME，值：C:\Program Files\Java\jdk1.8.0_131
系统变量
变量名：path，值：%JAVA_HOME%\bin;
变量名：CLASSPATH，值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
cmd 测试是否安装成功
输入 javac 回车
3、安装 android studio（打包安卓必备）
环境配置（具体操作可参考结尾备注网址）
安装好之后，配置环境变量
注意安装过程中，要记录下你的 sdk 安装路径，因为配置系统变量要用到 sdk 下面的 platform-tools 和 tools 的路径
用户变量
变量名：ANDROID_HOME 变量值： D:\Android\sdk 就是你的sdk路径
系统变量
变量名：path 变量值：;D:\Android\sdk\platform-tools; D:\Android\sdk\tools; 就是你的sdk路径
注意
配置完成之后，打开 android studio 进入 sdk manager
之后切换到 sdk tools 选中下载 android sdk build-tools 中的23.0.2这个版本
cmd 测试是否安装成功
输入 adb 回车
4、创建 app 项目
打开命令行 cmd
切换到要创建项目的目录
生成目录文件
weex create my-firstapp
提示：由于生成 app 项目的时候有提示是否安装 vue-router（vue 路由）的提示，如果需要的话可以直接打 y 安装，其他选项一般用默认就可以了
切换到项目根目录
cd my-firstapp
安装项目
npm install
添加安卓工程
weex platform add android
打包运行安卓工程
weex run android
运行以上命令，不出意外的话，已经将官方 demo 打包成 apk 了
apk 的位置在
my-firstapp\platforms\android\app\build\outputs\apk
如果想运行 web 端工程的话可用以下命令
weex run web
小提示
如果上面的步骤存在提示，说找不到 android 设备，请把手机用 usb 插在电脑上，然后开启 usb 调试功能即可
5、安卓 app 数字证书签名
打包出来的安卓 app 还需要进行签名才能安装在手机上，否则会出错
推荐下载 360 加固宝进行签名
操作步骤可看加固宝教程
签名完后的 app 就可以直接运行在手机上面了
6、使用 android studio 运行 app（可选的打包预览方式，测试过不支持 amd cpu，推荐用安卓模拟器打包预览）
如果开发过程中每次像上面那样打包再安装是很麻烦，可以使用 android studio 的虚拟机
将你的 weex 项目导入到 android studio 中
将 my-firstapp\platforms\android\app 将这个文件夹导入到 android studio 中来，
途中 android studio 控制台可能会报错，双击错误，等待安装，完事儿了
然后点击 AVD manager，选中一个设备，如果没有话先去机器人图标那边去添加个设备，然后回来，点击执行按钮，就可以打开虚拟机了
7、针对 amd cpu 的电脑可采用安卓模拟器如网易 mumu 打包预览（推荐的打包预览方式）
下载并安装网易 mumu 安卓模拟器http://mumu.163.com/
开启 mumu 右下角系统应用里面的设置里把 usb 调试打开
连接到 mumu 端口
cmd 命令行
adb connect 127.0.0.1:7555
运行预览安卓项目
切换到项目根目录
cd my-firstapp
如果没安卓工程可先添加安卓工程
weex platform add android
打包运行安卓工程
weex run android
成功的话安卓项目就会运行在 mumu 模拟器上了
三、weex 开发调试部分
1、添加 weex debug（调试套件）
用于调试 app 用
cd 到工程目录下（app 目录的上一级）
weex debug
2、添加 vuex（即 vue 状态管理，非必须，vue 状态管理一般配合 vue-router 即 vue 路由用）
切换 cd 到项目 app 根目录
cd my-firstapp
安装
npm install vuex --save
3.安装 weex-ui（非必须，前端开发一般配合 ui 更佳）
切换 cd 到项目 app 根目录
cd my-firstapp
安装
npm i weex-ui@latest -S
4.安装 mockjs（非必须，前端开发模拟获取后端数据用）
切换 cd 到项目 app 根目录
cd my-firstapp
安装
npm i [email protected] -S
四、备注
1、node.js、npm 为初始必备条件,一般安装完 node.js 会自带 npm
2、实用 npm 命令
（1）、查询当前装了多少 node 包
npm ls --depth 0 当前项目
npm ls -g --depth 0 全局
（2）检测更新依赖包（不推荐使用，会增加很多新的包，npm-check、npm-check-updates 本身就是包）
检测升级所有
npm install -g npm-check
npm install -g npm-check-updates
检测升级当前项目
npm install npm-check
npm install npm-check-updates
3、其他具体安装步骤和使用技巧可参考
https://blog.csdn.net/k491022...
https://blog.csdn.net/k491022...
http://weex.apache.org/cn/too...
https://www.jianshu.com/p/464...
4、这个最佳实践是安卓的实践,ios 大同小异
...
添加 ios 工程
weex platform add ios
打包运行 ios 工程
weex run ios
...
本文由mdnice多平台发布