electron使用总结

0、前言

   Electron | 使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用也就是使用web技术开发桌面应用的技术，常用的vscode、atom等均是electron开发的。

1、安装

安装：npm i electron
启动：npm start

2、问题集锦

(1)解决jQuery不识别等问题：

<script>if (typeof module === 'object') {window.module = module;module = undefined;}</script>
<script src="./jquery.js"></script>
<script>if (window.module) module = window.module;</script>

(2)electron环境下远端调用window的alert、confirm等丢失焦点：

// 解决办法：重写alert、confirm等方法为electron本身的对话框，由于项目中大量使用了window的alert、confirm都是同步的，我只能重写成同步方法如下，否则他们要改成百上千个位置。
var userAgent = navigator.userAgent.toLowerCase();
        if (userAgent.indexOf(' electron/') > -1) {
            const remote= require('electron').remote;//修改默认对话框，修复electron弹出默认对话框后页面失去焦点的bug
            alert = function (str) {
                var options = {
                    type: 'warning',
                    buttons: ["确定"],
                    defaultId: 0,
                    cancelId: 0,
                    detail: str,
                    message: ''
                }
                remote.dialog.showMessageBoxSync(null, options)
            }
            confirm = function (str) {
                var options = {
                    type: 'warning',
                    buttons: ["确认", "取消"],
                    defaultId: 0,
                    cancelId: 1,
                    detail: '',
                    message: str
                }
                var flag = remote.dialog.showMessageBoxSync(null, options);
                console.log(flag);
                if (flag == 0) {
                    return true;
                } else {
                    return false;
                }
            }
        }

• 这个是electron高版本（v7.1.4）的解决方案，在开发的过程中发现低版本（本人用的v4.0.6），发现会报错找不见“showMessageBoxSync”方案，这是第一个问题，纠结了好久，就要用同步方法， 否则要么编译龙芯架构能使用的electron高版本（艰难），要么最终在文档中发现，低版本的api接口只有showMessageBox方法，但天无绝人之路，它其实也有同步方法，是根据参数来决定的，低版本中，这个方法不传入回调函数，就认为是同步的方法，会阻塞到界面上与等待用户交互。

• 第二个问题是在渲染进程中只有传入了父窗口的窗口对象给showMessageBox，他才会是一个模态对话框。

低版本electron代码：

var userAgent = navigator.userAgent.toLowerCase();
        if (userAgent.indexOf(' electron/') > -1) {
            const remote= require('electron').remote;//修改默认对话框，修复electron弹出默认对话框后页面失去焦点的bug
            // 获取父窗口对象
            let mainwindow = remote.getCurrentWindow();
            alert = function (str) {
                var options = {
                    type: 'warning',
                    buttons: ["确定"],
                    defaultId: 0,
                    cancelId: 0,
                    detail: str,
                    message: ''
                }
                remote.dialog.showMessageBox(mainwindow, options)
            }
            confirm = function (str) {
                var options = {
                    type: 'warning',
                    buttons: ["确认", "取消"],
                    defaultId: 0,
                    cancelId: 1,
                    detail: '',
                    message: str
                }
                var flag = remote.dialog.showMessageBox(mainwindow, options);
                console.log(flag);
                if (flag == 0) {
                    return true;
                } else {
                    return false;
                }
            }
        }

最终解决方案：

// 伪代码：
// 一般我们使用的版本也都是确定的。所以有如下伪代码：

if(electron_version==="4.0.6"){
	//v4.0.6处理逻辑
}else if(electron_version==="7.1.4"){
	//v7.1.4处理逻辑
}

(3)其他问题待整理

• 最坑的就是这两个问题，其他问题后续整理*

3、mips64下electron下载地址

百度网盘地址：https://pan.baidu.com/s/14FoL5aZgB17nUb2vscGJOA
龙芯开源软件地址：http://ftp.loongnix.org/os/loongngnix/

4、总结

结束，拜拜！下次见。