聊聊vue番茄鐘與electron?打包問題

更新時間：2022年06月03日 23:06:27 作者：空城機

這篇文章主要介紹了vue番茄鐘與electron?打包問題，本文通過實例結(jié)合相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

序

平時對自己學(xué)習(xí)工作計劃安排可以使用番茄鐘去規(guī)劃。

番茄鐘：一個很簡單的時間管理方法，設(shè)置一個固定時間，根據(jù)自己情況調(diào)整，這個時間是一個倒計時，在這段時間內(nèi)認(rèn)真去做一件事情，然后一個番茄鐘結(jié)束后，休息大概五分鐘，重新番茄鐘。這可以幫助我們量化自己的工作和效率，提醒我們休息和工作。

本人之前在手機上下載過番茄鐘的應(yīng)用，但是使用了一段時間后發(fā)現(xiàn)對我來說并不能算十分合適，準(zhǔn)備制作一個簡單的番茄鐘應(yīng)用。

原因：

作為一個程序員，平時工作日都是在使用電腦，手機放在旁邊，每次番茄鐘到了還要去點手機非常不方便
平時會戴著耳機，可能番茄鐘響了都聽不到
作為一個前端程序員，難道自己不能寫一個電腦上的番茄鐘桌面應(yīng)用工具嘛?。?！

動手

準(zhǔn)備工作

功能規(guī)劃

在制作一款番茄鐘前肯定要進(jìn)行規(guī)劃，先規(guī)劃自己的番茄鐘需要什么功能，然后使用xmind簡單畫了一下自己需要的功能（版本0.1.0肯定先簡單點，下次一定優(yōu)化??）

開發(fā)工具

使用的工具：vs code

使用vue cli搭建界面框架，然后通過electron將界面打包成桌面應(yīng)用。

創(chuàng)建和修改的任務(wù)數(shù)據(jù)在electron通過node進(jìn)行存儲在項目的json文件當(dāng)中。

開發(fā)過程

創(chuàng)建項目

PS:打包坑比較多，關(guān)于我在打包那一塊趟過的坑準(zhǔn)備獨立寫在另一份markdown里

使用vue create tomato創(chuàng)建出番茄鐘項目

然后準(zhǔn)備添加需要的包：

electron部分：

安裝命令：yarn electron electron-builder -D

雖然vue cli可以使用vue add electron-builder安裝，但這次我還是用最原始方式來。

vue界面需要的：

一些符號可以使用font-awesome來引入
現(xiàn)在我習(xí)慣使用less來寫css
px2rem-loader可以將px轉(zhuǎn)換成rem，雖然對本項目作用不大

安裝命令：yarn add less less-loader@7.3.0 font-awesome px2rem-loader

PS: 注意安裝的less-loader版本號，如果版本過高，使用less運行項目時會出現(xiàn)報錯

配置項目

創(chuàng)建合適的vue.config.js配置文件

以下是我vue.config.js文件

module.exports = {
    publicPath: process.env.NODE_ENV === 'development' ? '/' : './',  //'./',
    outputDir: 'dist',
    configureWebpack: {
      resolve: {
        alias: {
          'assets': '@/assets',
          'common': '@/common',
          'components': '@/components',
          'network': '@/network',
          'views': '@/views',
          'plugins': '@/plugins',
        }
      },
    },
    devServer: {
      port: 9001
    },
    pluginOptions: { 
        // electronBuilder可以不用配置了，這是Vue CLI Plugin Electron Builder添加的才會需要
        electronBuilder: {
        }
    },
    chainWebpack: config => {
        config.module
        .rule('less')
        .oneOf('vue')
        .use('px2rem-loader')
        .loader('px2rem-loader')
        .before('postcss-loader') // this makes it work.
        .options({ remUnit: 16, remPrecision: 2 })  // remUnit：讓1rem對標(biāo)多少px
        .end()  //這里就是引用插件
    }
}

現(xiàn)在測試一次vue項目是否正常運行，yarn serve命令運行項目。正常即可

接下來對electron運行進(jìn)行配置，在package.json配置文件

"main": "electron_main.js",
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "newbuild": "electron-builder --win --x64",
    "start": "chcp 65001 && electron ."
},
"build": {
    "productName": "tomato",
    "directories": {
        "output": "electron_dist"
    },
    "asar": false
},

并且創(chuàng)建一個electron_main.js文件，可以參考我之前的文章：《vue + electronの文件讀寫》 xie.infoq.cn/article/ba9…

因為代碼太長，這里就不細(xì)說了......

const electron = require('electron');
// 控制應(yīng)用生命周期的模塊。
const {app, ipcMain} = electron;
// 創(chuàng)建原生瀏覽器窗口的模塊。
const {BrowserWindow} = electron;
let mainWindow;
function createWindow() {
  // 創(chuàng)建瀏覽器窗口。
  mainWindow = new BrowserWindow({
    width: 480, 
    height: 670,
    webPreferences: {
      nodeIntegration: true, 
      contextIsolation: false
    }
  });
  // 加載應(yīng)用的 index.html。
  // mainWindow.loadURL(`file://${__dirname}/dist/index.html`);
  mainWindow.loadURL(`http://localhost:9001/`);
  // 啟用開發(fā)工具
  mainWindow.webContents.openDevTools();
}

// Electron 會在初始化后并準(zhǔn)備
app.on('ready', createWindow);
// 當(dāng)全部窗口關(guān)閉時退出。
app.on('window-all-closed', () => {
  // 否則絕大部分應(yīng)用及其菜單欄會保持激活。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  // 絕大部分應(yīng)用會重新創(chuàng)建一個窗口。
  if (mainWindow === null) {
    createWindow();
  }
});

