关于electron:使用ELectron的Webview开发一个不跨域的PC浏览器

浏览器下载地址

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.js
module.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:true
const 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-builder
cnpm 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"
  },