electron 初体验

关于electron我不进行介绍,请移步官网认识了解
这里讲述一个实例,关于做一个linux桌面版qq的大致过程(由于时间紧迫,我并没有仔细阅读api文档,请仅当学习参考)

1.安装electron-api

下载地址https://electron-api-demos.githubapp.com/updates/electron-api-demos-linux.zip

2.使用官方提供最基本的实例

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

这里说明一点,官方实例可能无法完成安装,这里推荐使用其他镜像完成安装

npm install -g cnpm --registry=https://registry.npm.taobao.org
#然后使用 cnpm install 进行按照
# Install the dependencies and run
$ cnpm install && npm start

如果使用webstrom进行开发可配置为 npm start 进行启动,这里不展开

3.开始修改官方实例

mainWindow.loadURL(url.format({
  pathname: 
      path.join(
          __dirname, 
          'index.html'),
  protocol: 'file:',
  slashes: true
}));

这里为程序启动时,定义打开页面为 index.html 页
由于这里希望将程序定义为启动 webqq ,则这里的打开页面应该修改为如下

mainWindow.loadURL(
    'http://w.qq.com/',
    {
      //userAgent : 
      // "这里根据情况," + 
      // "貌似qq官方是通过识别屏幕大小" + 
      // "来识别客户端类型的"
    });

ok,基本完成, npm start 启动
我这里将默认窗体进行了修改

mainWindow = new BrowserWindow({width: 1366, height: 768,fullscreen:true});

大小为我的屏幕大小,然后启动时为全屏,大家根据自己爱好修改
(全屏按住 F11 可以退出)

4.这里我添加了一个功能,就是可以进行

//以下代码在 main.js 头部添加

const Menu = electron.Menu;
const Tray = electron.Tray;
const globalShortcut = electron.globalShortcut
var isFullScreen = false;
//以下代码在 createWindow 中添加
globalShortcut.register(
    'CommandOrControl+Shift+S', 
    function () {
  if (isFullScreen) {
    return;
  }
  mainWindow.hide();
  tray = new Tray('./icon.png');
  const contextMenu = 
      Menu.buildFromTemplate([{
    label: 'show',
    click: function () {
      mainWindow.show();
      tray.destroy();
      isFullScreen = false;
    }
  }]);
  tray.setToolTip('This is my application.');
  tray.setContextMenu(contextMenu);
  isFullScreen = true;
});

这里使用了 electron 的快捷键功能
https://developer.gnome.org/hig/stable/keyboard-input.html.en
同时按下 Ctrl Shift S 可以将窗体最小号，同时在状态栏中显示图标

（注：图中从左往右第二个）

5.其实到这里基本完成了

electron 提供了一个将应用程序打包的功能，使用方法如下
（bash下完成）

#1.安装打包工具
cnpm install -g electron-prebuilt
#2.移动工作目录到项目位置
cd /home/sunbing/source/electron-project/qqProject
#3.打包
electron-packager ./ 【打包后的名称】 -all

这里打包完成后通过双击打包好的应用程序就可以运行程序，但是我这里出现一点问题，就是图标无法获取，我这里提供一套我的解决方案（第6点）

6.忽略第5点

直接在项目目录下新建一个shell脚本，命名为 invoke.sh，内容如下

#!/bin/bash
npm start

继续新建shell脚本，名称为 cd.sh ，内容如下

#!/bin/bash
cd /home/sunbing/source/electron-project/qqProject（项目位置）
./invoke.sh

（注：修改以上文件权限 + x）
然后编写一个c程序，内容如下

#include
void main() {
    system("/home/sunbing/source/electron-project/qqProject/cd.sh");
}

将生成的程序放置到 /home/sunbing/source/electron-project/qqProject 文件夹中，运行该可执行文件就可以启动程序了

7.最后废话一点

以上第5点和第6点的目的都是产生一个可以双击运行的程序，其实意图相当明显，就是希望能通过将程序放置到桌面，然后双击运行，就像window系统中的快捷方式一样。
这里给一个创建启动项的方法。

cd /usr/share/applications/
gedit [程序名称].desktop

然后编写以下内容

[Desktop Entry]
Name=[中文名]
Name[zh_CN]=[english name]
Icon=[图标(绝对路径)]
Exec=[启动程序(我前面利用c生成的程序绝对路径)]
StartupNotify=true
Terminal=false
Type=Application
Categories=Network;

保存，稍等一下就能看到结果

转载注明来自：
http://blog.csdn.net/dsa2123/article/details/70807250