ionic2/3实战-开始第一个app

准备

环境配置

开始创建第一个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开发模版

ionic2_tabs github

真机运行失败情况1

失败情况1

真机运行失败情况2

失败情况2

失败情况2

真机运行失败情况3

• 手机上已经安装了app正式版(release版本)或安装了更gao