在 Lynxtron 中使用 webview

<webview> 是 Lynx 中用于嵌入 Web 内容的元素。它的属性、事件和方法由 Lynx 元素 API 定义；本页只介绍在 Lynxtron 中如何通过官方维护的 npm 包引入这一能力。

考虑到 CEF 和 WebView 相关产物会显著增加包体积，Lynxtron 没有把 <webview> 默认内置到运行时中，而是以官方维护的 Lynx 原生能力库形式提供；其他官方 Lynx 元素仍按常规内置，可直接使用。

Lynxtron 官方维护的 @lynx-js/cef-webview 包提供了基于 Chromium Embedded Framework (CEF) 的原生视图能力。你可以像消费其他 Lynx 原生能力库一样安装这个包，在 Lynxtron 宿主进程中加载它的 Lynxtron 包入口，在主进程中初始化 CEF，然后使用 <webview> 这个 Lynx 元素。

原生侧的 <webview> 元素由包内 C++ library 通过 LYNX_REGISTER_ELEMENT(...) 注册。应用代码只需要确保 library 已加载并调用 initialize()，不需要调用更底层的 Lynx 注册 API。

安装 npm 包

npm

yarn

pnpm

bun

deno

npm install @lynx-js/cef-webview

启用 AutoLink

在 Lynxtron 宿主侧 Rsbuild/Rspack 配置中通过 pluginLynxtron() 启用 AutoLink：

import { pluginLynxtron } from '@lynx-js/lynxtron-dev-plugins/rspack';

export default {
  target: 'electron-main',
  plugins: [
    pluginLynxtron({
      isDev: process.env.NODE_ENV === 'development',
      entry: './dist/desktop',
    }),
  ],
};

AutoLink 是推荐的宿主 bundle 侧 Lynx 原生能力库加载方式。底层模型仍然是静态注册加 Lynxtron 宿主进程加载包入口或平台 .node 产物。

在主进程初始化 CEF

在创建 LynxWindow 或加载 Lynx bundle 之前导入包并初始化 CEF：

import { app, LynxWindow } from '@lynx-js/lynxtron';
import cefWebview from '@lynx-js/cef-webview/lynxtron';

app.whenReady().then(() => {
  cefWebview.initialize();

  const win = new LynxWindow({
    width: 1200,
    height: 800,
  });

  win.loadFile('main.lynx.bundle');
});

使用 Lynx 元素

原生库加载且主进程完成 CEF 初始化后，就可以使用 <webview> 这个 Lynx 元素。

export function App() {
  return (
    <view style={{ width: '100%', height: '100%' }}>
      <webview
        src="https://www.example.com"
        style={{ width: '100%', height: '100%' }}
      />
    </view>
  );
}

关于 <webview> 支持的属性、事件和方法，见 <webview> API。

打包注意事项

@lynx-js/cef-webview 包含平台相关的原生库和 CEF 二进制产物。如果使用 AutoLink，打包宿主构建时保持它启用；如果使用自定义加载或打包流程，需要确保 Lynxtron 包入口、原生 .node 产物和 CEF 产物被包含进应用包。

#在 Lynxtron 中使用 webview

#安装 npm 包

#启用 AutoLink

#在主进程初始化 CEF