新星计划 Electron+vue2 桌面应用 3 项目记录

一、菜单配置

菜单项：菜单项 | Electron
role：

undo - 撤销。
about - 触发原生信息面板 (在 Window 中自定义消息盒子, 本身不提供).
redo
cut - 剪切。
copy - 复制。
paste - 粘贴。
pasteAndMatchStyle-带样式粘贴
selectAll - 全选。
delete -删除
minimize - 最小化当前窗口。
close - 关闭当前窗口
quit - 退出程序
reload - 重新加载当前窗口。
forcereload - 忽略缓存，重新加载当前窗口。
toggledevtools - 在当前窗口中隐藏/显示开发者工具。
togglefullscreen - 将当前窗口切换至全屏模式。
resetzoom - 将主页的缩放级别重置为初始大小.
zoomin - 主页面放大 10%.
zoomout -主页面缩小 10%.
toggleSpellChecker - 启用/禁用内置拼写检查器。
fileMenu - 默认的“文件”菜单（关闭/退出）
editMenu-默认的 "编辑" 菜单 (包括撤消、复制等)
viewMenu - 默认的“视图”菜单（包括重新加载、开发者工具等）
windowMenu - 默认的“窗口”菜单（包括最小化、缩放等）

二、子窗口

子窗口需要遵循主窗口配置，比如起始页加载和桥接文件设置。因为主窗口和子窗口都是BrowserWindow对象。

桥接是关键，不然主线程和子线程不能通信。

官网文档：BrowserWindow | Electron

其次起始页加载文件可以是url，但是若url打不开子窗口也不会打开，调试不会报错，顶多报页面打不开。

三、主线程向子线程通讯

官网教程：进程间通信 | Electron

这部分官网写的很细。

现在网上的教程基本上是，渲染线程引入的js中导入electron，但最先版的electron不支持，传递的数据都改成俩线程通讯九城。

例子，路径跳转；

//主线程 右键菜单
const template=[
        {
            label:'系统',
            submenu:[
                {
                    label:'关于',
                    click:()=>{
                        const win = new BrowserWindow({ 
                            title:'系统参数',
                            width:400,
                            height:400,
                            show: false,
                            frame :true,
                            closable :true,
                            modal: true,
                            parent: mainWindow,
                            fullscreenable:false,
                            type:"toolbar",
                            autoHideMenuBar:true,
                            resizable:false,
                            webPreferences:{
                                nodeIntergration:true,
                                preload:path.join(app.getAppPath(),"preload.js")
                            }
                        })
                        //win.loadURL('https://www.csdn.net')
                        win.loadURL(url.format({
                            pathname: path.join(app.getAppPath(),'dist/index.html'),
                            protocol: 'file:',//协议
                            slashes: true
                        }));
                        win.once('ready-to-show', () => {
                            win.show()
                            //主线程发送到渲染进程 about为vue-route对应路径 
                            win.webContents.send('winhref', 'about');
                        })
                    }
                }
            ]
        }
    ];

//preload.js 桥接文件
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
    //test: () => ipcRenderer.invoke('test'),
    rightclick: () => ipcRenderer.invoke('right_click'),
    //暴露 IPC  功能
    winhref:(callback)=>ipcRenderer.on('winhref',callback)
})

//渲染进程 这个函数需要在 vue的main.js里调用并执行
import router from "@/route/index"
export const winhref = async()=>{
    //主进程向渲染进程通讯
    console.log("winhref");
    window.electronAPI.winhref((event, value) => {
        console.log(event,value)
        router.push(value)
    })
}


//vue main.js
import Vue from 'vue'
import App from './App.vue'
import VueEditor from 'vue2-editor';
import router from "@/route/index"
import { rightclick,winhref } from "./static/electron_common"

rightclick()
winhref()

Vue.config.productionTip = false
Vue.use(VueEditor);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

先告一段落，之后试下php swoole vue的聊天室，等都弄会，搞个桌面版。