准备
开始创建第一个App项目
- 使用ionic cli提供的命令创建一个ionic app
ionic start ionic_test tabs
其中
ionic_test是项目名称,tabs是使用的项目模版.如下图ionic还提供了空白模版和侧边栏菜单模版，更多详情查看ionic cli命令
注：有时候由于网络问题或者ionic项目调整使用命令无法下载ionic模版，于是我在github上放了一个ionic3 tabs项目模版，和官网上下载下来是一样的，各位可以下载使用，：https://github.com/yanxiaojun617/ionic3-app-base
- 下载依赖
cd ionic_test
cnpm install
cnpm安装是快很多，但是经常项目会报莫名奇怪的错误，这时候重新用npm安装依赖就解决了，所有先使用cnpm安装项目依赖，安装完成如果项目运行不起来，那就删除项目下的
node_modules文件夹，重新用npm安装：npm i
在浏览器上运行App项目
- 如下图1,使用命令
ionic serve在浏览器运行app,也可以用ionic serve --lab,一定要试试 -
如下图2,是打开的浏览器界面,开发过程中经常要在chrome控制台调试代码
图1
图 2
在真机上运行app项目
- 在真机上运行需要确保android sdk已经下载好,可以参考这里
- 执行
cordova platform add android把html+js代码编译成"android"代码 - 第一次编译可能需要下载gradle文件,这个文件有66M下载很慢,建议耐心等待,只需下载一次.如果真想快可以看这里.
- 用usb数据线连接电脑和手机并确保连接成功,可以看这里
- 再执行
cordova run android就可以在手机上运行了,安装过程如下图
cordova run android命令等于cordova build android(生成apk)和adb install -r apk路径(安装apk到真机)
如果代码有修改,记得先执行ionic serve或者使用ionic cordova run android
ionic run android过程图
app开发模版
真机运行失败情况1
失败情况1
真机运行失败情况2
失败情况2
失败情况2
真机运行失败情况3
- 手机上已经安装了app正式版(release版本)或安装了更gao
