Pencil 基於Electron的GUI原型工具之菜單再探

爲何要重試呢？

主要是以爲Pencil這個工具仍是比較有價值。就像Linus對Linux下分發版的態度「讓用戶有選擇」同樣，在如今這個Sass服務、Web服務化愈來愈廣泛越便利的時代，這樣一款定位於桌面式的開源軟件，就是給用戶的一種選擇。

誠然，好的服務、核心的服務咱們須要付費、願意付費，但一樣一個服務對於不一樣的人其重要性是不一樣的，好比個人設定裏印象筆記、迅雷下載、Jetbrains的IDE、京東、書籍閱讀等是須要付費的，由於這是我本身的核心訴求，筆記多端同步、常常要下載國外各類軟件時的速度體驗、京東VIP的購物體驗等。而原型圖設計我認爲不是個人核心訴求，再一個我不須要用到完整的服務，好比Sketch。去年也買過一年受權，但使用頻率極低，並且其核心功能的用戶體驗並不太好，因此今年到期後也再也不續費了。

mac用戶羣的體驗標準，我表明不了，我對於mac的總體評價，甚至應該是中下的那一個等級，但那種軟硬件完美結合的體驗理念，相對於市面上其它產品、絕對要點一個大大的贊。

重試

很奇怪，前兩個月嘗試過的對Pencil的macOS原生菜單改造過程，這兩天要去重試的時候，已經記不清了，因此必定要及時記錄、並且要記重點，大腦內部存儲性能不行，就找外部存儲。

一、事件驅動的開發方式

主進程 pencil/app/index.js

從主進程到渲染進程的異步通訊

mainWindow.webContents.on("will-navigate", handleRedirect);
    mainWindow.webContents.on("new-window", handleRedirect);
    mainWindow.webContents.on('did-finish-load', function () {
        console.log('頁面內容加載完成');
        if (process.platform == 'darwin') {
            mainWindow.webContents.send('initMacOSMenu');
        }
    });

初始化Electron自帶的關於菜單，若是有需求的話。

app.on('ready', function() {
    app.setAboutPanelOptions({
        applicationName: pkg.productName,
        applicationVersion: pkg.version,
        copyright: pkg.copyright,
        version: '',
        credits: '',
        authors: '',
        website: pkg.homepage,
        iconPath: '',
    });

渲染進程 pencil/app/app.js

/**
 * 調整實現方式爲徹底在渲染進程中初始化原生菜單
 */
ipcRenderer.on('initMacOSMenu', (event) => {
    console.log('initMacOSMenu web page received ');

    var {MacOSToolbar} = require('./views/toolbars/MacOSToolbar');

    MacOSToolbar.createMacOSToolbar();
});

二、具體實現

要讓主進程的菜單點擊事件觸發後，渲染進程響應相應的指令。關鍵詞：UICommandManager.getCommand、menu key。

菜單初始化 pencil/app/views/toolbars/MacOSToolbar.js

const {Menu, app, webContents} = require('electron').remote;
const pkg = require("../../package.json");
const FileToolMenu = require('../menus/FileToolMenu');

/**
 * 原始邏輯是在主進程中，初始化MacOS下的原生菜單
 * 目前改爲在渲染進程中被調用
 * 菜單的交互事件，須要在 渲染進程 中指定
 */
exports.MacOSToolbar = {

    menuClicked(menuItem, browserWindow, event) {
        // browserWindow.webContents.send('menuClicked', menuItem);

        var command = UICommandManager.getCommand(menuItem.id);
        if (!command) {
            return;
        }

        command.run();
    },

    createMacOSToolbar() {
        // Cli 環境執行
        var menuClicked = this.menuClicked;
        var fileMenus = [];
        var fileCommands = FileToolMenu.allItems();
        for (let i = 0; i < fileCommands.length; i++) {
            const command = fileCommands[i];

            let menu = {
                id: command.key,
                label: command.label,
                accelerator: command.shortcut,
                click: menuClicked,
            };
            if (command.type == 'separator') {
                menu = {
                    type: "separator",
                };
            }
            if (command.run) {
                
            }
            fileMenus.push(menu);
        }