好多人说ionic好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。
1.安装node
许多前端工具的安装都依赖于node的包管理器npm,Node官网: https://nodejs.org/
安装完成后在cmd中输入 npm -v
回车。
查看版本号如图:
查看版本号
2.安卓环境
PATH:%JAVA_HOME%\bin
CLASSPATH:.;%JAVA_HOME%\lib\tools.jar (一定不要忘了前面的点)
配置完成后,cmd中输入java -version 查看版本号。
3.安装安卓的SDK
D:\android-sdk\tools;
D:\android-sdk\platform-tools;
4. 安装ionic和cordova
命令行输入 `npm install -g cordova ionic`
安装示意图:
安装示意图
如果安装不了,可以试试国内镜像安装,首先安装cnpm,执行npm install -g cnpm --registry=https://registry.npm.taobao.org
命令安装。然后执行命令cnpm install -g cordova ionic
安装ionic和cordova
查看ionic版本 `ionic -v`
查看cordova版本 `cordova -v`
查看ionic版本
查看cordova版本
C:\Users\hello(此目录为本机名)\AppData\Roaming\npm\
目录。
注意AppData是隐藏文件,需要在文件夹选项里面把隐藏文件显示才可以看到(具体的怎么显示隐藏文件夹百度)。本地安装路径如图所示:
ionic 和 cordova默认安装路径
C:\Users\hello(此目录为本机名)\AppData\Roaming\npm\;
5. 使用ionic命令行创建新项目
? Integrate your new app with Cordova to target native iOS and Android? (y/N)
意思是是否要把 iOS 和Android集成到刚刚用Cordova 创建的app中 ,我这里选择y 表示确定。然后就会自动安装缺失的或者更新某些工具版本。? Install the free Ionic Pro SDK and connect your app?
我这里选择的y,表示确认。然后是输入密码
后面还有步骤,太麻烦了,我这里就不列举了,我已经放弃使用ionic创建安卓项目了,可以直接看下文。
6. 使用cordova创建安卓项目(建议直接跳过第5步,使用第6步)
cordova create 目录 报名 App名称
,然后回车。例如cordova create first_sample com.lzw.sample SampleApp
cordova platforms add android
,表示添加安卓支持。如果是要支持ios平台,可以输入cordova platforms add ios
。
如果是要支持web网页,可以输入cordova platforms add browser
。
如果不知道有哪些平台可以选择,可以使用命令 cordova platforms list
查看已经安装的平台和可以支持的平台。
cordova run browser
,然后浏览器自动访问http://localhost:8000/
1.输入`cordova requirements`命令检查是否满足构建平台的要求。如有报错请按错误提示去安装相应的工具。
2.执行`cordova build android`命令, 编译安卓项目
3.执行`cordova run android`命令,就会自动打开模拟器,在模拟器运行安卓项目了,如果执行`cordova run`,默认是在浏览器运行。
默认是debug版本,打包出来的apk在 你创建的项目根目录\platforms\android\app\build\outputs\apk\debug目录下。
默认启动页是`www/index.html`这个页面。逻辑编写在`www/js这个目录里。`
示意图如下:
运行在浏览器
运行在安卓模拟器