本例是在win10系统下搭建的一个android应用实例
1.首先安装node.js
下载适合你电脑的版本,过程自行百度
2.使用node.js集成的包管理工具npm
安装ionic和cordova
在命令行里输入
npm install -g cordova ionic
下载过程由于国内墙的问题可能失败,可以使用淘宝国内的镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
下载完后运行命令
cnpm install -g cordova
cnpm install -g ionic
3.创建应用
使用使用ionic官方提供的现成的应用程序模板,或一个空白的项目创建一个ionic应用:
ionic start myApp tabs
4.运行或调试app
浏览器,安卓模拟器和真机三种方式
- 直接在浏览器运行
在项目主目录打开命令窗口,执行ionic serve
,首次执行,会让你选择服务器地址,一般选择localhost,此时你的app就会显示在浏览器中,按f12,打开手机模式,就可以运行你的app了,有一点:浏览器是热部署的方式,当你修改完代码,点击保存后,浏览器就会重新启动服务,获取最新的代码,你的修改立刻就会展现出来。 - 使用安卓模拟器运行
在项目主目录打开命令行窗口,执行下列命令
ionic platform add android (添加android平台)
ionic build android (生成android的apk文件)
ionic emulate android (在模拟器或者真机上运行)
生成apk文件和运行以后,这两步可以合并成ionic run android
一个命令,当修改程序代码后,执行这一个命令查看即可。
- 使用手机运行
在使用模拟器运行ionic_app步骤中执行完那几行创建运行代码后,使用数据线连接电脑,打开USB调试模式,修改连接方式为“媒体设备(MTP)”模式
执行
ionic run android
命令
但是运行在Android真机上,会出现标签栏置于顶部的问题。将下面的代码复制粘贴到app.js的config配置下,标签栏就会出现在底部了
$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');