fatelyh
2023/01/24阅读：9主题：默认主题
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（打包安卓必备）
环境配置（具体操作可参考结尾备注网址）
安装好之后，配置环境变量
注意安装过程中，要记录下你的 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 ...
作者介绍