Browser Download address

Making the source code

1.Webview blank problem

The following code webview shows a blank page

 <webview class="indexWebview" width='200' height='300' style="display: inline-flex;" src='http://www.baidu.com'></webview>
Copy the code

The solution

const mainWindow = new BrowserWindow({
    webPreferences: {
      webviewTag: true,}})Copy the code

2. The page imported by the Webview cannot be redirected

<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 // Control the page jump in this way}); }}}</script>
Copy the code

3. Mount the Electron object on the Vue instance

Vue +electron project, in vUE using the electron module appears: Uncaught ReferenceError: __dirname is not defined solution

// vue.config.js
module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true}}}Copy the code

4.Webview loading sequence

1. The did-start-loading page starts to load

2. Load-commit Loads documents on the home page

3.page-title-updated title

4. Dom-ready The DOM is loaded on the home page

5. Load-commit frame Document loading

6. Did-frame-finish-load Frame loading is complete

7. Did-frame-finish -load the main frame is finished loading

8. Did-finish-load The page is loaded

9. Page – the favicon – updated page icon

10. The did-stop-loading page stops loading

this.webViews.addEventListener('new-window'.async (e) => {
                const { protocol } = require('url').parse(e.url)
            });
            this.webViews.addEventListener('dom-ready'.() = > {
               console.log('Home page DOM loading completed')
                // https://www.electronjs.org/zh/docs/latest/api/webview-tag#webviewgeturl
               let isLoading = this.webViews.isLoading() // Whether the load is complete
               let getURL = this.webViews.getURL() // Visitor page URL
               let getTitle = this.webViews.getTitle() // Visitor page title
                    console.log(getTitle)
                    // this.webViews.openDevTools()
                // this.webviews.stop () // stop
                / / this. WebViews. Reload () / / refresh this. WebViews. ReloadIgnoringCache / / refresh and ignore the cache
                // this.webviews.cangoback (
                / / this. WebViews. CanGoForward ()/can/forward canGoToOffset (6) / / can you forward to
                / / this. WebViews. ClearHistory () / / clear history
                 
            })

            this.webViews.addEventListener('did-start-loading'.() = > {
                console.log('Page starts loading')})this.webViews.addEventListener('load-commit'.() = > {
                console.log('Main page document load')})this.webViews.addEventListener('page-title-updated'.() = > {
                console.log('page-title-updated')})this.webViews.addEventListener('load-commit'.() = > {
                console.log('Frame document load')})this.webViews.addEventListener('did-frame-finish-load'.() = > {
                console.log('Frame load completed')
                console.log('The last one is the main frame is loaded.')})this.webViews.addEventListener('did-finish-load '.() = > {
                console.log('The last one is the main frame is loaded.')})this.webViews.addEventListener('page-favicon-updated'.() = > {
                console.log('page icon')})this.webViews.addEventListener('did-stop-loading'.() = > {
                console.log('Page stopped loading')})Copy the code

WebView opens the console

/ / on the left side of the
openDevTools({mode:'left'})
/ / on the right side
openDevTools({mode:'right'})
/ / upper
openDevTools({mode:'top'})
/ / the underside
openDevTools({mode:'bottom'})
// Permanent separation
openDevTools({mode:'detach'})
// Split (can merge)
openDevTools({mode:'undocked'})

// Close the console
closeDevTools()
Copy the code

Copy the text

// Copy in the rendering process requires setting nodeIntegration:true
const win = new BrowserWindow({
    width: 800.height: 600.webPreferences: {
      webviewTag: true.nodeIntegration: true.contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })
// Write text
const clipboard = require('electron').clipboard;
clipboard.writeText('Test text');
Copy the code

Electron packaging

Install dependencies

cnpm install -g electron-builder
cnpm install -g electron-package
Copy the code

packaging

electron-builder
Copy the code

This section describes common packaging parameters

"build": {
    "appId": "com.example.app".// Application id
    "productName": "Test".// Application name
    // Set to true to merge and encrypt your own code
  	"asar": true."directories": {
        "buildResources": "build".// The default build resource path is build
        "output": "dist" The output directory is dist by default
    },
    "mac": {
        "category": "public.app-category.developer-tools".// Application category
        "target": ["dmg"."zip"].// Target package type
        "icon": "build/icon.icns" // The path of the icon
    },
    "dmg": {
        "background": "build/background.tiff or build/background.png".// Background image path
        "title": "Title"."icon": "build/icon.icns" // Icon path
    },
    "win": {
     // Package as a separate exe installer
        // 'target': 'nsis',
        // This means to print a 32-bit + 64-bit package, but note that this package is a large size, so it is recommended to print a 32-bit package.
        // 'arch': [
        // 'x64',
        // 'ia32'
        // ]
        "target": ["nsis"."zip"] // Target package type
    },
    "nsis": {
    // One-click installer or not, false is recommended, the user can click next, next, next to install the program, if true, when the user double clicks the built program, the program will be automatically installed and opened, that is: one-click installer.
    "oneClick": false.// Allow request promotion. If false, the user must restart setup with the promoted permissions.
    "allowElevation": true.The recommended value is true. Whether to allow users to change the installation directory. The default value is no
    "allowToChangeInstallationDirectory": true.// Install icon
    "installerIcon": "build/installerIcon_120.ico".// Uninstall the icon
    "uninstallerIcon": "build/uninstallerIcon_120.ico".// Install header icon
    "installerHeaderIcon": "build/installerHeaderIcon_120.ico".// Create a desktop icon
    "createDesktopShortcut": true.// Create start menu icon
    "createStartMenuShortcut": true.// The license. TXT file in the electron file is in a format other than GBK or UTF-8. After the license. TXT file is written in the electron file, convert it to ANSI
    "license": "LICENSE.txt"
  },

Copy the code