如何用ionicframework进行混合移动应用开发

Posted 2023-02-15

方法/步骤
1
进行以下操作前请确保电脑已经安装了nodejs。
2
安装Ionic CLI
打开mac的终端（Terminal），输入：
sudo npm install -g ionic
回车后输入mac的用户密码，就可以把ionic CLI安装到全局位置
安装命令与安装结果如下：

3
安装cordova
在终端中输入：
sudo npm install -g cordova
把cordova 安装到全局位置
安装命令与安装结果如下：

4
安装ios真机调试
在终端中输入：
sudo npm install -g ios-deploy
这样就可以使用ionic 命令进行ios真机调试了。
安装命令与安装结果如下：

END
方法/步骤2
1
新建一个项目
在终端中输入：
ionic start myFirstApp sidemenu
其中“myFirstApp”是我们的项目的名称，"sidemenu"是项目模板，其中可用的模板还有:
blank ................ A blank starter project for Ionic
complex-list ......... A complex list starter template
maps ................. An Ionic starter project using Google Maps and a side menu
salesforce ........... A starter project for Ionic and Salesforce
sidemenu ............. A starting project for Ionic using a side menu with navigation in the content area
tabs ................. A starting project for Ionic using a simple tabbed interface
tests ................ A test of different kinds of page navigation
执行命令与执行结果如下：

2
项目结构截图如下：

3
打开终端，cd到项目根目录下：
输入：ionic platform add android
添加一个android平台。
执行命令与执行结果如下：

4
在网页中预览刚才的项目：
在终端中输入：
ionic serve
如下截图表示已经成功在本地开启了预览。
执行命令与执行结果如下：

5
打开浏览器在浏览器地址里输入上面的地址：
http://localhost:8100
一个新的项目就这么简单的新建好了。
在终端中输入q会停止服务
预览截图如下：

6
安装到iphone中运行
在终端中输入：
ionic build ios
然后输入：
ionic run --emulate ios
会自动打开iphone模拟器并进行安装。
执行命令与执行结果如下：

7
安装到android设备或模拟器上同样类似的方法：
先把安卓设备连接到电脑上
先输入:
ionic build android
然后输入：
ionic run --device android
这样会安装到真机上
或者输入：
ionic run --emulate android
这样会安装到android自带模拟器上。
http://jingyan.baidu.com/article/ff42efa93185c0c19e2202b1.html 参考技术A 　　Ionic是一个前端的框架，帮助开发者使用HTML5, CSS3和javascript做出原生应用。ionic的理念类前端开发的BootStrap，目标是封装HTML5移动跨平台开发的最佳实践，就像Twitter Bootstrap在前端开发中做的一样。Ionic框架目前发展很迅速，我们从2014年3月开始使用，当时是1.0.0beta2，现在已经更新到1.0.0beta10，大概每2个星期会出一个beta版本，并且都包含实质性更新。Ionic框架很先进，js部分是基于AngularJS框架，大量使用了Css3，css生成基于Sass，构建工具基于最新的gulp，版本升级基于bower，原生层无缝封装了cordova。

　　使用Ionic框架，可以有效利用AngularJs的特性，极大的提供HTML5应用开发效率，质量，模块化程度。根据我们的经验，使用ionic开发，比使用基于jquery的移动框架，同样功能代码量会减少50%，开发速度提高一倍以上；与原生开发相比，不考虑原生应用开发不能跨平台的因素，同样是在iOS上开发，使用ionic要比使用oc开发快一倍以上。用户体验方面，在iOS和高端Android设备（1500元以上的手机，平板）上，与原生应用差别不大，一般用户无法分辨出是HTML5的。目前来看，市场竞争激烈的App，暂时还不适合用HTML5开发，即使HTML5完全能实现业务需求，例如去哪儿，携程这种竞争性的App。但在企业应用领域，使用ionic有明显优势，我们已经用ionic框架上线了iPad和android

　　Pad企业应用。

　　ionic官网为开发者提供了多个开发模板，如默认的Tab模板（页面基于类微信的Tab组织，使用了ionTab指令），Sidemenu模板等