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

Posted on by

序

平時對自己學習工作計劃安排可以使用番茄鐘去規劃。

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

本人之前在手機上下載過番茄鐘的應用，但是使用瞭一段時間後發現對我來說並不能算十分合適，準備制作一個簡單的番茄鐘應用。

原因：

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

動手

準備工作

功能規劃

在制作一款番茄鐘前肯定要進行規劃，先規劃自己的番茄鐘需要什麼功能，然後使用xmind簡單畫瞭一下自己需要的功能（版本0.1.0肯定先簡單點，下次一定優化🙉）

開發工具

使用的工具：vs code

使用vue cli搭建界面框架，然後通過electron將界面打包成桌面應用。

創建和修改的任務數據在electron通過node進行存儲在項目的json文件當中。

開發過程

創建項目

PS:打包坑比較多，關於我在打包那一塊趟過的坑準備獨立寫在另一份markdown裡

  • 使用vue create tomato創建出番茄鐘項目

  • 然後準備添加需要的包：

electron部分：

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

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

vue界面需要的：

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

安裝命令：yarn add less [email protected] font-awesome px2rem-loader

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

配置項目

  • 創建合適的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對標多少px
        .end()  //這裡就是引用插件
    }
}
  • 現在測試一次vue項目是否正常運行，yarn serve命令運行項目。正常即可

  • 接下來對electron運行進行配置，在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
},

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

因為代碼太長，這裡就不細說瞭……

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

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

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

界面編寫

  • 接下來就該對頁面進行修飾，設計一個合適自己的番茄鐘頁面。可以參考別的應用番茄鐘頁面。 界面樣式編寫代碼不做過多敘述，雖然我是前端，但是如何設計才是值得記錄的。

註意：不要加vue-router來做路由導航，不然等一下打包是大坑

當前沒有任務的界面: (左上角實時時間使用setInterval設置間隔一秒，後續番茄鐘任務倒計時也需要用到)

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

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

然後先使用測試數據，不做文件之間的存儲。

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

  • 增加添加任務彈窗和倒計時彈窗

這裡可以定義一些屬性，來判斷當前的倒計時以及真正經過的時間：

absTipFlag: false,   // 添加任務彈窗
isRuning: false,  // 是否有任務正在進行中
countdownTime: '',  //任務倒計時
taskbeginTime: '',  // 任務開始時間
taskendTime: '',   // 任務結束時間
taskduringTime: 0,  // 任務持續時間
curTask: null,   // 當前正在進行的任務
hasProcessTime: 0,  // 任務真正耗時

之前說到的時間進度：

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 )
  • 並且在倒計時彈窗完成後，可以調用Notification來實現消息通知。

這裡可以參考：《Notification 發送消息》 xie.infoq.cn/article/6d4…

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

主進程和渲染進程文件讀存通信

  • 界面上的工作基本已經完成瞭，下面就是對electron發起進攻瞭。

因為要做一個桌面應用，並且番茄鐘的任務數據並不大，所以數據最好能夠直接存在本地的文件當中。 現在就需要使用electron的主進程和渲染進程互相進行數據交互。

因為在electron可以直接使用node，所以直接在public文件夾下創建一個static文件夾，裡面存放讀寫方法和tomato.json數據文件。

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

electron_main.js文件中添加ipcMain響應方法：

註意，這裡需要使用path.join(__dirname）來設置讀取文件的路徑，雖然調試時直接相對位置也可以，但是在打包後是找不到文件的

const path = require('path')
const { readFile, writeFile } = require('./src/assets/fs/readFs')
// 監聽渲染進程發來的消息
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)
  }
})

// 保存數據
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組件當中使用window.ipcRenderer發送請求和響應接收：

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 = [];
    }
})

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

……

此時，經過一系列的操作後，終於能夠創建任務並保存到json文件當中瞭，而且也能成功讀取文件。

打包

  • 現在要開始打包工作瞭，因為我使用的不是vue add electron-builder，所以不能一口氣打包，不過也沒有關系。

第一步： 使用yarn build將vue項目打包出來，會生成一個dist文件夾。即使把裡面的index.html拖到瀏覽器裡，也是會有效果的，不過require會出錯，因為瀏覽器不允許。

第二步：先將electron_main.js中的mainWindow.loadURL修改回來，變成： mainWindow.loadURL(file://${__dirname}/dist/index.html);。不然打包出來應用會是一片空白

運行yarn newbuild命令，根據之前package.json中的build配置，會生成electron_dist文件夾

如果打包出錯，可以參考：《關於 electron-builder 打包遇到的一點點問題》

如何在electron_dist中下載或者直接打開

創建一個1分鐘任務進行測試：(這裡我任務次數記錄沒做好，不過不影響主要功能，關閉後重新打開任務也還是存在的)

到此，番茄鐘0.1.0版本已經完成，並且能安裝到電腦上瞭。

到此這篇關於vue番茄鐘&electron 打包的文章就介紹到這瞭,更多相關vue electron 打包內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：