然后使用yarn start能成功出現(xiàn)彈窗即可。界面electron調(diào)用時先使用http://localhost:9001/ 即可。mainWindow.loadURL(http://localhost:9001/`);`

界面編寫

接下來就該對頁面進(jìn)行修飾，設(shè)計一個合適自己的番茄鐘頁面?？梢詤⒖紕e的應(yīng)用番茄鐘頁面。界面樣式編寫代碼不做過多敘述，雖然我是前端，但是如何設(shè)計才是值得記錄的。

注意：不要加vue-router來做路由導(dǎo)航，不然等一下打包是大坑

當(dāng)前沒有任務(wù)的界面: (左上角實時時間使用setInterval設(shè)置間隔一秒，后續(xù)番茄鐘任務(wù)倒計時也需要用到)

設(shè)計一份任務(wù)卡片需要的數(shù)據(jù)和屬性：（雖然有些目前沒有用到）

屬性	作用
name	任務(wù)名稱
creatTime	任務(wù)創(chuàng)建時間
duringTime	任務(wù)需要持續(xù)的時間
startFlag	是否開始
bgSrc	背景圖片
taskEndCount	任務(wù)完成次數(shù)，提前結(jié)束的不算
taskId	任務(wù)id

然后先使用測試數(shù)據(jù)，不做文件之間的存儲。

taskList: [
    {
        name: '學(xué)習(xí)node',
        creatTime: '',
        duringTime: 10,
        startFlag: false,
        bgSrc: 'bg1.png',
        taskEndCount: 0, 
        taskId: 'adfa455a'
    },
]

增加添加任務(wù)彈窗和倒計時彈窗

這里可以定義一些屬性，來判斷當(dāng)前的倒計時以及真正經(jīng)過的時間：

absTipFlag: false,   // 添加任務(wù)彈窗
isRuning: false,  // 是否有任務(wù)正在進(jìn)行中
countdownTime: '',  //任務(wù)倒計時
taskbeginTime: '',  // 任務(wù)開始時間
taskendTime: '',   // 任務(wù)結(jié)束時間
taskduringTime: 0,  // 任務(wù)持續(xù)時間
curTask: null,   // 當(dāng)前正在進(jìn)行的任務(wù)
hasProcessTime: 0,  // 任務(wù)真正耗時

之前說到的時間進(jìn)度：

setInterval(()=>{
    this.currentTime();
    this.curTime = `${this.date.year}年${this.date.mounth}月${this.date.date}日 ${this.date.hour}:${this.date.minute}:${this.date.second}`;

    if (this.isRuning && this.taskduringTime > 0) {
        this.hasProcessTime++;
        this.taskduringTime--;
    }
}, 1000 )

并且在倒計時彈窗完成后，可以調(diào)用Notification來實現(xiàn)消息通知。

這里可以參考：《Notification 發(fā)送消息》 xie.infoq.cn/article/6d4…

// 通過window的消息通知告知任務(wù)結(jié)束
notification(){
    let options;
    if (this.hasProcessTime == this.curTask.duringTime * 60) {
        options = {
            body: `請休息一下吧，工作辛苦啦！`,
            icon: require('../../assets/img/icon1.png')
        }
        new Notification(`恭喜，你設(shè)置的 ${this.curTask.name} 已完成`, options);
    } else {
        options = {
            body: `任務(wù)尚未成功，期待下次重來`,
            icon: require('../../assets/img/icon2.png')
        }
        new Notification(`抱歉，您提前結(jié)束了工作`, options);
    }
}

主進(jìn)程和渲染進(jìn)程文件讀存通信

界面上的工作基本已經(jīng)完成了，下面就是對electron發(fā)起進(jìn)攻了。

因為要做一個桌面應(yīng)用，并且番茄鐘的任務(wù)數(shù)據(jù)并不大，所以數(shù)據(jù)最好能夠直接存在本地的文件當(dāng)中。現(xiàn)在就需要使用electron的主進(jìn)程和渲染進(jìn)程互相進(jìn)行數(shù)據(jù)交互。

因為在electron可以直接使用node，所以直接在public文件夾下創(chuàng)建一個static文件夾，里面存放讀寫方法和tomato.json數(shù)據(jù)文件。

請參考：《vue + electronの文件讀寫》

electron_main.js文件中添加ipcMain響應(yīng)方法：

注意，這里需要使用path.join(__dirname）來設(shè)置讀取文件的路徑，雖然調(diào)試時直接相對位置也可以，但是在打包后是找不到文件的

const path = require('path')
const { readFile, writeFile } = require('./src/assets/fs/readFs')
// 監(jiān)聽渲染進(jìn)程發(fā)來的消息
ipcMain.on('render-msg', async (event, arg) => {
  if (arg == '獲取番茄鐘') {
    let con = await readFile(path.join(__dirname, './public/static/tomato.json') ).then(r=>r).catch(err=>err)
    event.sender.send('tomato-list', con)
  }
})

// 保存數(shù)據(jù)
ipcMain.on('save-msg', async (event, arg) => {
  let con = await writeFile(path.join(__dirname, './public/static/tomato.json'), JSON.stringify(arg));
  console.log(con)
})

vue組件當(dāng)中使用window.ipcRenderer發(fā)送請求和響應(yīng)接收：

window.ipcRenderer.send('render-msg', '獲取番茄鐘')
window.ipcRenderer.on('tomato-list', (event, arg) => {
    try {
        // console.log(arg)
        this.taskList = JSON.parse(arg);
    } catch(e) {
        this.taskList = [];
    }
})

...
// 數(shù)據(jù)存入json中
window.ipcRenderer.send('save-msg', this.taskList);

......

此時，經(jīng)過一系列的操作后，終于能夠創(chuàng)建任務(wù)并保存到j(luò)son文件當(dāng)中了，而且也能成功讀取文件。