新星计划 Electron+vue2 桌面应用 2 项目编写

练手的项目，需求简单，打算做平面设计社交类的软件。

一、需求

练手用，简单处理，写个简单的记事本，本地保存txt，能导出为其他格式的文件。

获取用户的网卡地址用于数据加密，本地保存加密后的文件，导出为明文数据。

可以选择系统样式、自定义日志路径,可见软件信息（版本等）。

二、涉及vue插件

vue 使用版本2；vue-router 使用 3；vuex 使用 3.6.2。

npm install vue-router@3
npm install vuex@3.6.2

npm view 名字 versions --json //查看版本
npm view 名字 version --json //查看最新版本

npm install vue2-editor //富文本框
npm install vant@latest-v2//vant

三、涉及api使用

果然呀，不出bug都没啥可写的。前端基础不好，有bug要调好久……

1、工具栏菜单

这个按照官网写就好，网址：Menu | Electron

不会报啥错，但是项目结果可以改下。

项目结构：

-dist  //编译后的vue文件
-electron //electron相关文件
    menu.js //菜单设置 electron的main.js 引入
-src  //vue文件
    -static //存放静态文件
        electron_common.js //vue中关于electron的js 
        //这文件中不要引入electron 有可能报错 反正我是不会改……
        main.js //vue入口文件
preload.js //主线程和渲染线程桥接文件
mian.js //electron入口文件 

//electron main.js
const { app,BrowserWindow,ipcMain,Menu, ipcRenderer } = require('electron');


const path = require('path');
const url = require('url');

//引入主进程操作js
require('./electron/menu')//工具栏菜单


let mainWindow;
function createWindow() {
    ……
}
//menu.js 菜单模板官网上有
const { Menu } = require('electron');
//设置菜单
const template =[
    ……
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

2、右键菜单

这菜单调了好久……但道理其实挺简单。

先说官网:Menu | Electron

 按照官网这个教程，联系它的前后文，renderer是被index.html调用，在vue2项目中应该是引入到app中的，在public/index.html中引入不知是否可行，没试过。

在我这个例子中相当于./src/static/electron_common.js,在vue的main.js中应该是./static/electron_common.js,/src/main.js中"./"指的是"/src/"。

使用ipcRenderer需要引入electron,vue编译的时候回报“fs”找不到，查了下原因，大概是node的问题，需要再做配置。试了几个，都是各种报错。我一个主要写后端的……前端基础不好真心头大。

然后根据electron最基础的教程中俩线程的交互，设置main.js监听，终于正常使用，代码如下。

//./src/static/electron_common.js
export const rightclick = async () => {
    window.addEventListener('contextmenu', (e) => {
        e.preventDefault()
        window.electronAPI.rightclick()
    })
}
//./src/main.js
import Vue from 'vue'
import App from './App.vue'
import VueEditor from 'vue2-editor';
import { rightclick } from "./static/electron_common" //加载

rightclick()//运行

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

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


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

contextBridge.exposeInMainWorld('electronAPI', {
    //test: () => ipcRenderer.invoke('test'),
    rightclick: () => ipcRenderer.invoke('right_click')
})

//./main.js
const { app,BrowserWindow,ipcMain,Menu, ipcRenderer } = require('electron');


const path = require('path');
const url = require('url');

//引入主进程操作js
require('./electron/menu')//工具栏菜单


let mainWindow;
function createWindow() {
    // 创建一个窗口，大小 800 * 600
    mainWindow = new BrowserWindow({
        width: 800, 
        height: 600,
        webPreferences:{
            nodeIntergration:true,
            preload:path.join(app.getAppPath(),"preload.js")
        }
    });
    //ipcMain.handle('test', () => "qweqwe")
    mainWindow.loadFile('index.html')

    mainWindow.loadURL(url.format({
        pathname: path.join(app.getAppPath(),'dist/index.html'),
        protocol: 'file:',//协议
        slashes: true//slashes属性为布尔值，如果协议protocol冒号后根的是两个斜杠（/），那么值为true
    }));
 
    // 自动打开调试台
    mainWindow.webContents.openDevTools({detach: true });   
    mainWindow.on("closed",function(){
        mainWindow = null;
    })
}
//监听
ipcMain.handle('right_click', (event) => {
    const template = [
        {
            label:"复制",
            click:()=>{

            }
        },
        {
            label:"粘贴",
            click:()=>{
                    
            }
        }
    ]
    const menu = Menu.buildFromTemplate(template)
    menu.popup(BrowserWindow.fromWebContents(event.sender))
})
//启动应用加载
app.on('ready', createWindow);    
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit();
    }
})
app.on('activate', function () {
        if (mainWindow === null) createWindow();
});

然后每次改完 都要先编译（npm run build）在运行（npm run start）,有点麻烦