I. Introduction
The project had intended to adopt B / S structure to do, open the browser URL or so inconvenient for the user;
Second, the use of electron integrated desktop applications
Project itself is developed using vue-cli after before using electron, the project itself needs to be packed open index.html can display the web page because they are new to take a direct official demo were packaged.
1. Cloning official Demo: git clone https://github.com/electron/electron-quick-start
2. cd Electron-Quick-Start-> npm install-> npm Start to it will be able to run the demo
3. own projects packaged dist file index.html and static files into electron-quick-start (with directory) file and re-start it, as operating results
4. Add the following code package.json
"pack":"electron-packager . 'health-terminal' --platform=win32 --arch=x64 --out=./out --asar --app-version=0.0.1"
Plug-in installation package
cnpm install electron --save-dev //安装electron cnpm install electron-packager --save-dev // this is labeled as plug-in exe file, and then use, download well in advance
Run npm run pack Packaging Success
npm run pack
File Structure
5. It should be noted electron network in the request, using the project itself as a reverse proxy, the request is packaged in front of the path will increase the local path "file: e /", solution:
Add API_ROOT in config-dev.env.js (test environment) and pro-env.js (formal environment): '192.168.0.0: 8080' (modify according to their needs)
Create a js file export process.env.API_ROOT;
In the last reference main.js
Before requesting a path plus this.root
Thus a desktop application package has been completed
The following is the interface configuration
In main.js by arranging them to change the appearance BrowserWindow Integer width - window width in pixels by default. 800 . Integer height -. window height in pixels default is 600 . Integer the X- - window relative to the screen left offset position centered by default y Integer -.. window offset position relative to the top of the screen centered by default useContentSize Boolean -.. width and height using the web page size, size which means that the actual window should include a window frame size, will be a little bigger, the default is false . Center Boolean - window screen center minWidth Integer -. Minimum width of the window, the default is 0 . Integer minHeight - the minimum height of the window, the default is 0 . Integer maxWidth - window maximum width, the default is unlimited. Integer for the maxHeight - window maximum height, the default is unlimited. Boolean resizable - whether you can change the window size, defaults to true . Boolean Movable - whether the window can be dragged invalid on Linux by default.. to true . Boolean minimizable - whether the window can be minimized by default does not work on Linux.. to true . Boolean maximizable - whether the window can be maximized by default does not work on Linux.. to true . Boolean closable - Whether the window can be closed by default does not work on Linux.. to true . Boolean alwaysOnTop - whether the window always shows invalid on Linux before other windows by default.. false . Boolean Fullscreen -. Can full-screen window when explicitly set the value of the When false ., full-screen button will be hidden in macOS will disable the default false . Boolean fullscreenable - on macOS, full screen button is available, the default is to true skipTaskbar Boolean -. whether to display the window in the taskbar by default. false . Boolean Kiosk - Kiosk mode by default. false title String - The default window title by default.. " Electron " . NativeImage icon - window icon, if not set, the window will use the available default icon. Boolean Show - when the window is created is displayed by default. to true . Boolean Frame - specify false to create a Frameless Window defaults. to true . Boolean acceptFirstMouse - whether to allow web view, click to activate the window by default. false . Boolean disableAutoHideCursor - whether to hide the mouse when typing the default. false . Boolean autoHideMenuBar - unless Click Alt, or hide the menu bar by default. false . Boolean enableLargerThanScreen - whether to allow the permit to change the window size larger than the screen by default. false . String backgroundColor -. Color background window hexadecimal value, such as # 66CD00 or #FFF or # 80FFFFFF (support transparency) by default on Linux and Windows to # 000 is #FFF (or transparent on (black), Mac ). Boolean hasShadow - whether the window has a shadow is valid only on macOS default.. to true . Boolean darkTheme - Use dark theme for the window, only some have + GTK 3 effective desktop environment by default. false . Boolean transparent - transparent window by default. false . String of the type -. window type, the default window below to see more ordinary String titleBarStyle -. . window title bar styles below to see more. Object WebPreferences - Set interface properties below to see more.
How to hide the menu bar electron Form
electron default with the top menu bar, and sometimes we do not need the application.
Then main.js file settings
const electron = require('electron')
const path = require('path')
const url = require('url')
let mainWindow
const Menu = electron.Menu
createWindow function () {
// hide the menu bar
Menu.setApplicationMenu(null)
// Create the browser window. Setting window width and height, the minimum width and height, icons, etc.
mainWindow = new BrowserWindow({ width: 800, height: 600, minWidth: 1280, minHeight: 800, resizable: false, allowRunningInsecureContent: true, experimentalCanvasFeatures: true, icon: './favicon.ico'})
mainWindow.loadURL("http://www.nlfit.cn/saas/index.html#/login")
mainWindow.on('closed', function () {
mainWindow = null
})
}
const electron = require('electron')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
// const app = electron.app
// const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
let mainWindow
const Menu = electron.Menu
function createWindow () {
Menu.setApplicationMenu(null)
// Create the browser window.
mainWindow = new BrowserWindow({ width: 800, height: 600, minWidth: 1280, minHeight: 800, resizable: false, allowRunningInsecureContent: true, experimentalCanvasFeatures: true, icon: './favicon.ico'})
// and load the index.html of the app.
mainWindow.loadURL("http://www.nlfit.cn/saas/index.html#/login")
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
electron default with the top menu bar, and sometimes we do not need the application.
Then main.js file settings
const electron = require('electron')
const path = require('path')
const url = require('url')
let mainWindow
const Menu = electron.Menu
createWindow function () {
// hide the menu bar
Menu.setApplicationMenu(null)
// Create the browser window. Setting window width and height, the minimum width and height, icons, etc.
mainWindow = new BrowserWindow({ width: 800, height: 600, minWidth: 1280, minHeight: 800, resizable: false, allowRunningInsecureContent: true, experimentalCanvasFeatures: true, icon: './favicon.ico'})
mainWindow.loadURL("http://www.nlfit.cn/saas/index.html#/login")
mainWindow.on('closed', function () {
mainWindow = null
})
}
const electron = require('electron')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
// const app = electron.app
// const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
let mainWindow
const Menu = electron.Menu
function createWindow () {
Menu.setApplicationMenu(null)
// Create the browser window.
mainWindow = new BrowserWindow({ width: 800, height: 600, minWidth: 1280, minHeight: 800, resizable: false, allowRunningInsecureContent: true, experimentalCanvasFeatures: true, icon: './favicon.ico'})
// and load the index.html of the app.
mainWindow.loadURL("http://www.nlfit.cn/saas/index.html#/login")
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}