美文网首页ionic2实战ionic2
ionic2实战-开始第一个app

ionic2实战-开始第一个app

作者: 昵称已被使用_ | 来源:发表于2016-12-27 00:03 被阅读5706次

准备

环境配置

开始创建第一个App项目

  • 创建一个ionic app
ionic start ionic_test tabs --cordova

其中ionic_test是项目名称,tabs是使用的项目模版.如下图ionic还提供了空白模版和侧边栏菜单模版

  • 下载依赖
cd ionic_test
cnpm install

在浏览器上运行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

相关文章

网友评论

  • 差不多先生_2517:军哥,你的ionic2_tabs github 这个项目是懒加载的吗
    昵称已被使用_:不是.app为了更流畅没用懒加载.ionic开发的微信公众号用.https://github.com/yanxiaojun617/ionic2_wx
  • a30233aa83f8:tabs starter -failed!
    Network connectivity error ocurred,are you offine
  • d85cb7968272:No target specified, deploying to device 'b2117a62'.成功安装apk,但是报这条错
    昵称已被使用_:这错误不影响,device 'b2117a62'是你的设备id,你可能连了多个设备或有多个模拟设备
  • brantzzu:请教一个问题, login.ts 里的ionviewcanleave 这个方法的作用是啥呢,谢谢了。
    brantzzu:我运行了你的你的登录注册的代码,发现一个问题,点击注册时 跳出 是否退出App 的对话框,发现 ionViewCanLeave() 方法里的canLeave 始终都是false ,虽然在toRegister() 方法里写了 this.canLeave = true
    brantzzu:@小军617 懂了,谢谢!
    昵称已被使用_:@brantzzu 当离开页面会出发这个方法,这个方法return false就会阻止离开页面.
  • 9c9fae541d1e:ionic serve .报错知道怎么解决吗?
    报错内容:
    Error occurred while loading plugins. CLI functionality may be limited.
    Checking for CLI updates now...
    PLUGIN_NOT_INSTALLED
    [ERROR] No updates found after plugin error--please report this issue.
  • 49961f50148d:ANDROID_HOME=D:\Android\SDK

    JAVA_HOME=C:\Program Files (x86)\Java\jdk1.8.0_101

    Starting a new Gradle Daemon for this build (subsequent builds will be faster).


    Download https://repo1.maven.org/maven2/com/android/tools/build/gradle-core/2.1.0/gradle-core-2.1.0.jar

    真机调试那一步的和你不一样,一直下java包,老哥你知道这是什么原因吗?
    昵称已被使用_: @言过其实_1219 调用手机硬件和原生有关系,基本上调用硬件的插件都有,不用自己写
    49961f50148d: @小军617 嗯,我坚持下到最后了。然后我想问下真实ionic开发APP会很多依赖原生开发的东西吗?
    昵称已被使用_:第一次会下载许多jar包
  • 1e0b53b9da62:cmd: Command failed with exit code ENOENT出现这个错是那的原因,求大神指导
  • a4a27c7d477d:打包的时候报错:Your yallist platform does not have Api.js 这个是哪里出问题了吗

本文标题:ionic2实战-开始第一个app

本文链接:https://www.haomeiwen.com/subject/qslsvttx.html