标签: ionic-framework

我想开始使用angularjs,css3和html5开发移动混合应用程序.正在寻找一个框架并找到了这两个.两者都看起来非常好,但我无法在两者之间进行良好的比较.任何人都可以列出两者的利弊.

它们在可扩展,开箱即用的组件,速度以及与Angular和设备的兼容性方面的比较将非常有帮助

我有一个Angular 2应用程序包裹在Ionic 2.我正在使用<ion-tabs>,并在每个选项卡中是一个<ion-content>.此区域中的内容需要可滚动,但Ionic 2添加了一个我不想显示的滚动条.似乎在编译时,<ion-content>有一个<scroll-content>注入其中.我不想要这种行为.

我曾尝试过许多以前在Ionic 1中工作的解决方案,但它们在Ionic 2中不起作用:

• 设置scroll="false"在<ion-content>
• 设置scrollbar-y="false"在<ion-content>
• 设置overflow-scroll="false"在<ion-content>

• 在css中设置以下内容:

  .scroll-bar-indicator { display: none; }

等等...

设置以下内容实际上可以删除滚动条,但我宁愿不劫持浏览器行为,也会从<ion-content>标签内部的内容中删除滚动条,这是我不想要的.

::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}

这是我想要记录的上述错误的解决方案.我发现了其他类似的帖子,但都没有描述这个错误如何与Cordova或Ionic相关联.

如果您不小心,Android Studio使用的Gradle版本与Cordova/cordova-android在其自动生成的应用程序代码中指定的Gradle版本可能不匹配.如你所知,跑步

$ cordova platform add android

(或者$ ionic platform add android,如果您正在构建Ionic应用程序)在-project/platforms/android上创建本机应用程序代码.

在该文件夹中,文件:/the-project/platforms/android/cordova/lib/builders/GradleBuilder.js导出一个变量,如下所示:

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'http\\://services.gradle.org/distributions/gradle-x.y-all.zip';

其中x和y取决于使用哪个版本的Cordova/cordova-android来构建本机应用程序代码.

当你跑步

$ cordova build android

distributionUrlvar中指定的Gradle 版本是用于构建的版本.

现在这里是棘手的部分.当您将项目导入Android Studio时,您很可能会收到一条消息,强烈建议您将Gradle升级到更新版本,如下所示:

如果您这样做,Android Studio将下载新版本的Gradle并将其存储在本地并配置项目以使用新下载的本地Gradle分发,这是所选"使用默认等级包装"下方的无线电选项,我最终取消选择,因为这会导致错误.

这将导致问题,因为Android Studio和Cordova现在将尝试使用不同版本的Gradle构建应用程序,您将在Android Studio中获得构建错误,并且

$ cordova build android

在命令行中.Cordova应用程序的解决方案是始终将Android Studio项目设置为"使用默认gradle包装器"并忽略要升级的诱人消息.如果您确实想使用较新版本的Gradle,则可以随时更改上述文件中的distributionUrl var(但Cordova强烈建议不要修改平台文件夹中的代码,因为它很容易被覆盖).在撰写本文时,我无法分辨是否有办法设置Gradle版本

$ cordova platform add android

步骤,这是你想要这样做,所以你永远不会直接修改项目/平台内的代码

我在尝试仅在一个IONIC 4(--type = angular)页面中更改背景颜色时遇到问题.我正在尝试为离子内容添加一个类.在我的html文件中我有:

<ion-content class="fondologin">
...
</ion-content>

在我的sass中我有:

.fondologin{
    background-color: #111D12!important;
}

背景颜色永远不会改变.如果我添加--ion-background-color:#111D12; 在variables.scss中,每个页面都成功更改了背景,但我只想更改一页中的颜色.我怎样才能做到这一点？

如何reload在ui-sref标记中指定选项？我看到的所有示例都直接使用javascript函数.

<a ui-sref="app.editPost({new:true}, {reload:true})">new post</a>

似乎没有用.我是否必须创建一个范围控制器函数来包装该reload选项？

