原文发表于我的技术博客


本文分享了在 Ionic 1 & 2 版本开发过程中常见问题的一些 Q&A,供慕课网同学或其他朋友参考。
原文发表于我的技术博客

1. 版本的问题

Ionic 2 目前属于快速迭代更新的版本,版本的更新会带来如文件结构和少许代码的变更,不过底层还是构建于 Angular 2 以及 22 版本后引入了 TypeScript 语言,所以整体的语法结构不会有太大的变化,建议直接安装最新的版本学习,如果需要安装和课程一样的 22 版本,请参见我的博客:在 Ionic 2 项目中强制使用 22 版本,如果学习的是最新的版本,请参见最新的文档查询最新的语法定义:Ionic 2.0 相关资料,特别是 ionic serve 出错的时候,请参见最新的环境安装文档。

2. 安装失败的问题

因为需要加载国外的资源,所以最推荐的安装方式就是FQ安装,FQ后可以避免掉很多的安装坑。
如何要通过 CNPM 进行安装,请参见博文:使用 CNPM 进行 Ionic 环境的安装与配置,不过 CNPM 安装会遇到国内源不同步时计算包的 HASH 值不一样而安装出错的情况。

3. 在 Ionic2 TypeScript 项目中导入第三方 JS 库

我已写成单独的博文,请参见:http://blog.parryqiu.com/2016/09/18/import_js_to_ionic2_ts_project/

4. 新版本中的生命周期定义

Ionic 2 更新到了 30 版本后,框架在全局对生命周期的命名做了改变,所以本文简单整理一下新的生命周期事件和说明如下。
官方文档地址在这里

事件名称 事件说明
ionViewLoaded 页面加载完毕触发。该事件发生在页面被创建成 DOM 的时候,且仅仅执行一次。如果页面被缓存(Ionic默认是缓存的)就不会再次触发该事件。该事件中可以放置初始化页面的一些事件。
ionViewWillEnter 即将进入一个页面变成当前激活页面的时候执行的事件。
ionViewDidEnter 进入了一个页面且变成了当前的激活页面,该事件不管是第一次进入还是缓存后进入都将执行。
ionViewWillLeave 将要离开了该页面之后变成了不是当前激活页面的时候执行的事件。
ionViewDidLeave 在页面完成了离开该页面并变成了不是当前激活页面的时候执行的事件。
ionViewWillUnload 在页面销毁和页面中有元素移除之前执行的事件。
ionViewDidUnload 在页面销毁和页面中有元素移除之后执行的事件。

5. Ionic 各平台支持版本

5.1. Ionic 1

支持的平台以及版本

  • iOS 7+
  • Android 4.1

不过可以使用 crosswalk-webview 去适配一些老版本以及提高 WebView 的性能。

5.2. Ionic 2

支持的平台以及版本

  • iOS 8+
  • Windows 10 Universal App
  • Android 4.4+

同样,如果你使用 crosswalk-webview 可以将 Android 的版本支持降低到 4.1 版本。

6. 没有 iOS 开发者账号如何部署到真机

请参见博文:没有 iOS 开发者账号的情况下部署到真机的方法

7. Ionic 1 开发过程中的参见问题 Q&A

版本 1 开发过程的常见问题,我单独整理成了博文:Ionic 开发中遇到的问题以及后期发布 iOS/Android 的方方面面,对于 Ionic 2 的学习也是具有参考意义的。

8. Ionic2 下处理 Android 设备下返回按钮的事件

请参见单独的博文:Ionic2 下处理 Android 设备下返回按钮的事件

9. 阻止事件冒泡

{% codeblock lang:html%}

<button (click)="myFunction($event, myParam)">Click Me</button

{% endcodeblock %}

{% codeblock lang:js%}

myFunction(event: Event, myParam: any){
event.preventDefault();
}

{% endcodeblock %}

10. 为什么没有 App 文件夹

项目初始化后要进行平台的添加,可以通过命令 ionic platform add iosionic platform add android 分别添加 iOS 平台和 Android 平台,添加后就可以看到 App 文件夹以及添加的对应平台。

11. 最新版本的安装注意点

官方最新的文档已经给出了最新的安装命令,注意安装 ionic 的时候已经不需要添加上 @beta 的后缀了。
官方链接:http://ionicframework.com/docs/v2/setup/installation/
安装命令:npm install -g ionic cordova
初始化命令:ionic start cutePuppyPics --v2
运行:ionic serve

12. 一些文档与开源项目

请参考博文:http://blog.parryqiu.com/2016/08/25/ionic_references/

