Java中使用webview内嵌vue页面

技术服务于业务,在什么情况下我们需要使用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 {@Overridepublic 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() {@Overridepublic 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(){//能够导出网站进行测试,abilityvar 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>

运行效果

Java中使用webview内嵌vue页面相关推荐

微信小程序webview内嵌H5页面缓存
微信小程序webview内嵌H5页面缓存参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...
微信小程序webview内嵌h5页面
微信官方文档web-view | 微信开放文档正式上线前准备(前期开发调试可以忽略) 首先登录小程序管理后台,把 web-view 直连的 h5 页面地添加到配置域名白名单中比如我想要小程序直连地 ...
微信小程序中嵌套html_微信小程序中使用 web-view 内嵌 H5 时，登录问题的处理方法...
在微信小程序的开发中,经常遇到需要使用内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎样与H5中的登录状态保持一致? 一般来说,后端开发同事多数会要求我们 ...
[微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转小程序与H5交互以上传文件为例微信小程序开放能力web-view使用之h5页面与小程序页面交互传值快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...
实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
React Native 内嵌h5页面(基于vue)的实现方案调研
React Native 是目前流行的跨平台移动应用开发框架之一.通过采用不同的方法进行混合移动应用开发,它不会生成原生 UI 组件,而是基于 React,React Native 是一个用于构建基于 ...
苹果状态栏HTML,webview内嵌的html页面，在ios系统上12以上版本和12以下版本状态栏效果不一样...
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] 重现步骤在vue ...
vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大
vue框架中使用iframe内嵌网页,并且双击实现网页全屏放大利用Iframe插入网页 <iframe ref="iframe" src="https://www ...
微信小程序web-view内嵌公众号网页分享功能实现
web-view嵌入网页分享,有二种分享情况 1.小程序分享出当前打开的页面 2.部分页面要求,分享指定页面,而不是当前的页面以下是代码部分一.web-view内嵌公众号网页 ...

Java中使用webview内嵌vue页面

Java中使用webview内嵌vue页面相关推荐

最新文章

热门文章