移动端微前端与 @nativescript/ionic-portals

团队需要灵活多样的选项来应对各种不同的情况。Ionic 团队在 2021 年发布了一些特别的东西，我们迫不及待地想要开始使用它们，并很高兴与 NativeScript 开发者分享。

Ionic Portals 为 Web 团队提供了一种简单的方法，可以在移动应用程序中交付专注的体验，这些体验完全独立，允许您以令人兴奋的创意方式混合 Web 视图和平台原生视图。团队可以并行构建、测试和发布这些嵌入式微 Web 体验，让您有更多选择来扩展 NativeScript 应用程序开发。

假设您团队的一部分正在迭代一个微 Web 前端，该前端经常部署到生产环境。此体验满足了您想在 NativeScript 应用程序中交付的特定目标，无论是通过模态窗口、弹出视图、路由细节页面、侧边抽屉、欢迎屏幕、购买体验，还是完全可嵌入的体验（选项是无限的）。Ionic Portals 允许您根据需要插入这些体验，无论您想要如何，让我们探索如何使用 @nativescript/ionic-portals 的最新版本来实现这一点。

使用方法
创建一个 Ionic 微前端 Web 体验
在您的 NativeScript 应用程序中使用您的微前端 Web 体验
我可以将 Capacitor 插件与 IonicPortal 一起使用吗？
将您的 IonicPortal 与 NativeScript 视图混合使用
我可以使用 IonicPortal 创建一个完整的 NativeScript 应用程序吗？

使用方法

一个 IonicPortal 是 NativeScript 的一个视图组件，通过以下方式提供

npm install @nativescript/ionic-portals

Ionic Portals 需要一个产品密钥才能使用。获取密钥很简单，只需前往 Ionic 仪表板并点击“获取访问权限”。

您现在可以在应用程序的引导文件中注册和设置您打算在应用程序中使用的所有门户（通常是 app.ts 或 main.ts）

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

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

  // Create as many Portals as you need to use in your app
  // Your app will look for a folder name matching the portal id you use here
  // Android: App_Resources/Android/src/main/asssets/webPortal
  // iOS: App_Resources/iOS/webPortal
  IonicPortalManager.create('webPortal')
})

// bootstrap your app here...

您现在可以在应用程序中的任何地方使用它，例如使用纯标记

<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)

<!-- use in any component -->
<IonicPortal id="webPortal"></IonicPortal>

它们与所有口味兼容（React、Vue、Svelte 等）。

创建一个 Ionic 微前端 Web 体验

如果您有一个现有的 Web 前端，您可以立即使用 IonicPortals。

为了清晰起见，我们将讨论使用 Ionic 的工具集创建微 Web 前端。

Ionic 包含一个 CLI 和 UI 工具包，提供了与流行框架的集成，例如 Angular、React 和 Vue，使您可以构建适合 IonicPortals 的绝佳 Web 体验

npm install -g @ionic/cli
ionic start

// You can choose to use the wizard if you'd like, it is super neat!
// We'll just use command line for this example:

> Use the app creation wizard? n

// You can use any framework you'd like, we'll just use Angular for example:

> Pick a framework! 😁

? Framework: (Use arrow keys)
❯ Angular | https://angular.io
  React   | https://legacy.reactjs.ac.cn
  Vue     | https://vuejs.ac.cn

// Use any name you'd like. For simplicity we'll use a name we plan to `id` the portal with in our NativeScrip tapp:

> ? Project name: ionicWebModal

// You can use any starter template you'd like. We'll use

> ? Starter template: (Use arrow keys)
  tabs         | A starting project with a simple tabbed interface
  sidemenu     | A starting project with a side menu with navigation in the content area
  blank        | A blank starter project
❯ list         | A starting project with a list
  my-first-app | An example application that builds a camera with gallery
  conference   | A kitchen-sink application that shows off all Ionic has to offer

cd ionicWebModal
// Ready!

您现在可以像往常一样开发此 Web 微前端，例如

ionic serve

在您的 NativeScript 应用程序中使用您的微前端 Web 体验

根据您选择用于创建 Ionic 应用程序的框架，以下步骤可能略有不同，但无论您使用哪种框架，您都需要获取到 NativeScript App_Resources 文件夹的相对文件路径位置。

例如，考虑以下项目文件夹位置，它们在您的系统上相互并列

/Users/me/Documents
  > ionicWebModal
  > nativescriptApp

现在，在 Angular 的 ionicWebModal 项目中，您可以打开 angular.json 并为 iOS 和 Android 添加构建配置

"configurations": {
  "portal-ios": {
    "outputPath": "../nativescriptApp/App_Resources/iOS/ionicWebModal"
  },
  "portal-android": {
    "outputPath": "../nativescriptApp/App_Resources/Android/src/main/assets/ionicWebModal"
  },
}

现在，只要您准备好部署或测试 NativeScript 应用程序，就可以使用正确的配置构建您的 Web 微前端。

npx ng build --configuration portal-ios
npx ng build --configuration portal-android

等等，这意味着我也可以在实时同步 NativeScript 应用程序的同时实时同步开发 IonicPortal 吗？！没错 😊 ... 我们将在后续文章中详细介绍，因为我们将在我们的 #ItsJustJavaScript 活动中，在接下来的两个月里以 Ionic 为主题。

在 NativeScript 构建中处理 Web 资源有很多方法，因此请随意探索最适合您的情况的任何方向。

我可以将 Capacitor 插件与 IonicPortal 一起使用吗？

是的，您将能够在 @nativescript/ionic-portals 1.0.1 发布后做到这一点，它依赖于以下两个拉取请求（请点赞）：

在后续文章中，我们将展示如何在任何 IonicPortal 中添加 Capacitor 插件。

将您的 IonicPortal 与 NativeScript 视图混合使用

只需使用 @nativescript/ionic-portals，您就可以将视图混合在一起，但是为了说明一些创意选项，让我们在模态窗口中打开一个 IonicPortal。

简单的模态视图设置（使用原生风格） - modals/ionic-portals-modal

<Page xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally" class="page"
  xmlns:ionic="@nativescript/ionic-portals">
  <GridLayout>
    <ionic:IonicPortal id="ionicWebModal">
    </ionic:IonicPortal>
  </GridLayout>
</Page>

一个视图，其中点击绑定到 openModal 会打开该模态窗口

openModal() {
  this.page.showModal('modals/ionic-portals-modal')
}

您可以在此分支上尝试此演示。

重要提示：您需要在此处添加您自己的 Portal API 密钥：https://github.com/NativeScript/plugins/blob/feat/ionic-portal-examples/apps/demo/src/app.ts#L11

运行演示

git clone https://github.com/NativeScript/plugins.git
git checkout feat/ionic-portal-examples

npm run setup

npm start
> focus.ionic-portals ENTER
// This will focus the workspace down to only the IonicPortal demo

npm start
> demo.ios
// or...
> demo.android

我可以使用 IonicPortal 创建一个完整的 NativeScript 应用程序吗？

当然可以。无论您最舒服的方式，只要能帮助您按时交付成果即可。