移动开发框架-html5移动端开发框架

随着移动智能技术的发展，越来越多的新技术不断地涌现出来。ionic是基于Web技术应用HTML5、CSS3和 JavaScript技术进行智能设备APP开发的框架，具有很好的跨平台性能，被称为 Hybird App框架，即混合模式的移动APP开发框架。ionic聚焦于感官和应用的Ui交互，它不是 Phone Gap或 Cordova的替代品，ionic只是在前端大幅度简化了APP开发。为了发挥ionic的完美功能，需要 AngularJS的配合，虽然可以继续使用 AngularJS的CSS内容，但会失去ionic提供的强大的交互、手势、动画等支持，因此在使用ionic时应避免使用其他CSS内容。ionic的最终目的是让基于HTML5开发本地智能设备APP的工作更加容易，这种APP被称为混合APP。

1.Ionic是什么，Ionic适合什么样应用的开发？

首先，Ionic是一个HTML5的移动应用开发框架，针对构建混合的移动应用程序。混合应用程序从本质上来说，是运行在浏览器内壳里面的小网站，而浏览器的功能是远远不够的，所以它可以通过Cordova访问本地平台层，来调用设备原生功能，混合应用程序有许多超过纯原生应用的好处，特别是在平台支持，发展速度，还有第三方代码支持方面。

最上层：Ionic框架自身

中间层：AngularJS（web应用框架，在Ionic4中可以使用vueJS，reactJS做为web框架）

最下层：Apache Cordova（允许web应用程序来调用设备的原生能力并将app转换成原生app）

设想一下，如果需要开发一个app并在主流的手机上都能安装使用，需要请一位IOS工程师，一位安卓工程师，但是，有了Ionic你只需要一位前端工程师并且编写一套代码就可以同时安装苹果 和安卓的手机，那是多么的物超所值。而且不同于一般的响应式框架，Ionic有着类原生风格的移动UI元素和布局，就像从一个原生iOS或AndroidSDK里面构建出来的一样，但以前从未存在过。

2.米粒通是如何搭建的

在米粒通搭建的初期，我也调研过许多跨平台app的开发框架，如：阿里的weex，PWA方式，ReactNative，Xamarin（C#）等等，但是最终还是选择了Ionic+Cordova+angular，因为它的开发最为高效，性能更好，页面更加优化，学习成本也较低。

1.全局安装Ionic包

2.使用ionic start XXX 命令创建Ionic3项目

3.使用ionic serve 命令，运行项目

4.使用VS code打开项目，修改home页面，这样我们就成功建立了一个项目，一切都是非常简单

下图是米粒通的前端项目结构图：

5.当你需要编程安卓或者苹果代码运行时只需如下图，就可以在ios模拟器或者安卓模拟器或真机上进行测试了

6.最后你只需要使用ionic常用标签和开发H5一样开发app就可以了

3.使用ionic的优势

a)全套的UI组件

Ionic框架很注重外观的体验，所以它提供了很多UI组件帮助开发者开发APP，比如：button，list，checkbox，tabs下拉刷新移动开发框架，等等。界面美观，开发者能够很快的上手开发APP，就像在vue中使用iview UI，elementUI一样

b)代码维护容易

因为Ionic框架是基于AngularJS，也就支持AngularJS的特点，遵循标准的代码，维护代码就很容易，能够完美融合AngularJS。（目前Ioinc4中支持VUE，REACT期待尝试）并且代码只编写了一套所以一次修改所有平台都可以支持

c)支持跨平台

可以市面上主流的Android和IOS操作系统上运行，也可以当作H5在浏览器中完美运行，一次代码编写，多平台使用岂不美哉。

d)强大的社区

由于现在手机功能繁多，在Ionic中native APIs中已经包含了许多调用原生api的方法但是还是不够用，好在有Ionic社区十分活跃，在各大github，Stackoverflow等社区上有许多工具包可以进行下载使用。

4.Ionic米粒通遇到的问题

在使用插件的过程中难免会遇到一些难以解决的问题，在Ionic Native的官方插件中有一个类似webview的浏览器插件Themeable Browser遇到了许多问题，比如浏览器header与手机header重合，浏览的页面无法上传图片等等。这里我推荐大家一个完善过的插件地址

众所周知，Android手机多种多样，所以Android版本也是非常之多，我用的ionic3最低兼容Android4.3，而有许多插件我们在使用的时候也要看清楚，有的是从android7.0开始支持的.还有当遇到需要使用手机权限时，必须在项目中config.xml中进行配置比如使用通讯录，位置，照相机，推送等。

苹果大佬经常会对IOS系统或者Xcode进行更新，而每次都可能会对我们的app产生一定的问题，这里我来举个例子：在一次更新中Xcode升到了10.0以上的版本，从而导致

这样的问题移动开发框架，其实是苹果讲编译过程中所需要的一个文件删除了，解决方式也非常简单，只要讲以前的这2个文件再放回原来的位置就可以编译成功了。如下图所示

在这次IOS13升级中也多多少少会对我们的app存在一的影响，我们也必须积极适配，相关问题如下图：

在这里推荐一个终极解决问题方案，不管是遇到android或是iOS问题无法解决，始终逃不过一种方法，就是将编译后的内容全部清空，重新编译，一般可以解决一大部分问题

ionic cordova platform remove android

ionic cordova build android

ionic cordova platform remove ios

ionic cordova build ios

5.总结

总而言之，Ionic是一个具有原生APP卓越运行性能的，可维护性高，而且具有漂亮的UI设计的轻量级框架，具有强大的命令行调试工具，与AngularJS也完美的结合，是一个快速开发APP应用的不二之选