笔记:整理一些使用IONIC的笔记。

1,还是笔记,不是教程,可能有些乱,如果能帮到你,我很高兴

IONIC的安装网上应该一搜都有,我这里主要说几个,安装时遇到的坑;

1.1 关于JDK环境

      java_home变量一定要放在环境变量里所有变量的最前面。还有如果以前电脑上安装过JDK或配置过JDK的环境变量,

     安装时会报找不到路径的错,但其实是路径是以前配置的路径。

     解决方法,windows+r 运行   输入REGEDIT  回车  在注册表里找到  SOFTWARE>software> 找到java 然后把原来的注册表删除。在运行命           令;

     build android时还会报一个platform 25的错, 打开sdkmanger 然后把里面关于25的全都更新一遍。

     25是版本,安装时 直接点右边的 accept license 一定要点这个,不然会报你没接受许可的错;

 1.2 安装时最好使用淘宝镜像(墙,你懂得)

     npm install -g cnpm --registry=https://registry.npm.taobao.org

     然后

      CNPM INSTALL -G IONIC,速度快很多,用过都说好!!

1.3 build android 很慢。

    基本上前面步骤进行完了之后,运行 ionic serve 就能在浏览器看到APP启动后的画面了,

    若是想在真机调试或者是模拟器,就到了添加Android平台或IOS平台了,这里记一下Android平台的添加就好了。

     具体步骤自己搜索吧,主要说下关键的,到了ionic build android这一步时,非常的慢,这里你可以看到终端上他在

    下载一个叫gradle-3.3-all.zip(版本号是我自己的,记住gradle就OK了),其实没有多大,但我开着VPN也很慢。

     这里,我们直接复制一下URL到浏览器自己下载到本地。

    然后进入项目文件夹下得>platform>android>叫gradle的文件夹。将你刚刚下的压缩包放进去。

    (这里有个小TIPS,gradle这个文件夹,要运行一次ionic build android才会生成。)

    然后命令行里黏贴 set CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL=../gradle-3.3-all.zip(压缩包名改成自己的)

    这一段就是将路径设置成已经下好这个包的路径,这样本地就很快了。

   2.IONIC 使用时的一些笔记

     2.1 引用第三方(jquery)

       First of all, install JQuery in your ionic2 project:

       $ npm install jquery --save

       After that, install JQuery global derectory to typings (so you can import it):

       $ npm install -g typings

       $ typings install dt~jquery --global --save

       Then, you can import JQuery ib your "home.ts":

        import  $ from 'jquery'

     上述是IONIC论坛的原回复

  2.2 AVD的模拟器不支持CSS3 VIDEO 这个标签

     本地视频使用IFRAME,有声无画;

     在线地址的话,没有问题。但在真机上都没有问题的,包括video标签。

   2.3 ionic 动画 - WEB-ANIMATION

     关于WEB-ANIMATION使用


    www.joshmorony.com/using-the-web-animations-api-in-ionic-2/,可用浏览器翻译在看,

    比较通俗易懂,英语大神忽略~~~~

    下面是后面会报错的解决办法

     报错 需要引入 BrowserAnimationsModule;

    1.npm install @angular/animations@4.0.0 --save

    2.in app.module.ts:

    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

    and

    imports: [

    BrowserModule,

    BrowserAnimationsModule,

    HttpModule,

   ],

3.Change declarations at the page:

import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations'

2.4  安卓键盘弹出,打乱布局

进入你的项目文件夹,然后去:

platforms -> android -> AndroidManifest.xml

在该文件中搜索:

android:windowSoftInputMode="adjustResize"

并将其更改为:

android:windowSoftInputMode="adjustPan"

使用此设置您的键盘全部重叠,不向上或向下滚动或移动Div或输入等。

下面是其他一些设置:

adjustNothing

忽略整个布局。如果它被打开,它必须被用户关闭。

stateUnspecified

没有指定软键盘的状态(无论是隐藏的还是可见的)。系统将选择适当的状态或依靠主题中的设置。这是软键盘行为的默认设置。

stateUnchanged

软键盘保持在最后的任何状态,无论是可见的还是隐藏的,当活动出现在前面。

stateHidden

当用户选择活动时,即软用键盘被隐藏 - 即用户肯定地向前导航到活动,而不是因为离开另一个活动而返回到活动中。

stateAlwaysHidden当活动“ 主窗口有输入焦点。

stateVisible

当正常情况下(当用户正在导航到活动的主窗口)时,软键盘是可见的。

stateAlwaysVisible

当用户选择活动时 - 即用户肯定地导航到活动,而不是因为离开另一个活动而返回到活动中,软键盘被显示。

adjustUnspecified

无论活动的主窗口是否调整大小以为软键盘腾出空间,还是窗口的内容是否使当前焦点在屏幕上可见,都是未指定的。系统将根据窗口的内容是否具有可以滚动其内容的任何布局视图自动选择其中一种模式。如果有这样的看法,窗口将被调整大小,假设滚动可以使窗口的所有内容在较小的区域内可见。这是主窗口行为的默认设置。

