weex搭建最佳实践

本文详细讲解如何搭建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-30118.html
现在完成之后直接全部下一步，不要动配置，然后配置环境变量（具体操作可参考结尾备注网址）

用户变量
变量名：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（打包安卓必备）

环境配置（具体操作可参考结尾备注网址）

下载地址，https://dl.google.com/dl/android/studio/install/2.3.3.0/android-studio-bundle-162.4069837-windows.exe

安装好之后，配置环境变量

注意安装过程中，要记录下你的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加固宝进行签名

http://jiagu.360.cn/

操作步骤可看加固宝教程

签名完后的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 mockjs@1.0.0 -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/k491022087/article/details/72988386

https://blog.csdn.net/k491022087/article/details/72934862

http://weex.apache.org/cn/tools/toolkit.html

https://www.jianshu.com/p/4643a8e43b79

4、这个最佳实践是安卓的实践,ios大同小异
…
添加ios工程
weex platform add ios
打包运行ios工程
weex run ios
…