我也在下面尝试了一些答案,它似乎不适用于Ionic框架.链接到下面的代码笔示例:

http://codepen.io/anon/pen/LERqeb

情况:

我正在使用ng-messages指令在我的角度应用程序中进行即时验证.一切都很好,除了一件事:我需要验证字段'密码确认',不知道该怎么做.

代码:

<form name="autentication_form" novalidate="" ng-submit="submit_register()">

    <label class="item item-input">
        <span class="input-label">Email</span>
        <input type="text" name="email" ng-model="registerData.email" required>

        <div class="form-errors" ng-messages="autentication_form.email.$error" role="alert" ng-if='autentication_form.email.$dirty'>
            <div class="form-error" ng-message="required">You did not enter the email</div>
        </div>
    </label>

    <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" name="password" ng-model="registerData.password" required>

        <div class="form-errors" ng-messages="autentication_form.password.$error" role="alert" ng-if='autentication_form.password.$dirty'>
            <div class="form-error" ng-message="required">Please enter the password</div>
        </div>
    </label>

    <label class="item item-input">
        <span class="input-label">Password confirmation</span>
        <input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required>

        <div class="form-errors" ng-messages="autentication_form.password_confirmation.$error" role="alert" ng-if='autentication_form.password_confirmation.$dirty'>
            <div class="form-error" ng-message="required">Password confirmation required</div>
        </div>
    </label> …

我有一个应用程序,用户可以复制图像URL,将其粘贴到输入,图像将被加载到一个盒子上.

但我的应用程序,继续触发此消息:

Refused to load the image 'LOREM_IPSUM_URL' because it violates 
the following Content Security Policy directive: "img-src 'self' data:".

这是我的元标记:

    <meta http-equiv="Content-Security-Policy" content="default-src *; 
img-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; 
style-src  'self' 'unsafe-inline' *">

我在应用程序中使用html2Canvas,当我删除它时:"img-src'seld'数据:"

它触发了这个错误:

html2canvas.js:3025 Refused to load the image 'data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg'></svg>' because it violates
the following Content Security Policy directive: "default-src *". 
Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

除了一堆其他错误......

我如何删除<ion-item>分隔符？我有以下代码连续显示4个项目:

<ion-row ion-list>
    <ion-col width-25 *ngFor="let player of players">
              <ion-item color="dark">
                  <ion-avatar item-left>
                      <img [src]="photo" class="img img-circle"/>
                  </ion-avatar>
                  {{user.name}}
              </ion-item>
              </ion-col>
            </ion-row>

并且输出显示连续4个图像,例如,但每个图像下面都有一个白色分隔符.我不想要任何分隔符.

我试着设置,style="border:none"但它没有这样做.

我想扩展离子的默认webpack配置.具体来说,我想添加一个别名来解析模块,这样我就可以按照绝对路径导入模块,而不是相对的模块:

而不是像这样导入模块:

import { SomeComponent } from '../../components/some.component.ts';

我想要

import { SomeComponent } from '@app/components/some.component.ts';

where @app源是根源目录的别名.

在其他项目中,我可以通过向webpack配置添加这样的内容来实现此目的:

module.exports = {
    ...   
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            '@app': path.resolve('./'),
        }
    },
    ...
};

我不知道如何在没有覆盖默认webpack配置的情况下使用Ionic执行此操作.

我有一个离子/ cordova项目使用:

cordova-android@6.2.0
cordova-plugin-crosswalk-webview@2.3.0
cordova cli 6.4.0
ionic 1.3.3

当我尝试添加Android平台时,我得到以下输出

================

$ ionic platform add android@6.2.0

Adding android project...


Creating Cordova project for the Android platform:

    Path: platforms/android
    Package: com.ionicframework.name
    Name: name
    Activity: MainActivity
    Android target: android-25

Subproject Path: CordovaLib

Android project created with cordova-android@6.2.0

错误:cordovaProject.projectConfig.getFileResources不是函数