在 GitHub 上查看

@nativescript/ionic-portals ​

内容 ​

• @nativescript/ionic-portals
  • 内容
  • 简介
  • 安装
  • 在您的应用中启用 Ionic 门户
    • 1. 获取门户 API 密钥
    • 2. 注册门户
    • 3. 将门户视图添加到标记
      • 核心
      • Angular
      • Vue
      • Svelte
    • 从 NativeScript 发送事件到任何 Web 门户
      • 订阅从 Web 门户发送的事件
      • 取消订阅从 Web 门户发送的事件
  • IonicPortalManager API
    • register()
    • setInitialContext()
    • setAndroidPlugins()
    • publishTopic()
    • subscribeToTopic()
    • unsubscribeFromTopic()
    • configureLiveUpdates()
    • syncNow()
    • getLastSync()
  • 将 Capacitor 插件与 Ionic 门户一起使用
  • 注意
  • 其他资源
  • 许可证

简介 ​

一个允许您在 NativeScript 中使用 Ionic 门户 的插件。

Ionic 门户是针对 iOS 和 Android 的超级增强型原生 WebView 组件，可让您将基于 Web 的体验添加到原生移动应用中。

安装 ​

要安装该插件，请从项目根目录运行以下命令

npm install @nativescript/ionic-portals

在您的应用中启用 Ionic 门户 ​

以下是启用应用中 Ionic 门户的步骤。

1. 获取门户 API 密钥 ​

在此处获取门户 API 密钥.

2. 注册门户 ​

通过使用 门户 API 密钥 调用 [IonicPortalManager] 类的 register() 方法，注册您的 Ionic 门户。

import { Application } from '@nativescript/core'

import { IonicPortalManager } from '@nativescript/ionic-portals'

Application.on(Application.launchEvent, () => {
  // Register IonicPortals
  IonicPortalManager.register('<portal-api-key>')
})

// boot app here, for example:
Application.run({ moduleName: 'app-root' })

创建您在应用中需要使用的任意数量的门户。

应用将在其资源中查找文件夹，其中文件夹名称等于您用于定义每个门户的门户 id。

鉴于以下示例，请确保您的 Web 门户构建到以下文件夹中

• 对于 iOS：App_Resources/iOS/webPortal
• 对于 Android：App_Resources/Android/src/main/asssets/webPortal

3. 将门户视图添加到标记 ​

核心 ​

1. 使用 Page 的 xmlns 属性注册插件命名空间，并提供您的前缀（例如 ionic）。

<Page xmlns:ionic="@nativescript/ionic-portals">

2. 通过前缀访问 IonicPortal 视图并将其添加到标记中。

<ionic:IonicPortal id="webPortal">
    </ionic:IonicPortal>

完整代码

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:ionic="@nativescript/ionic-portals">
  <StackLayout class="p-20">
    <ionic:IonicPortal id="webPortal">
    </ionic:IonicPortal>
  </StackLayout>
</Page>

Angular ​

1. 要将 IonicPortal 视图添加到任何组件的标记中，请通过将以下代码添加到 main.ts 文件中来注册它

import { registerElement } from '@nativescript/angular'
import { IonicPortal } from '@nativescript/ionic-portals'
registerElement('IonicPortal', () => IonicPortal)

2. 将 IonicPortal 添加到标记中。

<IonicPortal id="webPortal"></IonicPortal>;

Vue ​

1. 要将 IonicPortal 视图添加到任何组件的标记中，请通过将以下代码添加到 app.ts 文件中来注册它

import { IonicPortal } from '@nativescript/ionic-portals'

registerElement('IonicPortal', () => IonicPortal)

2. 将 IonicPortal 添加到标记中。

<GridLayout height="300" class="mt-3 p-3">
    <IonicPortal id="webPortal"/>
</GridLayout>

Svelte ​

1. 要将 IonicPortal 视图用于任何组件的标记中，请通过将以下代码添加到 app.ts 文件中来注册它

import { IonicPortal } from '@nativescript/ionic-portals'

import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('ionicPortal', () => IonicPortal)

2. 将 IonicPortal 添加到标记中。

<gridLayout height="300" class="mt-3 p-3">
    <ionicPortal id="webPortal"/>
</gridLayout>

从 NativeScript 发送事件到任何 Web 门户 ​

要从 NativeScript 发送事件到任何 Web 门户，请使用 publishTopic() 方法

IonicPortalManager.publishTopic('hello', { name: 'data from NativeScript' })

订阅从 Web 门户发送的事件 ​

要订阅从任何 Web 门户发送的事件，请使用事件名称作为第一个参数，事件处理程序作为第二个参数调用 subscribeToTopic 方法。

const subscriptionId = IonicPortalManager.subscribeToTopic(
  'useful-web-event',
  (result) => {
    console.log('received web portal useful-web-event with data:', result.data)
  }
)

取消订阅从 Web 门户发送的事件 ​

要取消订阅从任何 Web 门户发送的事件，请使用事件名称作为第一个参数，订阅 ID 作为第二个参数调用 unsubscribeFromTopic() 方法。

IonicPortalManager.unsubscribeFromTopic('useful-web-event', subscriptionId)

IonicPortalManager API ​

允许您通过以下 API 与门户进行交互和配置。

register() ​

IonicPortalManager.register(apiKey)

注册门户。在应用启动之前，在 main.ts 文件中，在 Application.launchEvent 事件的处理程序中调用它。

setInitialContext() ​

IonicPortalManager.setInitialContext(id, initialContext)

用于在显示门户之前设置任何门户 ID 的初始上下文。

setAndroidPlugins() ​

IonicPortalManager.setAndroidPlugins(plugins)

通过 Android 包名称定义非官方 Capacitor 插件的使用情况

publishTopic() ​

IonicPortalManager.publishTopic(topic, data)

通过发布主题（即事件）向任何 Web 门户发送消息

subscribeToTopic() ​

subscriptionId: number = IonicPortalManager.subscribeToTopic(topic, (data?: any) => void))

通过订阅指定的主题来侦听从任何 Web 门户发送的任何消息。它返回一个订阅 ID，用于稍后取消订阅 topic。

unsubscribeFromTopic() ​

IonicPortalManager.unsubscribeFromTopic(topic, subscriptionId)

configureLiveUpdates() ​

注意：在显示门户之前进行配置。

IonicPortalManager.configureLiveUpdates('webPortal', {
  appId: 'e2abc12',
  channel: 'production',
  syncOnAdd: true,
})

syncNow() ​

IonicPortalManager.syncNow(['e2abc12'], false, (status) => {
  console.log('sync complete:', status)
})

getLastSync() ​

const lastSync = IonicPortalManager.getLastSync('e2abc12')

将 Capacitor 插件与 Ionic 门户一起使用 ​

请参阅 这篇博文。

注意 ​

对于 iOS：您可能需要将 IPHONEOS_DEPLOYMENT_TARGET = 12.0 添加到您的 App_Resources/iOS/build.xcconfig 文件中。如果您的项目包含 App_Resources/iOS/Podfile，您可能需要删除任何删除部署目标的后安装处理，例如：删除如下内容：config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'

其他资源 ​

• 您可以在 通过门户打开大门 了解更多关于 Ionic 门户的信息
  • 在此处查找视频的存储库 此处

许可证 ​

Apache 许可证版本 2.0