前言
根据上篇的文章，会发现，其中用到的Browser方法，他只能用于IE浏览器内核，IE？？？？
IE？？？还是算了，我要弄基于谷歌浏览器的（IE不支持Vue.....）运行不显示....
一：创建Vue.js前端应用
首先，您需要创建一个Vue.js前端应用。在这个示例中，我们将一个简单的Vue组件嵌入到JCEF浏览器中。假设您已经创建了Vue.js应用并将其打包到一个名为"dist"的文件夹中。
创建Java应用程序：
在Java应用程序中，您需要使用JCEF和SWT来创建窗口化的浏览器界面。以下是一个示例代码，展示如何实现此过程：
1. import org.eclipse.swt.SWT; 2. import org.eclipse.swt.browser.Browser; 3. import org.eclipse.swt.widgets.Display; 4. import org.eclipse.swt.widgets.Shell; 5. 6. import org.cef.CefApp; 7. import org.cef.CefClient; 8. import org.cef.CefSettings; 9. import org.cef.browser.CefBrowser; 10. import org.cef.handler.CefLifeSpanHandlerAdapter; 11. 12. public class JCEFExample { 13. 14. public static void main(String[] args) { 15. Display display = new Display(); 16. Shell shell = new Shell(display); 17. shell.setLayout(new FillLayout()); 18. 19. // Initialize CEF 20. CefSettings settings = new CefSettings(); 21. CefApp cefApp = CefApp.getInstance(settings); 22. CefClient client = cefApp.createClient(); 23. 24. // Create a CEF browser 25. CefBrowser cefBrowser = client.createBrowser("about:blank", false, false); 26. Browser browser = new Browser(shell, SWT.NONE); 27. browser.addDisposeListener(e -> cefBrowser.close(true)); 28. 29. // Load the Vue.js app 30. browser.setText("<html><body><div id=\"app\"></div></body></html>"); 31. 32. // Embed the Vue.js app in the CEF browser 33. cefBrowser.getClient().addLifeSpanHandler(new CefLifeSpanHandlerAdapter() { 34. @Override 35. public void onAfterCreated(CefBrowser browser) { 36. cefBrowser.executeJavaScript("document.getElementById('app').innerHTML = '<app></app>';"); 37. } 38. }); 39. 40. shell.open(); 41. 42. while (!shell.isDisposed()) { 43. if (!display.readAndDispatch()) { 44. display.sleep(); 45. } 46. } 47. 48. display.dispose(); 49. } 50. }
在这个示例中，我们创建了一个SWT窗口并嵌入了一个CEF浏览器。通过执行JavaScript代码，我们将Vue.js应用嵌入到了浏览器界面中。请注意，实际应用中可能需要更多的配置和错误处理。
二：在Vue.js中实现与Java的交互
您可以在Vue.js应用中使用JavaScript来与Java进行交互。这里展示一个简单的示例，通过按钮点击来触发与Java的交互：
1. <template> 2. <div> 3. <button @click="callJava">Call Java</button> 4. </div> 5. </template> 6. 7. <script> 8. export default { 9. methods: { 10. callJava() { 11. // 调用Java方法 12. window.javaInterop.showDialog("Hello from Vue.js!"); 13. } 14. } 15. }; 16. </script>
在上述示例中，点击按钮将调用一个名为"showDialog"的Java方法，从而实现了JavaScript与Java之间的交互。
请注意，上述示例是一个简化的演示，实际情况中可能涉及更多的配置、错误处理和安全性考虑。此外，确保您已经正确配置了JCEF和SWT环境，以及正确地将Vue.js应用嵌入到浏览器界面中。
