标签: ionic-vue

我正在尝试使用https://docs.wonderpush.com/docs/mobile-push-notifications-ionic上的文档为 Ionic 设置 Wonderpush 集成

说明说要安装插件：

ionic cordova plugin add wonderpush-cordova-sdk --variable CLIENT_ID=YOUR_CLIENT_ID --variable CLIENT_SECRET=YOUR_CLIENT_SECRET --variable SENDER_ID=YOUR_SENDER

...但由于我的应用程序是电容器应用程序，我必须使用以下命令安装插件：

npm install wonderpush-cordova-sdk

--variable我可以 \xe2\x80\x99t 弄清楚以这种方式安装插件时如何设置 CLIENT_ID、CLIENT_SECRET 和 SENDER_ID（此命令没有 \xe2\x80\x9c \ xe2\x80\x9d 标志），并且我\xe2\x80\x99m 在我的设备上运行应用程序时出现运行时错误，提示这些变量丢失。你知道我如何填充这些值吗？提前致谢！

我将 ionic-vue 与 ionicons 5.0.1 一起使用，但在通话后

<ion-icon name="add"></ion-icon>

我正在关注https://dev.to/aaronksaunders/build-your-first-ionic-vue-app-18kj和https://github.com/ionic-team/ionic/issues/19078教程，但卡住了和图标在 FAB 中无法显示。这是我的语法，谢谢你的帮助。

<template>
   <ion-page>

        ....

        <ion-fab vertical="bottom" horizontal="end" slot="fixed">
            <ion-fab-button @click="$router.push({ name: 'new-item' })">
                <ion-icon name="add"></ion-icon>
            </ion-fab-button>
        </ion-fab>
        </ion-content>
    </ion-page>
</template>

<script>

...

import { addIcons } from 'ionicons';
import * as allIcons from 'ionicons/icons';

const currentIcons = Object.keys(allIcons).map(i => {
  const key = i.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
  if(typeof allIcons[i] === 'string') {
    return {
      [key]: allIcons[i],
    }
  }
  return {
    ['ios-' + key]: allIcons[i].ios,
    ['md-' + …

您好，我正在将我的一些网络代码转换为 ionic-vue 应用程序，我想知道我们是否可以使用经典 vuecomponent 的 ionic 模态控制器从我的模态中捕获 this.$emit。

基本上我想翻译

<NewAppointmentModal @onSuccess="handleAppointmentCreation"/>

到

this.$ionic.modalController.create({ component: NewAppointmentModal}).then(m => m.present())
//how can i catch the onSuccess event like before 

我是一名经验丰富的前端开发人员，但我对 Ionic 很陌生，所以请原谅我问了一个愚蠢的问题。

我正在使用 Ionic-Vue 创建移动应用程序。

我从选项卡默认模板开始。我可以毫无问题地在选项卡之间切换：每个选项卡都有关联的路线和组件，并且当我切换选项卡时会立即显示正确的组件。

现在来说说问题。

我正在尝试为登录屏幕添加新的路由/组件。我希望登录屏幕位于选项卡系统之外，因此我将其作为顶级路由“/login”及其关联组件。我在第一个选项卡上添加了一个新按钮以便登录，这就是代码。

<ion-button href="/login">LOGIN</ion-button>

但是，当我按下按钮时，整个页面都会重新加载，切换组件所需的时间比我浏览不同选项卡时要多得多。在我看来，它没有使用内部路由器，而是更改了页面的实际 URL，导致整个应用程序再次向服务器请求。我认为这与我使用选项卡默认模板有关，也许如果您使用选项卡就不能拥有独立的路由？

这是我的路由表：

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/tabs/home'
  },
  {
    path: '/tabs/',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: 'home'
      },
      {
        path: 'home',
        component: () => import('@/views/Home.vue')
      },
      {
        path: 'tab1',
        component: () => import('@/views/Tab1.vue')
      },
      {
        path: 'tab2',
        component: () => import('@/views/Tab2.vue')
      },
      {
        path: 'tab3',
        component: () => import('@/views/Tab3.vue')
      }
    ]
  },
  {
    path: '/login',
    component: () => …

一直在尝试更改页脚背景，但我无法做到正确。我为每个标签都有一个颜色，但只有最后一个标签被更改（蓝色 - #0000ff）。如何在 Ionic 4 中进行样式设计？

<template>
  <ion-footer>
    <ion-toolbar>
      <ion-title v-if="loggedIn">
        <a href="https://www.facebook.com/" target="_blank">
          <ion-icon name="logo-facebook"></ion-icon>
        </a>
        <a href="https://www.instagram.com/" target="_blank">
          <ion-icon name="logo-instagram"></ion-icon>
        </a>
      </ion-title>
    </ion-toolbar>
  </ion-footer>
</template>

<script>
export default {
  name: "pageFooter",
  computed: {
    loggedIn() {
      return this.$store.getters.loggedIn;
    }
  }
};
</script>

<style lang="scss">
ion-footer {
  background-color: #ff0000;
  ion-toolbar {
    background-color: #00FF00;
    ion-title {
      background-color: #0000ff;
      a {
        font-size: 25px;
        color: #000;
      }
    }
  }
}
</style>

它与“shadow dom”概念有关，我还没有完全理解。此 DOM 结构用于页脚。

我正在构建一个 Ionic-Vue 5 移动应用程序，我发现自己导入了很多 vue 组件只是为了将它们使用到我的视图中：

import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonInput,
  IonButton,
  IonAlert,
  IonList,
  IonItem,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardSubtitle,
  IonLabel,
  IonSpinner
} from "@ionic/vue";

export default defineComponent({
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonPage,
    IonInput,
    IonButton,
    IonAlert,
    IonList,
    IonItem,
    IonCard,
    IonCardContent,
    IonCardHeader,
    IonCardSubtitle,
    IonLabel,
    IonSpinner
  },

我知道从性能的角度来看这可能很有用，但是当列表足够大以证明一点性能损失是合理的以大大简化代码时，有一种方法可以一次导入所有离子组件吗？