使用电子构建跨平台桌面应用| Toptal®-欧博体育app下载

验证专家 in 工程< / div >< / div >< / div >< / div >

< div class = " " >

stenjophane是一名拥有7年以上经验的前端工程师. 他擅长构建高性能的基于javascript的web应用程序.

< / div >< / div >< / div >

专业知识

JavaScript WebKit CSS< / div >< / div >< / div >

以前在

< / div >< / div >< / div >< / div >< / div >< / div >< / div >< / div >< / div >< / div >

并将该指令添加为主窗口Angular控制器的依赖项:

角
    .模块(“主窗口”,(“跑龙套”))
    .控制器('MainCtrl'， function() {
        Var vm = 这;
    });

< / div >

生成的密码

为了简单起见，我们可以只使用NPM uuid 模块生成唯一的ID，作为本教程的密码. 我们可以像安装其他NPM模块一样安装它, 在我们的' Utils '脚本中需要它，然后创建一个简单的工厂，它将返回一个唯一的ID:

Var uuid = 要求(“uuid');

角
    .模块(“跑龙套”,[])
    
    ...
    
    .factory('Generator'， function() {
        返回{
            创建:function() {
                返回uuid.v4();
            }
        };
    })

现在, 我们剩下要做的就是在插入视图中创建一个按钮, 并附加一个指令，该指令将监听按钮上的点击事件并调用create()方法:

//在Utils中.js
角
    .模块(“跑龙套”,[])
    
    ...
    
    .指令('generatePassword'， ['Generator'， function(Generator) {)
        返回函数(范围, el) {
            el.Bind ('click'， function(e) {
                e.pr事件Default ();
                if(!范围.vm.formData)范围.vm.formData = {};
                范围.vm.formData.密码=生成器.create ();
                范围.美元的应用();
            });
        };
    }])

保存的密码

此时，我们希望存储我们的密码. 密码输入的数据结构相当简单:

{
    “id”:字符串
    “描述”:字符串,
    “用户名”:字符串,
    “密码”:字符串
}

因此，我们真正需要的是某种内存数据库，它可以选择性地同步到文件进行备份. 为了这个目的，洛基.j似乎是理想的人选. 它做的正是我们需要这个应用程序的目的，并提供在它之上 动态视图 特性，允许我们做类似于MongoDB的Aggregation模块的事情.

动态视图不提供mongodb的Aggregation模块所提供的所有功能. 请参阅文档了解更多信息.

让我们从创建一个简单的HTML表单开始:


    
        
            
                
                Description...
            
            
                
                Username...
            
            
                
                Password...

现在，让我们添加JavaScript逻辑来处理表单内容的发布和保存:

