前有Electron,后有Tauri,而javaFx的webview的能力又有所不足,怎么才能打通java+前端桌面应用的任督二脉,jcef是一个不错的选择。
快速创建创建一个jecf应用
MainFrame.java
// MainFrame.java
package com.zzc;
import java.awt.Dimension;
import java.awt.Toolkit;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import javax.swing.JFrame;
import org.cef.CefApp;
import org.cef.CefClient;
import org.cef.browser.CefBrowser;
import org.cef.browser.CefRendering;
import com.jetbrains.cef.JCefAppConfig;
import java.awt.BorderLayout;
public class MainFrame extends JFrame {
private static final long serialVersionUID = 2541887783679247552L;
private static volatile MainFrame instance;
// private String url = "https://map.baidu.com/";
private String url = System.getProperty("user.dir") + "/dist/index.html";
private CefApp app = null;
private CefClient client = null;
private CefBrowser browser = null;
public MainFrame() {
var args = JCefAppConfig.getInstance().getAppArgs();
String[] args1= new String[] {
"--disable-web-security"//关闭同源策略,允许跨域
,"--disable-site-isolation-trials" //关闭站点隔离策略,允许跨域
};
var settings = JCefAppConfig.getInstance().getCefSettings();
settings.cache_path = System.getProperty("user.dir") + "/context";
// 获取CefApp实例
CefApp.startup(args1);
app = CefApp.getInstance(args1, settings);
// 创建客户端实例
client = app.createClient();
// 创建浏览器实例
browser = client.createBrowser(url, CefRendering.DEFAULT, true);
this.getContentPane().setLayout(new BorderLayout(0, 0));
this.getContentPane().add(browser.getUIComponent(), BorderLayout.CENTER);
this.setTitle("JetBrains Runtime - JCEF");
this.setSize(new Dimension(1280, 720));
this.setMinimumSize(new Dimension(1150, 650));
this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
this.setLocation((Toolkit.getDefaultToolkit().getScreenSize().width - this.getWidth()) / 2,
(Toolkit.getDefaultToolkit().getScreenSize().height - this.getHeight()) / 2);
this.setVisible(true);
this.setResizable(true);
this.addWindowListener(new WindowAdapter() {
@Override
public void windowClosing(WindowEvent e) {
app.dispose();
System.exit(0);
}
});
}
public static MainFrame getIstance() {
if (instance == null) {
synchronized (MainFrame.class) {
if (instance == null) {
instance = new MainFrame();
}
}
}
return instance;
}
}
Main.java
package com.zzc;
import java.net.URL;
// 按两次 Shift 打开“随处搜索”对话框并输入 `show whitespaces`,
// 然后按 Enter 键。现在,您可以在代码中看到空格字符。
public class Main {
public static void main(String[] args) {
MainFrame.getIstance();
// 当文本光标位于高亮显示的文本处时按 Alt+Enter,
// 可查看 IntelliJ IDEA 对于如何修正该问题的建议。
String url = System.getProperty("user.dir") + "";
System.out.println(url);
}
}
pox.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.zzc</groupId>
<artifactId>jcef01</artifactId>
<version>1.0-SNAPSHOT</version>
<properties>
<maven.compiler.source>17</maven.compiler.source>
<maven.compiler.target>17</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<java.version>17.0.7</java.version>
</properties>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.11.0</version>
<configuration>
<source>${java.version}</source>
<target>${java.version}</target>
</configuration>
</plugin>
</plugins>
<resources>
<resource>
<directory>src/main/resources</directory>
<filtering>true</filtering>
</resource>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
<include>**/*.json</include>
<include>**/*.ftl</include>
</includes>
</resource>
</resources>
</build>
</project>
效果预览
问题点总结
jdk选择:jbrsdk_jcef-17(目前最新版是jbrsdk_jcef-18)
java 语言级别
pom.xml配置修改
见pox.xml代码
加载本地网页
java代码见MainFrame
前端项目配置修改
- vite 项目
配置
base: './'
- vue-cli 项目配置
配置
publicPath: './'