# Electron学习案例

**Repository Path**: zengqiang_455/electron_learning_case

## Basic Information

- **Project Name**: Electron学习案例
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-19
- **Last Updated**: 2021-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 环境搭建
## 安装Electron
> cnpm i -g electron
## 创建项目的方式
* 克隆一个示例项目的仓库
    - git https://github.com/electron/electron-quick-start.git
    - cd  electron-quick-start
    - cnpm i&&cnpm start
* 通过electron-forge脚手架创建项目(比较慢)
    - cnpm i -g electron-forge
    - electron-forge init my-new-app
    - cd my-new-app
    - cnpm start
* 通过electron手动创建项目
    - 新建一个文件夹
    - 新建一个index.html和main.js
    - cnpm init生成一个package.json
    - 运行命令 electron .

## 模块相关
### 模块使用规则
图一

### remote模块
> 提供了一种在渲染进程和主进程之间进行通信IPC的简便途径，
> 例如GUI相关的模块只能在主进程使用，但是想在渲染进程使用，则可以借助remote模块

```js
let btn=document.querySelector("#btn");
let path=require('path');
let BrowserWindow=require('electron').remote.BrowserWindow;
//渲染进程没法直接调用主进程中的模块，但是可以通过remote间接调用
let win=null;
btn.onclick=()=>{
    win=new BrowserWindow({
        width:400,
        height:300,
        // frame:false,//不显示状态栏
        // fullscreen:true//新窗口全屏显示
    })
    win.loadURL(path.join('file:',__dirname,'news.html'))
    win.on('closed',()=>{
        win==null;
    })   
}
```

### menu模块
> 顶部菜单栏的操作
```js
let electron=require('electron');
let Menu=electron.Menu;
let template=[
    {
        label:'文件',
        submenu:[
            {
                label:'新建文件',
                accelerator:'ctrl+n',
                click(){
                    
                }
            },
            {
                label:'新建窗口'
            }
        ]
    },
    {
        label:'编辑',
        submenu:[
            {
                label:'复制',
                role:'copy'
            },
            {
                label:'剪切',
                role:'cut'
            }
        ]
    }
]
let m=Menu.buildFromTemplate(template)
Menu.setApplicationMenu(m) 
```

### IPCMain和IPCRender
* IPCMain:在主进程使用，处理渲染进程发送的数据，同时也可以给渲染进程发送消息
* IPCRender:在渲染进程使用，处理主进程发送的数据，同时也可以给主进程发送消息
    - 同步发送：sendSync  异步发送：send  监听都是on
    - 同步接收方可以直接通过event.returnValue='this is sendsync return'返回信息
    - 异步接收方再监听回调里面：event.sender.send('reply','pong')，然后发送方on('事件名')即可

* ipcMain.js文件
```js
let {ipcMain}=require('electron');
ipcMain.on('send1',(event,data)=>{
    //主进程返数据给渲染进程
    event.sender.send('reply','pong')
})

//接收同步发送的数据
ipcMain.on('sendsync',(event,data)=>{
    console.log(data);
    event.returnValue='this is sendsync return'
})
```

* ipcRenderer.js文件
```js
//渲染进程给主进程发送消息
let {ipcRenderer}=require('electron');
let send1=document.querySelector('#send');//异步消息
let sendsync=document.querySelector('#sendsync');//同步消息
send1.onclick=()=>{
    ipcRenderer.send("send1","发送的数据")
}
//监听主进程返回的数据
ipcRenderer.on('reply',(event,data)=>{
    console.log(data)
})

//同步发送数据，直接接收返回的数据
sendsync.onclick=()=>{
    //同步的发送是sendSync，异步是send
   let msg= ipcRenderer.sendSync("sendsync","this is sendsync")
   //msg就是主进程返回的数据
   console.log(msg)
}
```

### 渲染进程之间的通讯
* 通过localstroage
    - localstroage.setItem(key,value)
    - localstroage.getItem(key)
* 通过BrowserWindow和webContents模块实现渲染进程之间的通信（详细见demo2）


### Electron调用默认浏览器打开URL
> 例如：a标签不做任何处理，会在electron内部打开这个连接
```js
let {shell}=require('electron')
let adom=document.querySelector('#adom');
console.log(adom)

//此处必须试用function形式，箭头函数无法成功打开外部
adom.onclick=function(e){
    e.preventDefault();
    //获取连接地址
    let href=this.getAttribute('href');
    shell.openExternal(href);
}
```

### webview标签
> 和应用本身运行在不同的进程，没有渲染进程的权限，保证了安全性

### 对话框
> 见demo4