1、简介ionic
ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版本支持,来获取更好的使用体验。
2、安装ionic/Install Ionic
提示: IOS需要在Mac Os X. 和Xcode环境下面安装使用 (iOS development requires Mac OS X. iOS simulator through the Ionic CLI requires the ios-sim npm package, which can be installed with the command sudo npm -g install ios-sim.)
$ npm install -g cordova ionic
cmd
node -v
(检查是否有node,-g表示全局安装,否则要配置环境变量。nodejs在官网下载推荐版recommended for most users)
npm install -g cordova ionic
(如已安装nodejs,可用npm安装cordova和ionic)
(链接不上会报错,重新下载即可,下载太慢可分2步npm install -g cordova 和 npm install -g ionic 下载)
3、通过Ionic创建一个项目
使用Ionic官方提供的现成的应用程序模板,或一个空白的项目创建一个Ionic应用。( Create an Ionic project using one of our ready-made app templates, or a blank one to start fresh.)
创建一个目录,cmd cd命令找到目录,再输入ionic start myApp blank命令
myapp是项目名称,可以更改
blank是项目类型
回车后会从网上下载资源,然后会有一个选择y/n,要输入n
创建好的目录不要动
myapp文件夹中:Plugin中是用来操作底层api的插件;
scss是css扩展写法;
www是h5项目,ionic是已发布版本,
angular中是配套的1.5.3版,
bundle是所以js的整合串联,h5页面只引用bundle即可
4、运行Ionic项目
使用Ionic tool 创建 ,测试,运行你的apps(或者通过Cordova直接创建),如果要创建android应用,把右侧创建代码中的ios改为android ( Use the Ionic tool to build, test, and run your apps (or use Cordova directly). Make sure to substitute ios with android to build for Android.)
Then, try Ionic View to share your apps with testers and clients, or to easily test on new devices.
cmd cd找到项目文件myapp
-->ionic platform add ios 或 ionic platform add android
(添加ios、android平台,会下载资源,myapp下会创建platform文件夹--ios、android文件夹)
-->ionic build ios
( 如果是tabs 和 sidemenu 类型的ionic项目,ios要先装xcode; android 要先装 Android SDK)
-->ionic emulate ios