技术服务于业务,在什么情况下我们需要使用webview去内嵌vue页面呢。众所周知webview作为一个组件,可以看成是一个微型浏览器内核。那么如果在我们的程序中集成webview,那么我们的程序是不是也可以看成是一个定制版本的微型浏览器呢。如果只是纯粹的web应用也就是不需要参与过多的与本地化资源交互,我们只需要在浏览器中使用前端就可以了。虽说B/S模式已经大行其道但是毕竟还是得益于浏览器本身丰富的能力,当遇到一些特殊的需求,比如说在浏览器中调用本机程序等等,此时浏览器本身的能力已经无法满足需求的时候,我们就需要去拓展浏览器的能力。虽然现在h5已经足够强大,但是比如说使用h5在不使用第三方支持的情况下实现在线编辑word、excel等功能还是不那么容易的。当然等h6问世的时候默认集成人脸识别也说不定。
一方面可以使用浏览器开发者预留的拓展接口,比如说已经渐渐没落的IE浏览器中的ActiveX,谷歌浏览器45版本以下的npapi都可以看成是浏览器本地能力拓展的一种体现。另一方面我们可以自己整合现有资源去实现一个新“浏览器”。当然,视困难程度我们一般会使用自己最擅长的开发语言去实现。在Java中集成webview有什么好处呢,一方面拥有了使用前端脚本、页面的能力、一方面又拥有了与本地交互的能力。缺点就是一旦这样做实际上就变成了一个C/S结构的程序,就面临着更新升级部署困难等C/S共有的缺点,也只适合在一些特定的应用场景下使用。个人更偏向于使用cdn形式使用vue。话不多说,直接上代码。
LocalMain.java
package org.lbz;
import javafx.application.Application;
import javafx.concurrent.Worker;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebEvent;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import org.lbz.util.JavaCaller;
public class LocalMain extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
try {
final WebView browser = new WebView();
browser.setMinWidth(1200);
final WebEngine webEngine = browser.getEngine();
ScrollPane scrollPane = new ScrollPane();
scrollPane.setContent(browser);
webEngine.getLoadWorker().stateProperty()
.addListener((obs, oldValue, newValue) -> {
if (newValue == Worker.State.SUCCEEDED) {
netscape.javascript.JSObject o = (netscape.javascript.JSObject) webEngine.executeScript("window");
o.setMember("sout",System.out);
o.setMember("javaCaller", JavaCaller.instance);
System.out.println("SUCCEEDED Inject Java Object to browser");
}else{
if(newValue == Worker.State.READY){
netscape.javascript.JSObject o = (netscape.javascript.JSObject) webEngine.executeScript("window");
}
}
});
webEngine.setJavaScriptEnabled(true);
browser.getEngine().setOnAlert((WebEvent<String> wEvent) -> {
System.out.println("Alert Event - Message: " + wEvent.getData());
});
com.sun.javafx.webkit.WebConsoleListener.setDefaultListener(new com.sun.javafx.webkit.WebConsoleListener() {
@Override
public void messageAdded(WebView webView, String message, int lineNumber, String sourceId) {
System.out.println("Console: " + message + " [" + sourceId + ":" + lineNumber + "] ");
}
});
StringBuilder sb = new StringBuilder();
browser.setContextMenuEnabled(true);
webEngine.load("file:///D:\\BaiduNetdiskDownload\\JavaFormFx\\src\\main\\resources\\index2.html");
Scene scene = new Scene(new javafx.scene.Group(),1210,800);
scene.setRoot(scrollPane);
primaryStage.setScene(scene);
primaryStage.show();
primaryStage.setTitle("java内嵌vue");
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args){
launch(args);
}
}
JavaCaller.java
package org.lbz.util;
import javax.swing.*;
import javax.swing.filechooser.FileSystemView;
import java.io.File;
public class JavaCaller{
public static JavaCaller instance = new JavaCaller();
public void readFile(netscape.javascript.JSObject obj,netscape.javascript.JSObject callback){
String path = this.chooseFile();
callback.call("call",this,path);
}
public void readDirectory(netscape.javascript.JSObject obj,netscape.javascript.JSObject callback){
String path = this.chooseDirectory();
callback.call("call",this,path);
}
public String chooseFile(){
int result = 0;
File file = null;
String path = null;
JFileChooser fileChooser = new JFileChooser();
FileSystemView fsv = FileSystemView.getFileSystemView();
fileChooser.setCurrentDirectory(new File("d:\\"));
fileChooser.setDialogTitle("请选择要上传的文件...");
fileChooser.setApproveButtonText("确定");
fileChooser.setFileSelectionMode(JFileChooser.FILES_ONLY);
result = fileChooser.showOpenDialog(null);
if(JFileChooser.APPROVE_OPTION == result) {
path=fileChooser.getSelectedFile().getPath();
}
return path;
}
public String chooseDirectory(){
int result = 0;
File file = null;
String path = null;
JFileChooser fileChooser = new JFileChooser();
FileSystemView fsv = FileSystemView.getFileSystemView();
fileChooser.setCurrentDirectory(new File("d:\\"));
fileChooser.setDialogTitle("请选择要上传的文件夹...");
fileChooser.setApproveButtonText("确定");
fileChooser.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);
result = fileChooser.showOpenDialog(null);
if(JFileChooser.APPROVE_OPTION == result) {
path=fileChooser.getSelectedFile().getPath();
}
return path;
}
}
index2.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="elementUI/element.css" />
<meta charset="UTF-8" />
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="elementUI/element.js"></script>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function init(){
//能够导出网站进行测试,ability
var DGList = Vue.extend({
template: '<el-form ref="form" :model="form" label-width="80px">\n' +
' <el-form-item label="活动名称">\n' +
' <el-input v-model="form.name"></el-input>\n' +
' </el-form-item>\n' +
' <el-form-item label="活动区域">\n' +
' <el-select v-model="form.region" placeholder="请选择活动区域">\n' +
' <el-option label="区域一" value="shanghai"></el-option>\n' +
' <el-option label="区域二" value="beijing"></el-option>\n' +
' </el-select>\n' +
' </el-form-item>\n' +
' <el-form-item label="活动时间">\n' +
' <el-col :span="11">\n' +
' <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>\n' +
' </el-col>\n' +
' <el-col class="line" :span="2">-</el-col>\n' +
' <el-col :span="11">\n' +
' <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>\n' +
' </el-col>\n' +
' </el-form-item>\n' +
' <el-form-item label="即时配送">\n' +
' <el-switch v-model="form.delivery"></el-switch>\n' +
' </el-form-item>\n' +
' <el-form-item label="活动性质">\n' +
' <el-checkbox-group v-model="form.type">\n' +
' <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n' +
' <el-checkbox label="地推活动" name="type"></el-checkbox>\n' +
' <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n' +
' <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n' +
' </el-checkbox-group>\n' +
' </el-form-item>\n' +
' <el-form-item label="特殊资源">\n' +
' <el-radio-group v-model="form.resource">\n' +
' <el-radio label="线上品牌商赞助"></el-radio>\n' +
' <el-radio label="线下场地免费"></el-radio>\n' +
' </el-radio-group>\n' +
' </el-form-item>\n' +
' <el-form-item label="活动形式">\n' +
' <el-input type="textarea" v-model="form.desc"></el-input>\n' +
' </el-form-item>\n' +
' <el-form-item>\n' +
' <el-button type="primary" @click="onSubmit">立即创建</el-button>\n' +
' <el-button type="primary" @click="openFile">打开文件</el-button>\n' +
' <el-button>取消</el-button>\n' +
' </el-form-item>\n' +
'</el-form>',
data: function () {
var target = this;
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
created: function () {
},
mounted: function () {
},
methods:{
openFile(){
javaCaller.readFile({},function (a) {
console.log('readfile:'+a);
});
},
handleClose(done) {
},
onSubmit(){
}
},
props: ['name']
});
var dl = new DGList({propsData: {name: 'dear_mr'}}).$mount();
//这地方只能用append
$('#app').append(dl.$el);
}
</script>
</head>
<body οnlοad="init();">
<div id="app">
</div>
</body>
</html>
运行效果