使用ELectron的Webview开发非跨域PC浏览器
浏览器下载地址GitHUb源码1.Webview空白问题描述:以下代码webview显示为空白页解决方案constmainWindow=newBrowserWindow({webPreferences:{webviewTag:true,}})2.Webview引入的网页无法正常跳转页面。
3.在Vue实例上挂载Electron对象vue+electron项目,Vue中使用electron的模块出现:UncaughtReferenceError:__dirnameisnotdefinedSolution//vue.config.jsmodule.exports={pluginOptions:{electronBuilder:{nodeIntegration:true}}}4.webview加载顺序1.did-start-loading页面开始加载2.load-commit主页面文档加载3.page-title-updatedtitle4.dom-ready主页面dom加载完成5.load-commit框架文件加载6.did-frame-finish-load框架加载完成7.did-frame-finish-load最后一个是主框架框架加载完成8.did-finish-load页面loadingcompleted9.page-favicon-updated网页icon10.did-stop-loading页面停止加载this.webViews.addEventListener('new-window',async(e)=>{const{protocol}=require('url').parse(e.url)});this.webViews.addEventListener('dom-ready',()=>{console.log('主页面dom加载完毕')//https://www.electronjs.org/zh/docs/latest/api/webview-tag#webviewgeturlletisLoading=this.webViews.isLoading()//是否加载完成letgetURL=this.webViews.getURL()//访客页面URLletgetTitle=this.webViews.getTitle()//访客页面标题console.log(getTitle)//this.webViews.openDevTools()//this.webViews.stop()//停止//this.webViews.reload()//刷新this.webViews.reloadIgnoringCache//刷新并忽略缓存//this.webViews.canGoBack()//可以返回//this.webViews.canGoForward()//可以前进canGoToOffset(6)//可以前进//this.webViews.clearHistory()//清除历史})this.webViews.addEventListener('did-start-loading',()=>{console.log('页面开始加载')})this.webViews.addEventListener('load-commit',()=>{console.log('主页文档加载')})this.webViews.addEventListener('page-title-updated',()=>{console.log('page-title-updated')})this.webViews.addEventListener('load-commit',()=>{console.log('框架文档Load')})this.webViews.addEventListener('did-frame-finish-load',()=>{console.log('框架加载完成')console.log('最后一个是主框架框架加载complete')})this.webViews.addEventListener('did-finish-load',()=>{console.log('最后一个是主框架frame加载')})this.webViews.addEventListener('page-favicon-updated',()=>{console.log('网页图标')})this.webViews.addEventListener('did-stop-loading',()=>{console.log('页面停止加载')})webView打开控制台//左侧openDevTools({mode:'left'})//右侧openDevTools({mode:'right'})//上侧openDevTools({mode:'top'})//lowersideopenDevTools({mode:'bottom'})//永久分离openDevTools({mode:'detach'})//Detach(可合并)openDevTools({mode:'undocked'})//关闭控制台closeDevTools()Copytext//渲染过程中复制需要设置nodeIntegration:trueconstwin=newBrowserWindow({width:800,height:600,webPreferences:{webviewTag:true,nodeIntegration:true,contextIsolation:!process.env.ELECTRON_NODE_INTEGRATION}})//写入文本constclipboard=require('electron').clipboard;clipboard.writeText('testtext');electron打包安装依赖cnpminstall-gelectron-buildercnpminstall-gelectron-packagepackagingelectron-builderpackaging常用参数说明"build":{"appId":"com.example.app",//applicationid"productName":"Test",//应用名称//设置为true合并加密自己的代码"asar":true,"directories":{"buildResources":"build",//构建资源路径默认对于构建"output":"dist"//输出目录默认为dist},"mac":{"category":"public.app-category.developer-tools",//applicationcategory"target":["dmg","zip"],//目标包类型"icon":"build/icon.icns"//图标路径},"dmg":{"background":"build/background.tifforbuild/background.png",//背景图片路径"title":"title","icon":"build/icon.icns"//图标路径},"win":{//打包成独立的exe安装程序//'target':'nsis',//意思是打印一个32位+64位的包,但是要注意:这样打包的安装包比较大,所以建议直接打32位安装包//'arch':[//'x64',//'ia32'//]"target":["nsis","zip"]//目标包类型},"nsis":{//一键安装,建议为false,让用户点击next,next,next安装程序,如果为true,当用户双击构建的程序时,程序会自动安装安装并打开,即:One-clickinstaller"oneClick":false,//Allowrequestingelevation.如果为false,用户必须以提升的权限重新启动安装程序。"allowElevation":true,//允许修改安装目录,建议为true,是否允许用户更改安装目录,默认不允许"allowToChangeInstallationDirectory":true,//安装图标"installerIcon":"build/installerIcon_120.ico",//卸载图标"uninstallerIcon":"build/uninstallerIcon_120.ico",//安装过程中的头像"installerHeaderIcon":"build/installerHeaderIcon_120.ico",//创建桌面图标"createDesktopShortcut":true,//创建开始菜单图标"createStartMenuShortcut":true,//electron中LICENSE.txt要求的格式不是GBK或UTF-8。LICENSE.txt写好后需要转成ANSI"license":"LICENSE.txt"},