混合編程專題Ios@IONICionic开发

ionic2安装、打包、发布、升级

2017-06-07  本文已影响1373人  hk_sky

首先要安装最新版的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开发环境,你已经准备好了。

要求

Java JDK

Android Studio

更新的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/(国外的,需要翻墙)

暂时就只想到这么多,就先写这些,以后想起来了我就再增加进来。。。

文中如果有写错或不对的地方恳请您留言指出批评,如果此文对你有帮助,请收藏点赞。

上一篇下一篇

猜你喜欢

热点阅读