标签: ionic3

在我的Ionic 2应用程序(TypeScript)中,我使用插件,例如Camera插件ionic-native可以正常工作.现在我想用BackgroundMode plugin: https://github.com/katzer/cordova-plugin-background-mode.我阅读了README,我按照描述进行了安装.

在Usage下,它说插件可以像这样使用:

cordova.plugins.backgroundMode.enable();

在我的IDE(Atom)中,当我键入它时,它说它无法找到cordova.

我搜索了很多关于cordova插件和Ionic 2的内容,并且在某些情况下他们使用 navigator.somePlugin.someFunction()(window.navigator如果我理解正确的话,这个对象),但这对我来说也不起作用.我console.log在我的应用程序和Chrome设备检查器中做了一个显示:

JSON.stringify(window.navigator, null, 2)
{
  "app": {},
  "camera": {
    "DestinationType": {
      "DATA_URL": 0,
      "FILE_URI": 1,
      "NATIVE_URI": 2
    },
    "EncodingType": {
      "JPEG": 0,
      "PNG": 1
    },
    "MediaType": {
      "PICTURE": 0,
      "VIDEO": 1,
      "ALLMEDIA": 2
    },
    "PictureSourceType": {
      "PHOTOLIBRARY": 0,
      "CAMERA": 1,
      "SAVEDPHOTOALBUM": 2
    },
    "PopoverArrowDirection": {
      "ARROW_UP": 1,
      "ARROW_DOWN": 2,
      "ARROW_LEFT": 4,
      "ARROW_RIGHT": 8,
      "ARROW_ANY": 15
    },
    "Direction": {
      "BACK": 0,
      "FRONT": …

我有几个设置应该在配置文件中.

例如:API的URL

Ionic 2中最好的地方在哪里？

我想滚动到离子2中列表视图中的特定项目.我有一个列表视图绑定到数组.

export class TestPage {
    @ViewChild(Content) content: Content;
    public items: Array<Object> = [];

    ionViewWillEnter() {
        console.log(this.navParams.data);
        this.customService.getArray(this.params.index).then((items) => {
            this.items = items;
                //scroll to item
                // this.content.scrollTo()
        });
     }
}

这是观点:

<ion-list [virtualScroll]="items" approxItemHeight="120px" approxItemWidth="100%" 
    class="items-listview list list-md">
  <button class="items-listview-item item item-md" *virtualItem="let item">
    <div class="items-listview-text">
        {{ item.text }}<span>{{item.index}}</span>
    </div>
  </button>
</ion-list>

我看到scrollTo只支持位置,即顶部和左侧,但不支持元素本身.如何滚动列表视图项目(例如项目编号150)本身？如何获得150号项目的位置并将其传递给scrollTo？

我有一个带有两个标签的标签组件.按钮是可单击的,单击按钮所在的位置正确显示选项卡内容,但按钮不可见.

<ion-header>
  <ion-navbar>
    <ion-title>{{coupon.title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div class="coupon-image-container">
    <img src={{coupon.mainImage}}/>
    <button ion-button class="left">Redeem</button>
  </div>
  <ion-tabs class="coupon-tabs">
    <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
    <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
  </ion-tabs>
</ion-content>

我不认为任何其他代码是必要的,但如果需要我会提供更多.就像我说的那样mapTab,infoTab组件的内容显示得很好,点击标签按钮应该在哪里切换它们,但按钮只是空白.

编辑:以防万一有人要问,如果我删除除组件组件之外的组件中的所有其他内容,它仍然会做同样的事情:

<ion-tabs class="coupon-tabs">
  <ion-tab tabIcon="map" [root]="mapTab" tabTitle="Map"></ion-tab>
  <ion-tab tabIcon="information" [root]="infoTab" tabTitle="Info"></ion-tab>
</ion-tabs>

所以它绝对与其他内容无关.

编辑:我做了一个显示问题的GIF:http://g.recordit.co/WDkjkSz6re.gif

编辑:这是ion-tab上的样式

element.style {
}
main.css:25224
.coupon-tabs ion-tab {
    color: black;
    top: 56px;
}
main.css:5136
ion-tab.show-tab {
    display: block;
}
main.css:5145
ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page {
    contain: strict;
}
main.css:5132 …

我已经通过Ionic 3文档,我试图了解它们之间的区别

https://ionicframework.com/docs/api/components/virtual-scroll/VirtualScroll/

和

https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

我看到他们使用不同的组件,虽然他们展示了InfiniteScroll的一个例子,但没有VirtualScroll的例子,它的设置也看起来比较棘手.

两者之间有什么区别,什么是可能的用例何时使用其中一个？

Ionic 3图像滑块自动播放效果很好,但是当我手动滑动图像时,自动播放停止工作.下面是我的离子3代码.我真的被困在这里..

    slideData = [{ image: "../../assets/img1.jpg" },{ image: "../../assets/img2.jpg" },{ image: "../../assets/img3.jpg" }]

html代码如下

  <ion-slides  class="slide-css" autoplay="100" loop="true" speed="100" pager="true" autoplayDisableOnInteraction = "false">
  <ion-slide *ngFor="let slide of slideData">
  <img src="{{slide.image}}" />
  </ion-slide>
  </ion-slides>

我想为个人资料图片显示base64图像.图像作为二进制数据存储在数据库中,我使用btoa()将这个二进制数据转换为base64.现在我想将这个base64图像绑定到img src我尝试了很多方法但它不起作用,请帮助这里是我的代码

profile.ts代码:

profilePicture(binImage)
{
    if(binImage != null)
    {
        var imageData = btoa(binImage);
        //console.log("Base64 Image: ",imageData);
        this.displayImage = imageData;
    }
}

profile.html代码:

<div class="profile-picture big-profile-picture" *ngIf="displayImage">
    <img src="data:Image/*;base64,{{displayImage}}">
</div>

它显示错误"清理不安全的url值safevalue必须使用[property] = binding"

我试图在"firebase"认证的帮助下在我的离子3应用程序中实现社交登录.我跟着这个艺术的https://javebratt.com/ionic-social-login-firebase/

我安装了所有的插件(cordova-plugin-browsertab,cordova-plugin-inappbrowser ..etc)并完成了与文章完全相同的操作.

然后我在android和ios设备上运行了应用程序.在Android设备中,facebook/google登录页面在"在应用程序浏览器中"打开,并在登录过程后成功重定向到应用程序.一切正常.

但在iPhone中,facebook/google登录页面在新的safari浏览器实例中打开,登录后重定向到localhost,并且不会重定向回应用程序.

谁能帮我这个？

谢谢

当我尝试在笔记本电脑和Ionic的Pro仪表板上构建Android时出现此错误.

[04:27:55]: ? FAILURE: Build failed with an exception.
[04:27:55]: ? * What went wrong:
[04:27:55]: ? Execution failed for task ':app:transformClassesWithDesugarForRelease'.
[04:27:55]: ? > com.android.build.api.transform.TransformException: java.lang.RuntimeException: java.lang.RuntimeException: com.android.ide.common.process.ProcessException: Error while executing java process with main class com.google.devtools.build.android.desugar.Desugar with arguments {--input /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/stackFramesFixer/release/43.jar --output /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/desugar/release/45.jar --input /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/stackFramesFixer/release/49.jar --output /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/desugar/release/51.jar --input /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/stackFramesFixer/release/37.jar --output /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/desugar/release/39.jar --input /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/stackFramesFixer/release/3.jar --output /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/desugar/release/5.jar --input /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/stackFramesFixer/release/28.jar --output /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/desugar/release/30.jar --input /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/stackFramesFixer/release/47.jar --output /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/desugar/release/49.jar --input /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/stackFramesFixer/release/19.jar --output /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/desugar/release/21.jar --input /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/stackFramesFixer/release/44.jar --output /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/desugar/release/46.jar --classpath_entry /builds/user/anonymous-social/platforms/android/CordovaLib/build/intermediates/intermediate-jars/release/classes.jar --classpath_entry /builds/user/anonymous-social/platforms/android/app/build/intermediates/classes/release --classpath_entry /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/stackFramesFixer/release/0.jar --classpath_entry /builds/user/anonymous-social/platforms/android/app/build/intermediates/transforms/stackFramesFixer/release/1.jar …

我有一个适用于Android的Ionic Cordova应用程序，其中有一个指向Facebook Messenger的按钮：

<a href="https://m.me/my-fb-page" target="_blank"><img src="assets/images/messenger.svg" /></a>

轻按时，屏幕上没有任何内容。我一直通过logcat收到此错误：

CordovaWebViewImpl: Blocked (possibly sub-frame) navigation to non-allowed URL: intent://user/xxxxxxxxxxxxx/?intent_trigger=mme&nav=discover#Intent;scheme=fb-messenger;package=com.facebook.orca;end

我安装了cordova-plugin-whitelist。

config.xml的内容：

    ...
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-navigation href="*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-intent href="fb-messenger:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <allow-intent href="fb-messenger:*" />
        ...

我已经尝试了许多用于允许意图，访问和允许导航的选项。

该问题与Facebook Messenger并不特别相关，我在打开其他外部（支付）应用程序时也遇到了问题