electron使用总结

electron 同时被 2 个专栏收录
3 篇文章 0 订阅
3 篇文章 0 订阅

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、总结

结束,拜拜!下次见。

展开阅读全文
  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值