本文详细讲解如何搭建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加固宝进行签名
操作步骤可看加固宝教程
签名完后的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
…