# eglpt-electron-app

**Repository Path**: wenwang2000/eglpt-electron-app

## Basic Information

- **Project Name**: eglpt-electron-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-08
- **Last Updated**: 2021-03-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# electron+vue学习

# 参考资料：
    https://www.w3cschool.cn/electronmanual/wcx31ql6.html
    
    https://www.npmjs.com/package/electron-forge
    
    https://electronjs.org/docs
    
    https://www.electronforge.io
    
    https://juejin.im/post/5ca44a84e51d45240279496c#heading-25

# 安装electro（全局安装 只需要一次）
	npm install -g electron   / cnpm install -g electron 
# 创建项目（electron-forge）
1.全局安装 electron-forge(只需要一次)
    
    npm install -g electron-forge    /  cnpm install -g electron-forge  
2、创建项目（这一步会默认安装模块 ，如果失败删掉node_modules，重新cd到项目里面运行 cnpm install  或者yarn）
   
    yarn create electron-app eglpt-electron-app （新版本）
		
3、运行项目	

    cd eglpt-electron-app
    npm start
        
4. 打包配置(electronforge )  https://www.electronforge.io
   {
     packagerConfig: { ... },
     electronRebuildConfig: { ... },
     makers: [ ... ],
     publishers: [ ... ],
     plugins: [ ... ],
     hooks: { ... },
     buildIdentifier: 'my-build'
   }
    maker:参数地址：https://js.electronforge.io/maker
   "makers": [
           {
             "name": "@electron-forge/maker-squirrel",
             "config": {
             //安装包名称
             "setupExe": "E管理平台.exe",
                //安装时动画
               "loadingGif": "./install.gif",
               //应用列表中的如年图标
               "iconUrl": "http://oss.eglpt.com/img/3260807641626054656.jpg",
               //安装包图标
               "setupIcon":"./favicon.ico"，
               //是否生成msi true不生成
                "noMsi": true,
             }
           },
           
# 知识点

## 快捷键
   快捷方式使用 register 方法在 globalShortcut 模块中注册, 即:
    
    const { app, globalShortcut } = require('electron')
    
    app.on('ready', () => {
      // Register a 'CommandOrControl+Y' shortcut listener.
      globalShortcut.register('CommandOrControl+Y', () => {
        // Do stuff when Y and either Command/Control is pressed.
      })
    })
   1.macOS 是 Command ，在 Linux 和 Windows 上是Control。
   2.使用 Alt 代替Option. Option 键只在 macOS 系统上存在, 而 Alt 键在任何系统上都有效.
   3.Super键是指 Windows 和 Linux 系统上的 Windows 键，但在 macOS 里为 Cmd 键.
可用的功能键：

    Command (缩写为Cmd)
    Control (缩写为Ctrl)
    CommandOrControl (缩写为 CmdOrCtrl)
    Alt
    Option
    AltGr
    Shift
    Super
可用的普通按键：

    0 到 9
    A 到 Z
    F1 到 F24
    类似~, !, @, #, $的标点符号
    Plus
    Space
    Tab
    大写锁定（Capslock）
    数字锁定（Numlock）
    滚动锁定
    Backspace
    Delete
    Insert
    Return (等同于 Enter)
    Up, Down, Left and Right
    Home 和 End
    PageUp 和 PageDown
    Escape (缩写为 Esc)
    VolumeUp, VolumeDown 和 VolumeMute
    MediaNextTrack、MediaPreviousTrack、MediaStop 和 MediaPlayPause
    PrintScreen
    小键盘按键
    num1-num9 -数字1-数字9
    numdec - 小数点
    numadd - 加号
    numsub - 减号
    nummult - 乘号
    numdiv - 除号

















   remote模块提供了一种在渲染进程（网页）和主进程之间进行进程间通讯（IPC）的简便途径
   
   通信模块（主进程和渲染进程） ipcMain ipcRenderer
   
   		ipcMain：当在主进程中使用时，它处理从渲染器进程（网页）发送出来的异步和同步信息,当然也有可能从主进程向渲染进程发送消息。
   		ipcRenderer： 使用它提供的一些方法从渲染进程(web 页面) 发送同步或异步的消息到主进程。也可以接收主进程回复的消息。
  
  
   模块通信（渲染进程和渲染进程）localstorage   BrowserWindow  webContents

		localStorage.setItem(key,value);
		localStorage.getItem(key);
		webContents 是一个事件发出者.它负责渲染并控制网页，也是BrowserWindow 对象的属性。
		1、获取当前窗口的id：
			const winId = BrowserWindow.getFocusedWindow().id;
		2、监听当前窗口加载完成的事件
			win.webContents.on('did-finish-load',(event) => {
			})
		3、同一窗口之间广播数据
			win.webContents.on('did-finish-load',(event) => {
				win.webContents.send('msg',winId,'我是index.html 的数据');
			})
		4、通过id 查找窗口 （var BrowserWindow =require('electron').remote.BrowserWindow;）
			let win = BrowserWindow.fromId(winId);

    Shell 模块 使用默认程序 管理应用程序和url
    
    Webview 与 iframe 有点相似，但是与 iframe 不同, webview 和你的应用运行的是不同的进程。
    它不拥有渲染进程的权限，并且应用和嵌入内容之间的交互全部都是异步的。因为这能保证应用的安全性不受嵌入内容的影响
    
    dialog 模块  提供了api 来展示原生的系统对话框
    
    Tray 系统托盘 和任务栏 
    
    Electron 里面的消息通知是基于h5 的通知api 实现的。
    
    globalShortcut 全局快捷键     clipboard 剪切板事件      nativeImage 模块


## 常见问题
1.electron渲染进程引入nodejs模块  提示 require is not defined解决方法。解决方案：

	找到主进程 main.js  配置webPreferences: {
	    nodeIntegration: true
	}
	
	 mainWindow=new BrowserWindow({width:800,height:600, webPreferences: {
			nodeIntegration: true
    }}); 
2. Electron对页面的安全策略提出了很多要求，尤其是加载远程链接时。项目加载本地页面也会有CSP方面的警告⚠️需要在Html的meta标签里添加CSP规则：

    <meta http-equiv="Content-Security-Policy" content="script-src 'self';">
    
    or  在main.js中添加如下代码
    
    process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
    

3. Electron 控制台打印乱码问题 解决办法修改package.json文件
   
    "start": "chcp 65001 && electron-forge start"


# 感谢支持
<table>
    <tr>
        <td><img src="http://oss.eglpt.com/img/4787496998721892352.jpg"/></td>
    </tr>
</table>