adjustResize

活动的主窗口总是调整大小,为屏幕上的软键盘腾出空间。

adjustPan

活动的主窗口没有调整大小,为软键盘腾出空间。相反,窗口的内容将被自动平移,以便当前的焦点从不被键盘遮住,用户总是可以看到他们正在打字。这通常比调整大小更不理想,因为用户可能需要关闭软键盘以获得并与窗口的模糊部分进行交互。假设滚动可以使窗口的所有内容在较小的区域内可见。这是主窗口行为的默认设置。adjustResize活动的主窗口总是调整大小,为屏幕上的软键盘腾出空间。adjustPan活动的主窗口没有调整大小,为软键盘腾出空间。相反,窗口的内容将被自动平移,以便当前的焦点从不被键盘遮住,用户总是可以看到他们正在打字。这通常比调整大小更不理想,因为用户可能需要关闭软键盘以获得并与窗口的模糊部分进行交互。假设滚动可以使窗口的所有内容在较小的区域内可见。这是主窗口行为的默认设置。adjustResize活动的主窗口总是调整大小,为屏幕上的软键盘腾出空间。adjustPan活动的主窗口没有调整大小,为软键盘腾出空间。相反,窗口的内容将被自动平移,以便当前的焦点从不被键盘遮住,用户总是可以看到他们正在打字。这通常比调整大小更不理想,因为用户可能需要关闭软键盘以获得并与窗口的模糊部分进行交互。adjustResize活动的主窗口总是调整大小,为屏幕上的软键盘腾出空间。adjustPan活动的主窗口没有调整大小,为软键盘腾出空间。相反,窗口的内容将被自动平移,以便当前的焦点从不被键盘遮住,用户总是可以看到他们正在打字。这通常比调整大小更不理想,因为用户可能需要关闭软键盘以获得并与窗口的模糊部分进行交互。adjustResize活动的主窗口总是调整大小,为屏幕上的软键盘腾出空间。adjustPan活动的主窗口没有调整大小,为软键盘腾出空间。相反,窗口的内容将被自动平移,以便当前的焦点从不被键盘遮住,用户总是可以看到他们正在打字。这通常比调整大小更不理想,因为用户可能需要关闭软键盘以获得并与窗口的模糊部分进行交互。窗口的内容将被自动平移,以便当前焦点不会被键盘遮挡,用户总是可以看到它们正在打字。这通常比调整大小更不理想,因为用户可能需要关闭软键盘以获得并与窗口的模糊部分进行交互。窗口的内容将被自动平移,以便当前焦点不会被键盘遮挡,用户总是可以看到它们正在打字。这通常比调整大小更不理想,因为用户可能需要关闭软键盘以获得并与窗口的模糊部分进行交互。

所有这些信息可以在这里找到:http ://developer.android.com/guide/topics/manifest/activity-element.html#wsoft 23

暂时先这些,以后会补充自己遇到的一些问题,以便自己以后查阅或帮到需要的同学。

3. 使用 --prod 构建 APP时报错解决办法

当构建好一个APP时,我发现启动特别慢可能在15S左右,一番搜索后,发现在build android 的时候加上--prod可以压缩整个APP的大小。

构建时报了一个错,类似于这样

Error: Type HomePage in D:/cbe/src/pages/home/home.ts is part of the declarations of 2 modules: AppModule in D:/cbe/src/app/app.module.ts and HomePageModule in D:/cbe/src/pages/home/home.module.ts! Ple

ase consider moving HomePage in D:/cbe/src/pages/home/home.ts to a higher module that imports AppModule in D:/cbe/src/app/app.module.ts and HomePageModule in D:/cbe/src/pages/home/home.module.ts. You c

an also create a new NgModule that exports and includes HomePage in D:/cbe/src/pages/home/home.ts then import that NgModule in AppModule in D:/cbe/src/app/app.module.ts and HomePageModule in D:/cbe/src

/pages/home/home.module.ts.

这是IONIC 一个懒加载报错。最开始在添加页面时,在app.moudule.ts中引入了HOME这个页面。


删除掉HOME的引入。构建完成后,在恢复成原样,不然你设置的一些页面导航就找不到了。

1.从ionic2升级到ionic3;

启动报错 animations ;

npm install @angular/animations@latest --save

将animation升级到最新

2.从xcode打开项目运行报错Failed to load webpage with error: Could not connect to the server

通过 ionic cordova prepare ios 更新代码库

3.ios video标签始终全屏播放解决办法

video标签 加上 playsinline  webkit-playsinline

将<preference name="AllowinlineMediaPlayback" vlue="true"> 添加到你的config.xml

这样就能正确设置层级和禁止全屏播放了~~~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容