Var 洛基 = 要求(“lokijs')，
    Path = 要求(“ Path ');

角
    .模块(“跑龙套”,[])
    
    ...
    
    .服务('存储'，['$q'，函数($q) {
        这.Db =新的loki(路径.解决(__dirname。”../..”、“应用程序.db'));
        这.Collection = null;
        这.Loaded = 假;
        
        这.Init = function() {
            Var d = $q.推迟();
            
            这.重载()
                .然后(函数(){
                    这.Collection = 这.db.getCollection(钥匙链);
                    d.解决(这);
                }.bind ())
                .抓住(函数(e) {
                    //创建集合
                    这.db.addCollection(钥匙链);
                    //保存并创建文件
                    这.db.saveDatabase ();
                    
                    这.Collection = 这.db.getCollection(钥匙链);
                    d.解决(这);
                }.bind ());
                
                返回维.的诺言;
        };
        
        这.addDoc = function(data) {
            Var d = $q.推迟();
            
            如果(这.isLoaded () && 这.getCollection ()) {
                这.getCollection ().插入(数据);
                这.db.saveDatabase ();
                
                d.解决(这.getCollection ());
            } else {
                d.reject(new Error('DB NOT READY'));
            }
            
            返回维.的诺言;
        };
    })
    
    .指令('savePassword'， ['存储'， function(存储) {)
        返回函数(范围, el) {
            el.Bind ('click'， function(e) {
                e.pr事件Default ();
                
                如果(范围.vm.formData) {
                    存储
                        .addDoc(范围.vm.formData)
                        .然后(函数(){
                           //重置表单 & 关闭插入窗口
                           范围.vm.formData = {};
                           ipc.发送(“toggle-insert-视图”);
                        });
                }
            });
        };
    }])

重点:

我们首先需要初始化数据库. 这个过程涉及到创建洛基 Object的一个新实例, 提供数据库文件的路径作为参数, 查找备份文件是否存在, 如果需要的话创建它(包括' Keychain '集合), 然后在内存中加载这个文件的内容.
方法检索数据库中的特定集合 getCollection () 方法.
集合对象公开几个方法，包括 insert () 方法，允许我们将新文档添加到集合中.
为了将数据库内容持久化到文件中，洛基对象公开了一个 saveDatabase () 方法.
我们需要重置表单的数据，并发送一个IPC事件，告诉主要过程在保存文档后关闭窗口.

现在我们有了一个简单的表单，允许我们生成和保存新密码. 让我们回到主视图来列出这些条目.

清单的密码

这里需要做一些事情:

我们需要能够得到我们收集的所有文件.
我们需要在保存新密码时通知主视图，以便它刷新视图.

方法检索文档列表 getCollection () 方法在洛基对象上. 此方法返回一个对象，该对象的属性称为 data，它只是该集合中所有文档的数组:

这.getCollection = function() {
    这.Collection = 这.db.getCollection(钥匙链);
    返回这.收集;
};
        
这.getDocs = function() {
    返回(这.getCollection ()) ? 这.getCollection ().数据:null;
};

然后，我们可以调用Angular控制器中的getDocs()，检索数据库中存储的所有密码, 初始化之后:

角
    .模块(“MainView”,(“跑龙套”))
    .控制器('MainCtrl'， ['存储'， function(存储) {)
        Var vm = 这;
        vm.Keychain = null;
        
        存储
            .init ()
            .然后(函数(db) {
                vm.Keychain = db.getDocs ();
            });
    });

再加上一点Angular模板，我们就有了一个密码列表:


    {{item.description}}
    {{item.username || 'n/a'}}
    
        &bull;
    
    
        copy
        remove

< / div >

一个不错的新增功能是在插入新密码后刷新密码列表. 为此，我们可以使用电子的IPC模块. 如前所述, 可以在渲染进程中调用主进程的IPC模块，将其转换为侦听进程, 通过远程模块. 下面是如何实现它的示例 main.视图.js:

Var 远程 = 要求(“远程')，
    远程Ipc =远程.要求(ipc);

角
    .模块(“MainView”,(“跑龙套”))
    .控制器('MainCtrl'， ['存储'， function(存储) {)
        Var vm = 这;
        vm.Keychain = null;
        
        存储
            .init ()
            .然后(函数(db) {
                vm.Keychain = db.getDocs ();
                
                远程Ipc.On ('update-main-视图'， function() {
                    存储
                        .重载()
                        .然后(函数(){
                            vm.Keychain = db.getDocs ();
                        });
                });
            });
    }]);

重点:

我们需要通过远程模块自己的 要求() 方法从主进程请求远程IPC模块.
然后，我们可以将渲染器的过程设置为事件监听器 on() 方法，并将回调函数绑定到这些事件.

插入视图将负责在保存新文档时调度此事件:

存储
    .addDoc(范围.vm.formData)
    .然后(函数(){
        //在主视图中刷新列表
        ipc.发送(“update-main-视图”);
        //重置表单 & 关闭插入窗口
        范围.vm.formData = {};
        ipc.发送(“toggle-insert-视图”);
    });

复制密码

以纯文本形式显示密码通常不是一个好主意. 而不是, 我们将隐藏并提供一个方便的按钮，允许最终用户直接复制特定条目的密码.

在这里，电子又来拯救我们，为我们提供了一个剪贴板模块，简单的方法来复制和粘贴不仅文本内容，而且图像和HTML代码:

Var 剪贴板 = 要求(“剪贴板');

角
    .模块(“跑龙套”,[])
    
    ...
    
    .指令('copyPassword'， [function()] {
        返回函数(范围, el, attrs) {
            el.Bind ('click'， function(e) {
                e.pr事件Default ();
                Var text =(范围).vm.钥匙扣(attrs.copyPassword]) ? 范围.vm.钥匙扣(attrs.copyPassword].密码:;
                // atom的剪贴板模块
                剪贴板.明确的();
                剪贴板.writeText(文本);
            });
        };
    }]);

由于生成的密码将是一个简单的字符串，因此我们可以使用 writeText () 方法将密码复制到系统的剪贴板. 然后我们可以更新我们的主视图HTML，并添加复制按钮 口令拷贝 指令，提供密码数组的索引:

copy

删除密码

我们的终端用户可能还希望能够删除密码，以防它们过时. 要做到这一点，我们所需要做的就是调用 remove () 方法. 我们需要将整个文档提供给' remove () '方法，如下所示:

这.removeDoc = function(doc) {
    返回函数(){
        Var d = $q.推迟();
        
        如果(这.isLoaded () && 这.getCollection ()) {
            //从集合中删除文档 & 持续的变化
            这.getCollection ().删除(doc);
            这.db.saveDatabase ();
            
            //通知插入视图数据库的内容已经改变
            ipc.发送(“reload-insert-视图”);
            
            d.解决(真正的);
        } else {
            d.reject(new Error('DB NOT READY'));
        }
        
        返回维.的诺言;
    }.bind ();
};

洛基.Js文档说明我们也可以通过id删除文档, 但它似乎并没有像预期的那样起作用.

电子与我们的操作系统桌面环境无缝集成，以提供“本地”用户体验外观 & 感受我们的应用程序. 因此，电子与a捆绑在一起菜单模块，致力于为我们的应用程序创建复杂的桌面菜单结构.

菜单模块是一个庞大的主题，几乎值得自己的教程. 我强烈建议你通读一遍电子的桌面环境集成教程来发现该模块的所有特性.

在本教程的范围内, 我们将看到如何创建自定义菜单, 向它添加一个自定义命令, 并实现标准的退出命令.

通常, 电子菜单的JavaScript逻辑应该属于我们应用程序的主脚本文件, 我们的主进程定义在哪里. 但是，我们可以将其抽象到一个单独的文件中，并通过远程模块访问Menu模块:

Var 远程 = 要求(“远程')，
    菜单= 远程.要求(“菜单”);

要定义一个简单的菜单，我们需要使用 buildFromTemplate () 方法:

var 应用程序Menu =菜单.buildFromTemplate ([
    {
        标签:“电子”,
        子菜单:[{
            标签:“信用”,
            点击:函数(){
                由电子制造 & 洛基.js.');
            }
        }]
    }
]);

数组中的第一项总是被用作“默认”菜单项.

的值 label 属性对于默认菜单项无关紧要. 在开发模式下，它将始终显示 电子. 稍后我们将看到如何在构建阶段为默认菜单项分配自定义名称.

最后，我们需要将这个自定义菜单指定为应用程序的默认菜单 setApplicationMenu () 方法:

Menu.setApplicationMenu (应用程序Menu);

映射键盘快捷键

电子提供"加速器，一组映射到实际键盘组合的预定义字符串.g.: 命令+一个 or Ctrl + Shift + Z.

的 Comm和 加速器在Windows或Linux上不起作用. 对于我们的密码密钥链应用程序，我们应该添加一个 文件 菜单项，提供两个命令:

创建密码:打开插入视图 Cmd(或Ctrl) + N
辞职:完全退出应用程序 Cmd(或Ctrl) + Q

...
{
    标签:“文件”,
    子菜单:[
        {
            标签:“创建密码”;
            加速器:“CmdOrCtrl + N”,
            点击:函数(){
                ipc.发送(“toggle-insert-视图”);
            }
        },
        {
            键入:'分隔符' //创建一个可视分隔符
        },
        {
            标签:“辞职”,
            加速器:‘CmdOrCtrl + Q ',
            选择器: 'terminate:' //仅限OS X!!!
        }
    ]
}
...

重点:

我们可以通过向数组中添加一个项目来添加一个可视分隔符 类型 属性设置为 分隔符.
的 CmdOrCtrl 加速器兼容Mac和PC键盘
的 选择器 属性仅与osx兼容!

设计我们的应用

您可能注意到，在各种代码示例中，都引用了以开头的类名 mdl -. 出于本教程的目的，我选择使用材料设计寿命 UI框架，但可以随意使用您选择的任何UI框架.

Anything that we can do with HTML5 can be done in 电子; just keep in mind 的 growing size of 的应用程序’s binaries, 如果使用过多的第三方库，可能会出现性能问题.

包装电子应用程序分发

你做了一个电子应用程序，它看起来很棒，你写了端到端测试 Selenium和WebDriver，你已经准备好将它发布到全世界!

但你还是想让它个性化, 给它一个自定义的名字，而不是默认的“电子”。, 也许还可以为Mac和PC平台提供定制的应用程序图标.

狼吞虎咽地吃建筑

这些天，有一个狼吞虎咽地吃插件的任何我们能想到的. 我所要做的就是打字 杯电子 在谷歌，当然有一个狼吞虎咽地吃-electron 插件!

这个插件相当易于使用只要维护本教程开始时详细介绍的文件夹结构. 如果没有，你可能需要稍微移动一下.

这个插件可以像任何其他狼吞虎咽地吃插件一样安装:

安装狼吞虎咽地吃-electron——save-dev

然后我们可以这样定义狼吞虎咽地吃任务:

Var 狼吞虎咽地吃 = 要求(“狼吞虎咽地吃')，
    电子= 要求(“狼吞虎咽地吃-electron')，
    Info = 要求(“./ src /包.json的);

狼吞虎咽地吃.Task ('electron'， function() {
    狼吞虎咽地吃.src (" ")
    .管(电子({
        src:“./ src”,
        包Json:信息,
        发布:“./ dist’,
        缓存:./缓存”,
        版本:“半.31.2',
        包装:没错,
        平台:['win32-ia32'， 'darwin-x64']，
        platformResources: {
            达尔文:{
                CFBundleDisplayName:信息.名字，
                CFBundleIdentifier:信息.包,
                CFBundleName:信息.名字，
                CFBundleVersion:信息.版本
            },
            胜利:{
                “版本字符串”:信息.的版本,
                “文件版本”:信息.的版本,
                “产品版本”:信息.版本
            }
        }
    }))
    .管(吞咽.桌子(" "));
});

重点:

的 src / 文件夹不能与狼吞虎咽地吃file . conf文件所在的文件夹相同.与分发文件夹不同.
控件定义希望导出到的平台 平台 数组.
我们应该定义 缓存 文件夹，将下载电子二进制文件，以便将它们打包到我们的应用程序中.
应用程序包的内容.Json文件需要通过 包Json 财产.
有一个可选的 包装 属性，允许我们也创建生成的应用程序的zip存档.
对于每个平台，都有一组不同的“平台资源” 可以定义.

添加应用图标

其中之一 platformResources 属性是 图标 属性，允许我们为应用程序定义自定义图标:

“图标”:“钥匙链.图标”

OS X要求图标带有 .icn 文件扩展名. 有多种在线工具可以让我们进行转换 .png 文件到 .图标 和 .icn 免费.

结论

在本文中，我们只触及了电子实际可以做什么的表面. 想想那些很棒的应用，比如原子或者松弛作为灵感的来源，你可以使用这个工具.

希望本教程对您有所帮助, 请随时留下您的评论和分享您的经验与电子!

< / div >< / div >< / div >< / div >

关于总博客的进一步阅读:

< / div >

//在Utils中.js\n角\n    .模块(“跑龙套”,[])\n    \n    ...\n    \n    .指令('generatePassword'， ['Generator'， function(Generator) {)\n        返回函数(范围, el) {\n            el.Bind ('click'， function(e) {\n                e.pr事件Default ();\n                if(!范围.vm.formData)范围.vm.formData = {};\n                范围.vm.formData.密码=生成器.create ();\n                范围.美元的应用();\n            });\n        };\n    }])\n

\n\n

保存的密码

\n\n

此时，我们希望存储我们的密码. 密码输入的数据结构相当简单:

\n\n

{\n    \"id\": String\n    \"description\": String,\n    \"username\": String,\n    \"password\": String\n}\n

\n\n

\n
动态视图不提供mongodb的Aggregation模块所提供的所有功能. 请参阅文档了解更多信息.
\n

\n\n

让我们从创建一个简单的HTML表单开始:

\n\n

\n    \n        \n            \n                \n                Description...\n            
\n            \n                \n                Username...\n            
\n            \n                \n                Password...\n            
\n            \n                \n                \n                \n            
\n        
\n    \n
\n

\n\n

现在，让我们添加JavaScript逻辑来处理表单内容的发布和保存:

\n\n

Var 洛基 = 要求(“lokijs')，\n    Path = 要求(“ Path ');\n\n角\n    .模块(“跑龙套”,[])\n    \n    ...\n    \n    .服务('存储'，['$q'，函数($q) {\n        这.Db =新的loki(路径.解决(__dirname。”../..”、“应用程序.db'));\n        这.Collection = null;\n        这.Loaded = 假;\n        \n        这.Init = function() {\n            Var d = $q.推迟();\n            \n            这.重载()\n                .然后(函数(){\n                    这.Collection = 这.db.getCollection(钥匙链);\n                    d.解决(这);\n                }.bind ())\n                .抓住(函数(e) {\n                    //创建集合\n                    这.db.addCollection(钥匙链);\n                    //保存并创建文件\n                    这.db.saveDatabase ();\n                    \n                    这.Collection = 这.db.getCollection(钥匙链);\n                    d.解决(这);\n                }.bind ());\n                \n                返回维.的诺言;\n        };\n        \n        这.addDoc = function(data) {\n            Var d = $q.推迟();\n            \n            如果(这.isLoaded () && 这.getCollection ()) {\n                这.getCollection ().插入(数据);\n                这.db.saveDatabase ();\n                \n                d.解决(这.getCollection ());\n            } else {\n                d.reject(new Error('DB NOT READY'));\n            }\n            \n            返回维.的诺言;\n        };\n    })\n    \n    .指令('savePassword'， ['存储'， function(存储) {)\n        返回函数(范围, el) {\n            el.Bind ('click'， function(e) {\n                e.pr事件Default ();\n                \n                如果(范围.vm.formData) {\n                    存储\n                        .addDoc(范围.vm.formData)\n                        .然后(函数(){\n                           //重置表单 & 关闭插入窗口\n                           范围.vm.formData = {};\n                           ipc.发送(“toggle-insert-视图”);\n                        });\n                }\n            });\n        };\n    }])\n

\n\n

重点:

\n\n

我们首先需要初始化数据库. 这个过程涉及到创建洛基 Object的一个新实例, 提供数据库文件的路径作为参数, 查找备份文件是否存在, 如果需要的话创建它(包括' Keychain '集合), 然后在内存中加载这个文件的内容.
方法检索数据库中的特定集合 getCollection () 方法.
集合对象公开几个方法，包括 insert () 方法，允许我们将新文档添加到集合中.
为了将数据库内容持久化到文件中，洛基对象公开了一个 saveDatabase () 方法.
我们需要重置表单的数据，并发送一个IPC事件，告诉主要过程在保存文档后关闭窗口.

\n\n

现在我们有了一个简单的表单，允许我们生成和保存新密码. 让我们回到主视图来列出这些条目.

\n\n

清单的密码

\n\n

这里需要做一些事情:

\n\n

我们需要能够得到我们收集的所有文件.
我们需要在保存新密码时通知主视图，以便它刷新视图.

\n\n

方法检索文档列表 getCollection () 方法在洛基对象上. 此方法返回一个对象，该对象的属性称为 data，它只是该集合中所有文档的数组:

\n\n

这.getCollection = function() {\n    这.Collection = 这.db.getCollection(钥匙链);\n    返回这.收集;\n};\n        \n这.getDocs = function() {\n    返回(这.getCollection ()) ? 这.getCollection ().数据:null;\n};\n

\n\n

然后，我们可以调用Angular控制器中的getDocs()，检索数据库中存储的所有密码, 初始化之后:

\n\n

角\n    .模块(“MainView”,(“跑龙套”))\n    .控制器('MainCtrl'， ['存储'， function(存储) {)\n        Var vm = 这;\n        vm.Keychain = null;\n        \n        存储\n            .init ()\n            .然后(函数(db) {\n                vm.Keychain = db.getDocs ();\n            });\n    });     \n

\n\n

再加上一点Angular模板，我们就有了一个密码列表:

\n\n

\n    {{item.description}}\n    {{item.username || 'n/a'}}\n    \n        &bull;\n    \n    \n        copy\n        remove\n    \n\n

\n\n

\n\n

Var 远程 = 要求(“远程')，\n    远程Ipc =远程.要求(ipc);\n\n角\n    .模块(“MainView”,(“跑龙套”))\n    .控制器('MainCtrl'， ['存储'， function(存储) {)\n        Var vm = 这;\n        vm.Keychain = null;\n        \n        存储\n            .init ()\n            .然后(函数(db) {\n                vm.Keychain = db.getDocs ();\n                \n                远程Ipc.On ('update-main-视图'， function() {\n                    存储\n                        .重载()\n                        .然后(函数(){\n                            vm.Keychain = db.getDocs ();\n                        });\n                });\n            });\n    }]);\n

\n\n

重点:

\n\n

我们需要通过远程模块自己的 要求() 方法从主进程请求远程IPC模块.
然后，我们可以将渲染器的过程设置为事件监听器 on() 方法，并将回调函数绑定到这些事件.

\n\n

插入视图将负责在保存新文档时调度此事件:

\n\n

存储\n    .addDoc(范围.vm.formData)\n    .然后(函数(){\n        //在主视图中刷新列表\n        ipc.发送(“update-main-视图”);\n        //重置表单 & 关闭插入窗口\n        范围.vm.formData = {};\n        ipc.发送(“toggle-insert-视图”);\n    });\n

\n\n

复制密码

\n\n

以纯文本形式显示密码通常不是一个好主意. 而不是, 我们将隐藏并提供一个方便的按钮，允许最终用户直接复制特定条目的密码.

\n\n

在这里，电子又来拯救我们，为我们提供了一个剪贴板模块，简单的方法来复制和粘贴不仅文本内容，而且图像和HTML代码:

\n\n

Var 剪贴板 = 要求(“剪贴板');\n\n角\n    .模块(“跑龙套”,[])\n    \n    ...\n    \n    .指令('copyPassword'， [function()] {\n        返回函数(范围, el, attrs) {\n            el.Bind ('click'， function(e) {\n                e.pr事件Default ();\n                Var text =(范围).vm.钥匙扣(attrs.copyPassword]) ? 范围.vm.钥匙扣(attrs.copyPassword].密码:;\n                // atom的剪贴板模块\n                剪贴板.明确的();\n                剪贴板.writeText(文本);\n            });\n        };\n    }]);\n

\n\n

copy\n

\n\n

删除密码

\n\n

这.removeDoc = function(doc) {\n    返回函数(){\n        Var d = $q.推迟();\n        \n        如果(这.isLoaded () && 这.getCollection ()) {\n            //从集合中删除文档 & 持续的变化\n            这.getCollection ().删除(doc);\n            这.db.saveDatabase ();\n            \n            //通知插入视图数据库的内容已经改变\n            ipc.发送(“reload-insert-视图”);\n            \n            d.解决(真正的);\n        } else {\n            d.reject(new Error('DB NOT READY'));\n        }\n        \n        返回维.的诺言;\n    }.bind ();\n};\n

\n\n

\n
洛基.Js文档说明我们也可以通过id删除文档, 但它似乎并没有像预期的那样起作用.
\n

\n\n\n\n

\n\n

菜单模块是一个庞大的主题，几乎值得自己的教程. 我强烈建议你通读一遍电子的桌面环境集成教程来发现该模块的所有特性.

\n\n

在本教程的范围内, 我们将看到如何创建自定义菜单, 向它添加一个自定义命令, 并实现标准的退出命令.

\n\n\n\n

\n\n

Var 远程 = 要求(“远程')，\n    菜单= 远程.要求(“菜单”);\n

\n\n

要定义一个简单的菜单，我们需要使用 buildFromTemplate () 方法:

\n\n

var 应用程序Menu =菜单.buildFromTemplate ([\n    {\n        标签:“电子”,\n        子菜单:[{\n            标签:“信用”,\n            点击:函数(){\n                由电子制造 & 洛基.js.');\n            }\n        }]\n    }\n]);\n

\n\n

数组中的第一项总是被用作“默认”菜单项.

\n\n

\n
的值 label 属性对于默认菜单项无关紧要. 在开发模式下，它将始终显示 电子. 稍后我们将看到如何在构建阶段为默认菜单项分配自定义名称.
\n

\n\n

最后，我们需要将这个自定义菜单指定为应用程序的默认菜单 setApplicationMenu () 方法:

\n\n

Menu.setApplicationMenu (应用程序Menu);\n

\n\n

映射键盘快捷键

\n\n

电子提供"加速器，一组映射到实际键盘组合的预定义字符串.g.: 命令+一个 or Ctrl + Shift + Z.

\n\n

\n
的 Comm和 加速器在Windows或Linux上不起作用.\n对于我们的密码密钥链应用程序，我们应该添加一个 文件 菜单项，提供两个命令:
\n

\n\n

\n创建密码:打开插入视图 Cmd(或Ctrl) + N\n
\n辞职:完全退出应用程序 Cmd(或Ctrl) + Q\n

\n\n

...\n{\n    标签:“文件”,\n    子菜单:[\n        {\n            标签:“创建密码”;\n            加速器:“CmdOrCtrl + N”,\n            点击:函数(){\n                ipc.发送(“toggle-insert-视图”);\n            }\n        },\n        {\n            键入:'分隔符' //创建一个可视分隔符\n        },\n        {\n            标签:“辞职”,\n            加速器:‘CmdOrCtrl + Q ',\n            选择器: 'terminate:' //仅限OS X!!!\n        }\n    ]\n}\n...\n

\n\n

重点:

\n\n

我们可以通过向数组中添加一个项目来添加一个可视分隔符 类型 属性设置为 分隔符.
的 CmdOrCtrl 加速器兼容Mac和PC键盘
的 选择器 属性仅与osx兼容!

\n\n

设计我们的应用

\n\n

Anything that we can do with HTML5 can be done in 电子; just keep in mind 的 growing size of 的应用程序’s binaries, 如果使用过多的第三方库，可能会出现性能问题.

\n\n

包装电子应用程序分发

\n\n

你做了一个电子应用程序，它看起来很棒，你写了端到端测试 Selenium和WebDriver，你已经准备好将它发布到全世界!

\n\n

但你还是想让它个性化, 给它一个自定义的名字，而不是默认的“电子”。, 也许还可以为Mac和PC平台提供定制的应用程序图标.

\n\n

狼吞虎咽地吃建筑

\n\n

这些天，有一个狼吞虎咽地吃插件的任何我们能想到的. 我所要做的就是打字 杯电子 在谷歌，当然有一个狼吞虎咽地吃-electron 插件!

\n\n

这个插件相当易于使用只要维护本教程开始时详细介绍的文件夹结构. 如果没有，你可能需要稍微移动一下.

\n\n

这个插件可以像任何其他狼吞虎咽地吃插件一样安装:

\n\n

安装狼吞虎咽地吃-electron——save-dev\n

\n\n

然后我们可以这样定义狼吞虎咽地吃任务:

\n\n

Var 狼吞虎咽地吃 = 要求(“狼吞虎咽地吃')，\n    电子= 要求(“狼吞虎咽地吃-electron')，\n    Info = 要求(“./ src /包.json的);\n\n狼吞虎咽地吃.Task ('electron'， function() {\n    狼吞虎咽地吃.src(\"\")\n    .管(电子({\n        src:“./ src”,\n        包Json:信息,\n        发布:“./ dist’,\n        缓存:./缓存”,\n        版本:“半.31.2',\n        包装:没错,\n        平台:['win32-ia32'， 'darwin-x64']，\n        platformResources: {\n            达尔文:{\n                CFBundleDisplayName:信息.名字，\n                CFBundleIdentifier:信息.包,\n                CFBundleName:信息.名字，\n                CFBundleVersion:信息.版本\n            },\n            胜利:{\n                \"版本-string\": info.的版本,\n                \"file-版本\": info.的版本,\n                \"product-版本\": info.版本\n            }\n        }\n    }))\n    .管(吞咽.dest(\"\"));\n});\n

\n\n

重点:

\n\n

的 src / 文件夹不能与狼吞虎咽地吃file . conf文件所在的文件夹相同.与分发文件夹不同.
控件定义希望导出到的平台 平台 数组.
我们应该定义 缓存 文件夹，将下载电子二进制文件，以便将它们打包到我们的应用程序中.
应用程序包的内容.Json文件需要通过 包Json 财产.
有一个可选的 包装 属性，允许我们也创建生成的应用程序的zip存档.
对于每个平台，都有一组不同的“平台资源” 可以定义.

\n\n

添加应用图标

\n\n

其中之一 platformResources 属性是 图标 属性，允许我们为应用程序定义自定义图标:

\n\n

\"图标\": \"keychain.图标\"\n

\n\n

\n
OS X要求图标带有 .icn 文件扩展名. 有多种在线工具可以让我们进行转换 .png 文件到 .图标 和 .icn 免费.
\n

\n\n

结论

\n\n

在本文中，我们只触及了电子实际可以做什么的表面. 想想那些很棒的应用，比如原子或者松弛作为灵感的来源，你可以使用这个工具.

\n\n

希望本教程对您有所帮助, 请随时留下您的评论和分享您的经验与电子!

\n","as":"div","isContentFit":true,"sharingWidget":{"url":"http://r0jm.wxzjnt.com/javascript/electron-cross-platform-desktop-apps-easy","title":"用电子构建跨平台桌面应用程序","text":null,"providers":["linkedin","推特","脸谱网"],"gaCategory":null,"domain":{"name":"developers","title":"工程","vertical":{"name":"developers","title":"开发人员","publicUrl":"http://r0jm.wxzjnt.com/developers"},"publicUrl":"http://r0jm.wxzjnt.com/developers/blog"},"hashtags":"CrossPlatform,电子JS,DesktopApps"}}

By Stephane P. Pericat

专业知识

以前在

获取货物

建立项目

理解电子过程

Password Keychain

建立一个密码钥匙链桌面应用程序

生成和保存密码

打开和关闭“插入”窗口

生成的密码

保存的密码

清单的密码

复制密码

删除密码

创建桌面菜单

创建 & 给我们的App分配一个自定义菜单

映射键盘快捷键

设计我们的应用

包装电子应用程序分发

狼吞虎咽地吃建筑

添加应用图标

结论

关于总博客的进一步阅读:

标签

作者简介

专业知识

以前在

热门文章

看看我们的相关人才

聘请人才

读下

Toptal开发者

关于

联系

生成的密码

保存的密码

清单的密码

复制密码

删除密码

创建桌面菜单

创建 & 给我们的App分配一个自定义菜单

映射键盘快捷键

设计我们的应用

包装电子应用程序分发

狼吞虎咽地吃建筑

添加应用图标

结论

Stephane P. Pericat