跳到主要内容
版本：v3

Web/PWA 平台实现

在设计插件 API 时，我们发现 Web 平台已经支持屏幕方向功能（当然，移动设备除外）。您可能会问，为什么我们的插件还需要 Web 实现……难道不能通过编程方式检测用户是否在 Web 端，然后使用 Screen Orientation Web API，否则就使用插件吗？

Web Native 应用程序的理念是“一次编写，随处运行”。这同样适用于插件；使用 Capacitor 插件的开发者应该能够使用相同的插件类和方法，并让它们在所有平台上都有相应的实现。

因此，作为优秀的开发者，我们将把 Screen Orientation Web API 包装在 ScreenOrientation 插件的 Web 实现中。

扩展 Capacitor 的 WebPlugin 类​

打开新文件 src/plugins/screen-orientation/web.ts。我们将在此文件中编写 ScreenOrientation 插件的 Web 实现。

首先声明 ScreenOrientationWeb 类，并让它继承 WebPlugin：

import { WebPlugin } from '@capacitor/core';
import type { ScreenOrientationPlugin } from './definitions';

export class ScreenOrientationWeb extends WebPlugin {
  constructor() {
    super();
  }
}

Capacitor 的 WebPlugin 类包含了通知插件监听器的逻辑，我们将利用它在屏幕方向发生变化时告知监听器。当 Screen Orientation Web API 的 change 事件触发时，我们通知所有监听器。更新构造函数如下：

constructor() {
   super();
   window.screen.orientation.addEventListener("change", () => {
     const type = window.screen.orientation.type;
     this.notifyListeners("screenOrientationChange", { type });
   });
 }

WebPlugin 类已经实现了 ScreenOrientationPlugin 接口中定义的 addListener() 和 removeAllListeners() 方法。使用这些方法无需额外工作。

实现剩余方法​

现在完成 ScreenOrientationPlugin 接口的实现。首先调整类定义，使其真正实现该接口：

export class ScreenOrientationWeb
  extends WebPlugin
  implements ScreenOrientationPlugin
{

然后将剩余方法作为 ScreenOrientationWeb 类的一部分实现：

 async orientation(): Promise<{ type: OrientationType }> {
   return { type: window.screen.orientation.type };
 }

 async lock(opts: { orientation: OrientationLockType }): Promise<void> {
   await window.screen.orientation.lock(opts.orientation);
 }

 async unlock(): Promise<void> {
   window.screen.orientation.unlock();
 }

注册 Web 实现​

要将 ScreenOrientationWeb 注册为我们插件的 Web 实现，我们需要使用 registerPlugin() 的第二个输入参数。打开 src/plugins/screen-orientation/index.ts，并按如下方式更新 ScreenOrientation 变量的声明：

const ScreenOrientation = registerPlugin<ScreenOrientationPlugin>(
  'ScreenOrientation',
  {
    web: () => import('./web').then(m => new m.ScreenOrientationWeb()),
  },
);

测试一下！​

测试 Web 实现。使用 ionic serve 启动您的应用程序，然后您可以使用浏览器的开发者工具模拟移动设备在竖屏和横屏方向下的显示效果。“旋转我的设备”按钮可能无法正常工作，因为 Web 对 window.screen.orientation.lock() 的支持有限，但您应该能够通过开发者工具手动旋转方向来看到不同的设计效果。

一个平台已经实现，还有两个平台待完成！在深入 iOS 和 Android 代码之前，我们应该考虑如何设计和抽象代码。让我们在下一步中回顾一些模式：代码抽象模式。

Contents

编辑此页