ionic2安装、打包、发布、升级
首先要安装最新版的NodeJs(官网下载nodejs.org) ,nodeJS自带npm包管理工具,装好node.js(一路回车即可)后输入下面命令安装淘宝镜像到cnpm,
npm install-g cnpm--registry=https://registry.npm.taobao.org
ionic 官网地址https://ionicframework.com
ionic 基本用法博客https://segmentfault.com/a/1190000007133212
1、全局安装ionic 和 cordova
npm/cnpm install -g ionic cordova
在 Mac 或 Linux 平台上,可能由于权限问题你需要添加sudo前缀提权进行全局安装:
sudo npm/cnpm install -g ionic cordova
2、创建项目
ionic start MyIonicProject tutorial --v2
start会告诉CLI创建一个新的应用程序。
MyIonicProject将是您的项目中的目录名称和应用程序名称。
tutorial将作为你的项目的起始模板。
如果教程模板不是您想要使用的,Ionic有几个模板可用:
tabs:一个简单的3选项卡布局
sidemenu:侧面有可滑动菜单的布局
blank一个单独的启动器
super:启动项目超过14个可以使用的页面设计
tutorial:一个引导启动项目
如果不通过运行指定模板ionic start MyIonicProject,则将使用选项卡模板。
创建完成后用 cd MyIonicProject进入项目根目录,运行ionic info这应该会输出你的Ionic环境信息。最后,想要在浏览器中预览你的应用,你需要使用ionic serve 命令就可以对创建的项目进行预览
ionic serve (可以在后面添加属性更改ionic serve默认属性)
--consolelogs-c 将应用程序控制台日志输出到Ionic CLI
--serverlogs-s将开发服务器日志打印到Ionic CLI
--port-p指定端口
--livereload-port-r实时重新加载端口
--nobrowser-b禁用启动浏览器
--nolivereload-d不要实时重新加载
--noproxy-x不要添加代理
--address指定 Ip 地址
--all-a让服务器侦听所有地址(0.0.0.0)
--browser-w指定启动的浏览器
--browseroption-o启动浏览器时的参数
--lab-l在多种屏幕尺寸和平台类型上测试您的应用
--nogulp在服务期间禁用gulp
--platform-t指定平台类型
3、用命令给项目创建页面、组件、服务、过滤...(component 、directive、page、provider、pipe、tabs)
# ionic g page
ionic g page myPage
√ Create app/pages/my-page/my-page.html
√ Create app/pages/my-page/my-page.ts
√ Create app/pages/my-page/my-page.scss
这会同时创建出html,ts,scss。不光可以创建page还可以创建provider:
ionic g provider MyData
√Createapp/providers/my-data/my-data.ts
4、安装插件 plugin
添加插件:
ionic cordova plugin add ionic-plugin-keyboard
npm install @ionic-native/keyboard --save
移除插件:
ionic cordova plugin remove ionic-plugin-keyboard
npm uninstall @ionic-native/keyboard --save
5、真机调试
安卓调试:用chrome浏览器打开chrome://inspect/#devices就可以连接手机进行调试(必须开vpn代理)如果之前一直能用,突然有一天不知进行了什么操作,点击inpect后出现空白页,一直加载不出来,那么可以在chrome地址栏输入chrome://appcache-internals/ 清理一下用户缓存,然后重新连接一下手机点inpect就可以调试了
ios调试:手机用线连着mac电脑命令窗口输入ionic cordova run ios就会在手机上安装一个app在mac的safari浏览器中可以调试
6、安装平台支持
官网平台支持操作文档https://ionicframework.com/docs/intro/deploying/
部署到Android设备是一个非常简单的过程。如果你有一个工作的Android开发环境,你已经准备好了。
要求
更新的Android SDK工具,平台和组件依赖关系。通过Android Studio的SDK管理器可用
安卓平台详细操作链接https://cordova.apache.org/docs/en/latest/guide/platforms/android/
ionic cordova platform add android/ios 添加平台
ionic cordova platform remove android/ios 移除平台
ionic cordova build android/ios 打测试包/debug包
ionic cordova platform build android/ios --prod --release 打发布的包/release包
ionic cordova run android --device
ionic cordova run ios --device 插着线连接手机(屏幕要一直亮着)运行这个命令会自己在手机上安装app,然后在mac的浏览器中就可以调试了
7、项目打包发布
签署Android APK
如果您要在Google Play商店中发布您的应用,您必须签署APK文件。为此,您必须创建一个新的证书/密钥库。
让我们使用JDK附带的keytool命令生成你的私钥:
jarsigne r-verbose -sigalg SHA1withRSA -digestalg SHA 1 -keystore my-release-key.jks android-release-unsigned.apk alias_name
您将首先被提示为密钥库创建密码。然后,回答好的工具的其他问题,当它完成后,你应该有一个名为my-release-key.jsk在当前目录中创建的文件。
注意:确保将此文件保存在某个地方,如果丢失,您将无法向应用程序提交更新!
有了签名文件后就可以对app打正式包和签名了并进行压缩
0. ionic build android --prod --release
1. 打开platforms/android, 放入×××.keystore签名文件, 然后进入platforms/android/build/outputs/apk,执行
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore ..\..\..\×××.keystore -signedjar android-armv7-release-signed.apk android- armv7-release-unsigned.apk projectName
2. 执行zipalign -v 4 android-armv7-release-signed.apk android-armv7-signed-zipalign.apk
关于ionic生成签名和打发布包可以参考以下两篇博客:
http://www.jianshu.com/p/0588510fbb97
http://www.jianshu.com/p/dfd98ad47af1
关于正式发布到应用商店要做的准备可以参考下面的链接:
http://www.mamicode.com/info-detail-1641266.html
8、ionic2到ionic3的变化
ionic3与ionic2最大不同就是命令变化了很多,下表给出了两个版本之间命令区别
ionic2与ionic3的命令区别9、ionic开发中遇到的坑
在ionic开发中遇到的最大坑就是键盘的坑,键盘在ios和android上的表现不一样,一般可出现的表现为:
(1)键盘把输入框盖住看不到输入框,
(2)点击输入框view中头部的head会被顶不见,
(3)点击输入框底部的tabs会被顶起来在键盘上部,当键盘关掉时自己又恢复,
(4)点击键盘view会在底部增加键盘的高度然后把内容顶上去,关闭键盘后那个底部的高度不自动消失,就会在底部昌化石能一个很大的padding值
查阅了众多资料后总结出了以下几个解决办法,具体哪一个方案能解决办法,需要去一个一个的试(因为版本升级,会有所变动,所以每次出现了bug
要对着些安防去一个一个的试),下面给出几种方案:
(1)在有键盘的那个页面添加css样式 .scroll-content {padding-bottom:0!important;}
(2)在app.scss里面全局添加css样式.input-cover {position: static;} /*在最新版的3.3.0版本中这个好像不能用*/
(3)在app.component.ts中 this.platform.ready().then(() => {
this.keyboard.disableScroll(true);
this.keyboard.hideKeyboardAccessoryBar(false);
}
(4)在app.module.ts里
IonicModule.forRoot(MyApp, {
mode: 'ios', //全部统一为ios风格
backButtonText: '', //去掉返回箭头后面的go back
platforms : {
ios : {
// These options are available in ionic-angular@2.0.0-beta.2 and up.
scrollPadding: false, // Valid options appear to be [true, false]
scrollAssist: true,
autoFocusAssist: false, // Valid options appear to be ['instant', 'delay', false]
},
android : {
scrollPadding: false,/*键盘消失时底部的padding*/
scrollAssist: true,/*键盘弹出时内容能自己滚动*/
autoFocusAssist: false, /*让input框能出现在你的视野里*/
}
}
} ),
注意:以上的方案中1和2只能单独使用,3和4可以组合使用,如果还解决不了的话可以将3和4中的true、false值做变更一个一个的调试,一般都可以解决的,如果还不能的话那就等下一次版本升级把这个bug解决掉吧
10、ionic组件searchbar组件bug
提示:最新版的3.3.0版的searchbar在android4.4上输入框不支持除英文外的所有输入(不支持中文、韩文...),并且当键盘开启时还会把底部的tabs顶起来,目前的办法等待官方版本升级,希望下一个版本fix掉这个bug
11、ionic2.X如何升级到ionic3.X
在假如你刚开始写项目时用的是ionic2.X的版本,现在想把项目升级到ionic3.X的版本,那该怎么操作最好呢,下面给出具体操作:
1)首先进入ionic团队的官方GitHub查看最新的发布版本配置信息, 点击链接https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md
GitHub上ionic3.3.0版本package.json截图2)安装最新版的ionic npm install ionic -g @latest
3)打开你的项目根目录下的package.json文件,对照1)中的图片把你的文件中和图片中相同的部位的版本改成跟图片中一致
4)然后删去node_modules文件夹中把刚才你在package.json文件改动的那几个文件对应的文件夹删掉,最后执行npm install;
这一步如果懒得话,那就直接删掉node_modules文件夹,再npm install
5)从ionic2升级到ionic3后会报一些模块引用的错误,例如:no provider for statusbar! 、no provider for BrowserModule!
遇到这样的报错就最简单的就是复制这个报错去google浏览器中搜索,都能到解决方案的,以下是上面两个报错的解决方案:
在项目的app.module.ts文件中操作如下
import {StatusBar} from '@ionic-native/status-bar';
import {Keyboard} from '@ionic-native/keyboard';
import {BrowserModule} from '@angular/platform-browser';
import {HttpModule, JsonpModule} from '@angular/http';
...
@NgModule({
...
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp, {
mode: 'ios',
backButtonText: '',
...
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},
...
StatusBar,
Keyboard,
...
]
在升级时也可以用npm的outdated命令检查局部包过时情况然后执行npm update更新到最新版本(这个会将所有有更新的都更新到最新版本),这里给出两个详细操作文档的链接
http://www.tuicool.com/articles/NF3EZnb
http://devfanaticblog.com/how-to-update-ionic-2-cli-and-libraries/(国外的,需要翻墙)