使用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"
  },