浏览器下载地址
GitHUb源码
1.Webview空白问题
问题形容：
一下代码webview显示为空白页
<webview class="indexWebview" width='200' height='300' style="display: inline-flex;" src='http://www.baidu.com'></webview>解决方案
const mainWindow = new BrowserWindow({ webPreferences: { webviewTag: true, } })2.Webview引入的网页无奈失常跳转页面
<template> <div class='indexInndex'> <webview class="indexWebview" ref="webViews" style="display: inline-flex;" src='http://www.baidu.com'></webview> </div></template><script>export default { data(){ return { webViews: null } }, mounted(){ this.goLink() }, methods:{ async goLink(){ this.webViews = this.$refs.webViews this.webViews.addEventListener('new-window', async (e) => { const { protocol } = require('url').parse(e.url) this.webViews.src = e.url // 通过这种形式 管制页面跳转 }); } }}</script>3. 在Vue实例上挂载Electron对象
vue+electron我的项目，在vue中应用electron的模块呈现：Uncaught ReferenceError: __dirname is not defined
解决方案
// vue.config.jsmodule.exports = { pluginOptions: { electronBuilder: { nodeIntegration: true } }}4.Webview 加载程序
1.did-start-loading 页面开始加载
2.load-commit 主页面文档加载
3.page-title-updated title
4.dom-ready 主页面 dom 加载实现
5.load-commit frame文档加载
6.did-frame-finish-load frame 加载实现
7.did-frame-finish-load 最初一个是主框架frame 加载实现
8.did-finish-load 页面加载实现
9.page-favicon-updated 网页 icon
10.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#webviewgeturl let isLoading = this.webViews.isLoading() // 是否加载实现 let getURL = this.webViews.getURL() // 访客页面URL let getTitle = 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(' frame文档加载') }) this.webViews.addEventListener('did-frame-finish-load',() => { console.log('frame 加载实现') console.log('最初一个是主框架frame 加载实现') }) this.webViews.addEventListener('did-finish-load ',() => { console.log('最初一个是主框架frame 加载实现') }) this.webViews.addEventListener('page-favicon-updated',() => { console.log(' 网页 icon') }) this.webViews.addEventListener('did-stop-loading',() => { console.log('页面进行加载') })webView关上控制台
// 左侧openDevTools({mode:'left'})// 右侧openDevTools({mode:'right'})// 上侧openDevTools({mode:'top'})// 下侧openDevTools({mode:'bottom'})// 永恒拆散openDevTools({mode:'detach'})// 拆散（能够合并）openDevTools({mode:'undocked'})// 敞开控制台closeDevTools()复制文本
// 在渲染过程中复制 须要设置 nodeIntegration:trueconst win = new BrowserWindow({ width: 800, height: 600, webPreferences: { webviewTag: true, nodeIntegration: true, contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION } })// 写入文本 const clipboard = require('electron').clipboard;clipboard.writeText('测试文本');Electron打包
装置依赖
cnpm install -g electron-buildercnpm install -g electron-package打包
electron-builder打包常见参数阐明
"build": { "appId": "com.example.app", // 应用程序id "productName": "测试", // 利用名称 // 设置为 true 能够把本人的代码合并并加密 "asar": true, "directories": { "buildResources": "build", // 构建资源门路默认为build "output": "dist" // 输入目录 默认为dist }, "mac": { "category": "public.app-category.developer-tools", // 应用程序类别 "target": ["dmg", "zip"], // 指标包类型 "icon": "build/icon.icns" // 图标的门路 }, "dmg": { "background": "build/background.tiff or build/background.png", // 背景图像的门路 "title": "题目", "icon": "build/icon.icns" // 图标门路 }, "win": { // 打包成一个独立的 exe 安装程序 // 'target': 'nsis', // 这个意思是打进去32 bit + 64 bit的包，然而要留神：这样打包进去的安装包体积比拟大，所以倡议间接打32的安装包。 // 'arch': [ // 'x64', // 'ia32' // ] "target": ["nsis","zip"] // 指标包类型 }, "nsis": { // 是否一键装置，倡议为 false，能够让用户点击下一步、下一步、下一步的模式安装程序，如果为true，当用户双击构建好的程序，主动安装程序并关上，即：一键装置（one-click installer） "oneClick": false, // 容许申请晋升。 如果为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" },