@nativescript/ionic-portals

https://ionic.io/docs/portals

Ionic Portals 是为 iOS 和 Android 提供的超级强大的本地 WebView 组件，允许您将基于网页的体验添加到原生移动应用程序中。

Ionic Portal View

安装

npm install @nativescript/ionic-portals

先决条件

在这里获取 Portal API 密钥.

使用方法

1. 注册门户

要注册您的 Ionic Portals，请调用 [IonicPortalManager] 类的 register 方法并使用 Portal API 密钥。

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。

以下是一些示例，确保您的网页门户已构建到以下文件夹中

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

2. 在标记中使用它

核心

<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

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

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

Vue

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

registerElement("IonicPortal", ()=> IonicPortal)

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

Svelte

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

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

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

从 NativeScript 向任何网页门户发送事件

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

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

订阅从网页门户发送的事件

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

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

取消订阅从网页门户发送的事件

要取消订阅从任何网页门户发送的事件，请调用 unsubscribeFromTopic 方法，其中事件名称为第一个参数，订阅 ID 为第二个参数。

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

IonicPortalManager API

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

register()

IonicPortalManager.register(apiKey)

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

参数	类型	描述
`apiKey`	`字符串`	您的门户 API 密钥

setInitialContext()

IonicPortalManager.setInitialContext(id,initialContext)

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

参数	类型	描述
`id`	`字符串`	门户 id。
`initialContext`	`字符串`	作为初始上下文提供给门户的数据。

setAndroidPlugins()

IonicPortalManager.setAndroidPlugins(plugins)

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

参数	类型	描述
`plugins`	`Array<string>`	非官方 Capacitor 包名称列表。

publishTopic()

IonicPortalManager.publishTopic(topic, data)

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

参数	类型	描述
`topic`	`字符串`	主题/事件的名称
`data`	`任何`	可选：与主题一起发送的有效载荷。

subscribeToTopic()

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

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

参数	类型	描述
`topic`	`字符串`	要订阅的主题/事件的名称
`callback`	`函数`	每次通过主题发送消息时，都会调用该函数，可带有一个可选的 `data` 参数。

unsubscribeFromTopic()

IonicPortalManager.unsubscribeFromTopic(topic, subscriptionId)

参数	类型	描述
`topic`	`字符串`	要取消订阅的主题/事件的名称。
`subscriptionId`	`数字`	由 subscribeToTopic() 返回的订阅 id。

configureLiveUpdates

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

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

参数	类型	描述
`portalId`	`字符串`	门户 id。
`config`	`IonicPortalLiveUpdateConfig`	实时更新配置。

syncNow

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

参数	类型	描述
`appIds`	`Array<string>`	要同步的门户应用程序 id。
`isParallel`	`布尔值`	是否并行同步。
`complete`	`(status: 字符串) => void`	完成回调。

getLastSync

const lastSync = IonicPortalManager.getLastSync('e2abc12')

参数	类型	描述
`appId`	`字符串`	要检查最后同步的门户应用程序 id。

使用 Capacitor 插件与 Ionic Portals

请参阅这篇博客文章。

注意

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

额外资源

您可以在 Opening Doors with Portals 中了解更多关于 Ionic Portals 的信息。
- 视频的仓库在这里找到

许可

Apache License 版本 2.0