weex 项目环境配置

向右看齐 2023-06-15 06:45 8阅读 0赞

首先需要的环境：

1：Node.js

2：Git

3：jdk

4：Android Studio

5：android 模拟器

详细过程：

首先下载安装Node 和Git，Git 下载完成之后就可以使用npm了，根据习惯可以转淘宝镜像，在终端做一个测试，确认是否安装成功

![20191120172450113.png][]

接下来安装jdk，我选择的是jdk8的版本，先下载安装jdk8，安装完成之后，找到jdk8的安装目录，在其下边找到bin目录，再配置环境变量，选择此电脑，点击右键，“属性” ->“高级系统设置”->“环境变量”

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg_size_16_color_FFFFFF_t_70][]

选中path，点击“编辑”，然后“新建”，将bin目录所在的路径（例如我的是：D:\\Program Files\\Java\\jdk1.8.0\_131\\bin）添加到path里，保存。

测试一下jdk是否安装成功，打开终端，输入adb

![20191120175923240.png][]

安装成功！下一步

安装android studio, 我的是Android Studio 3.0.1的版本（我个人选择的是先下载360，然后在360软件管家里面直接下载JDK 和 Android Studio，360会根据你电脑的系统推荐合适的版本），

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg_size_16_color_FFFFFF_t_70 1][]

点击Configure，选择SDK Manager，然后7.0以上的版本都勾上，OK，等待下载完成

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg_size_16_color_FFFFFF_t_70 2][]

等待的时间我们可以来配置一下环境变量，和上面配置JDK变量的方式一样，找到SDK的安装目录，找到tools 和 platform-tools两个文件夹，（我的是在C:\\Users\\GIGA\\AppData\\Local\\Android\\Sdk），在这个目录下，将C:\\Users\\GIGA\\AppData\\Local\\Android\\Sdk\\tools和C:\\Users\\GIGA\\AppData\\Local\\Android\\Sdk\\platform-tools 两个路径添加到环境变量的path里面，保存。

接下来

npm i -g weex-toolkit

创建一个weex 项目：

weex create myproject

npm i

npm start (这是运行到浏览器的命令)

如果想要运行到android 模拟器里面，则打开Android Studio , 选择AVD Manager, 选择“create virtual Device”, 根据需要下载一个模拟器，

![2019112018091138.png][]

下载完成，点击绿色三角形运行模拟器

![2019112018112614.png][]

依次执行（weex run android 这一步在打开模拟器之后再执行）

weex create myproject

npm i

weex platform add android

npm run bulid

weex run android

另：如果不选择android studio 内置的模拟器，也可以选择自己下载一个模拟器，我这里选择的是MuMu模拟器

先下载安装，安装好之后打开，在开发者工具里面打开usb 调试，再打开终端，输入

adb connect 127.0.0.1:7555

![20191120181647930.png][]

此时再运行weex run android

我在这里遇到一个问题

WARNING in configuration  
The 'mode' option has not been set, webpack will fallback to 'production' for thisvalue. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.  
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

然后解决办法是卸载当前的webpack4

npm uninstall webpack

安装webpack3

npm i webpack@3

就可以了！

![20191120181747798.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg_size_16_color_FFFFFF_t_70 3][]

success!!

[20191120172450113.png]: https://img-blog.csdnimg.cn/20191120172450113.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019112017353873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg==,size_16,color_FFFFFF,t_70
[20191120175923240.png]: https://img-blog.csdnimg.cn/20191120175923240.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019112017485569.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191120175042717.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg==,size_16,color_FFFFFF,t_70
[2019112018091138.png]: https://img-blog.csdnimg.cn/2019112018091138.png
[2019112018112614.png]: https://img-blog.csdnimg.cn/2019112018112614.png
[20191120181647930.png]: https://img-blog.csdnimg.cn/20191120181647930.png
[20191120181747798.png]: https://img-blog.csdnimg.cn/20191120181747798.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191120181811284.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmJ5Mg==,size_16,color_FFFFFF,t_70