Ionic 1 & 2 开发常见问题 Q&A的更多相关文章

  1. [2017BUAA软工助教]常见问题Q&A

    软工常见问题Q&A 目录: 1. 转会相关 1.1 转会流程是什么样子的? 1.2 团队中多人要求转会怎么办?(如何解散团队) 1.3 为什么有人想要转会? 1.4 软件工程课为什么有这一环节 ...

  2. VS2019、Qt5.12及QGis3.16开发常见问题汇总

    在C++.Qt软件开发过程中,常常遇到一些编译错误或警告:本文将VS2019.Qt5.12.10和QGis3.16.10的二次开发过程常见的问题做了整理,供大家参考,也便于日后查阅.该内容分为四部分: ...

  3. XBOX ONE游戏开发常见问题

    XBOX ONE游戏开发常见问题 终于弄懂这个在Unity的sdk在Account Picker切换账号的机制了,一个手柄注册一个账号,在游戏里面的时候,只有另外一个手柄选择自己的账号,系统的Acti ...

  4. Xamarin 开发常见问题

    原文:Xamarin 开发常见问题 Verify the project is selected to be deployed in the Solution Configuration Manage ...

  5. 没有苹果电脑打包iOS平台的 Ionic 2程序——《Ionic 2 实例开发》更新内容

    没有苹果电脑打包iOS平台的 Ionic 2程序--<Ionic 2 实例开发>更新内容春节刚过,祝各位新的一年里万事如意,一帆风顺.<Ionic 2 实例开发>在这段时间里更 ...

  6. 【前端技术】web 开发常见问题--GET POST 区别

    web 开发常见问题--GET POST 区别   首先,get和post是什么? --两种 HTTP 请求方法:GET 和 POST HTTP Request Methods GET.POST 专业 ...

  7. ARKit从入门到精通(11)-ARKit开发常见问题及解决方案

    转载请注明出处:ARKit从入门到精通(11)-ARKit开发常见问题及解决方案 本文主要介绍ARKit开发过程中一些常见问题 1.ARKit框架无法导入问题 2.ARKit运行黑屏或者白屏问题:Un ...

  8. 【小梅哥SOPC学习笔记】SOPC开发常见问题及解决办法集锦

    SOPC开发常见问题及解决办法集锦 一.Symbol 'NULL' could not be resolved 近期在评估使用NIOS II处理器进行项目的开发,我使用的软件是Quartus II 1 ...

  9. 《Ionic 2 实例开发》发布

    Ionic 2系列教程集结成册,在百度阅读上架发布,名为<Ionic 2实例开发>(点击书名将打开地址:http://yuedu.baidu.com/ebook/ba1bca51e4189 ...

随机推荐

  1. 山西WebGIS项目总结

    有一段时间没写blog了,说实话,最近的心态一直在变化,看了一部日剧,回想了这一年所学所见,感觉生活目标变了. 做国土项目这段时间不是很忙,由于数据一直给不到位,时间拖得很久,所以在这期间也在继续学习 ...

  2. aws linux主机root帐号登录

    默认情况下,aws主机必须使用pem密码文件并且以ec2-user用户登录系统,之后很多操作都必须用sudo来以root权限执行操作,显得比较麻烦. 以下来自知乎的一个问答,亲测ok ## AWS E ...

  3. InnoDB中锁的模式,锁的查看,算法

    InnoDB中锁的模式   Ⅰ.总览 S行级共享锁lock in share mode X行级排它锁增删改 IS意向共享锁 IX意向排他锁 AI自增锁 Ⅱ.锁之间的兼容性 兼 X IX S IS X ...

  4. Fragment分解使用

    Fragment碎片:作为Activity的一部分,不能单独使用: 1. Fragment特点: (1)一个Fragment可以在多个Activity中重用: (2)一个Activity内部可以嵌入多 ...

  5. eclipse版本和jdk对应关系

    jdk最新版历史版本下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html http://www.oracle.co ...

  6. 26_ArrayList_HashSet的比较及Hashcode分析

    实体类: package com.itcast.day1; public class ReflectPoint { private int x; public int y; public Reflec ...

  7. awk实战演示

    awk:报告生成器,格式化文本输出. 我们一般使用的awk命令其实就是gawk,在centos7系统下,awk是gawk的链接文件. 基本用法:gawk [options] 'program'  FI ...

  8. tidb在DDL语句方面的测试

    Mysql与tidb测试数据为8000万行. 1.修改一个字段的列名,比如将“ctime”修改为“cctime”. Tidb测试: MySQL测试: 2.同一属性之间切换,即修改一个字段的属性大小.比 ...

  9. Linux永久修改系统时间

    1.date 查看系统时间 2.hwclock --show 查看硬件的时间 3.hwclock --set --date '2017-08-16 17:17:00' 设置硬件时间为17年8月16日1 ...

  10. 简明 Vim 练级攻略------转自陈皓coolshell

    vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn Vim Progress ...