一、專案簡介
基於vue3.x全家桶和electron跨平臺技術仿製QQ|微信聊天應用。使用了Vue3.0+Electron11+Antdv+Vuex4+V3Layer+V3Scrll等技術構架開發。基本實現了圖文訊息、連結/視訊/圖片預覽、拖拽傳送圖片、截圖dll、朋友圈等功能。
技術框架
- 編輯器：vscode
- Vue3全家桶：vue3.0+vuex4+vue-router@4
- 跨平臺框架：electron11.2.3
- 打包工具：vue-cli-plugin-electron-builder
- UI元件庫：ant-design-vue (螞蟻金服網頁vue3元件庫)
- 彈出框元件：v3layer (vue3桌面端彈窗元件)
- 滾動條元件：v3scroll (vue3自定義模擬滾動條)
- 環境配置：nodejs + npm/yarn
專案結構目錄
vue3自定義dialog和scroll滾動條
專案中的一部分彈窗是使用vue3自定義元件實現，另外滾動條是基於vue3模擬系統滾動條來實現效果。
鑑於之前有過相關的分享，這裡就不詳細介紹了。
vue3自定義元件之全域性dialog彈窗元件
vue3自定義元件之模擬美化系統滾動條元件
electron自定義頂部選單欄
為了讓UI美觀一致，專案採用的是無邊框模式。建立窗體的時候設定frame:false即可實現去掉軟體頂部自帶選單。
可以通過-webkit-app-region:drag來實現自定義拖拽區域。
electron提供了相應方法來實現自定義最大化/最小化/關閉按鈕。
至於具體如何實現自定義導航，大家可以去看看下面這篇文章。
electron+vue3自定義頂部導航條|最大/小/關閉按鈕
另外需要注意：拖拽區域右鍵會彈出如下系統選單。
為了追求完美，如何去掉呢？經過一番測試，暫時可以通過如下方法遮蔽掉。
// 去掉系統右鍵選單
win.hookWindowMessage(278, () => {
win.setEnabled(false)
setTimeout(() => {
win.setEnabled(true)
}, 100)
return true
})electron仿QQ托盤圖示/閃爍效果
大家都知道QQ圖示的閃爍功能讓人影響深刻。使用electron一樣也可以實現這一效果。
在開發之前，需要準備好兩個尺寸一致的ico圖示，其中一個透明就好。
然後通過定時器，來進行切換顯示即可。
// 建立系統托盤圖示
let tray = null
let flashTimer = null
let trayIco1 = path.join(__dirname, '../static/tray.ico')
let trayIco2 = path.join(__dirname, '../static/tray-empty.ico')
createTray() {
const trayMenu = Menu.buildFromTemplate([
{
label: '我線上上', icon: path.join(__dirname, '../static/icon-online.png'),
click: () => {...}
},
{
label: '忙碌', icon: path.join(__dirname, '../static/icon-busy.png'),
click: () => {...}
},
{
label: '隱身', icon: path.join(__dirname, '../static/icon-invisible.png'),
click: () => {...}
},
{
label: '離開', icon: path.join(__dirname, '../static/icon-offline.png'),
click: () => {...}
},
{type: 'separator'},
{
label: '關閉所有聲音', click: () => {...},
},
{
label: '關閉頭像閃動', click: () => {
this.flashTray(false)
}
},
{type: 'separator'},
{
label: '開啟主視窗', click: () => {
try {
for(let i in this.winLs) {
let win = this.getWin(i)
if(!win) return
if(win.isMinimized()) win.restore()
win.show()
}
} catch (error) {
console.log(error)
}
}
},
{
label: '退出', click: () => {
try {
for(let i in this.winLs) {
let win = this.getWin(i)
if(win) win.webContents.send('win-logout')
}
app.quit()
} catch (error) {
console.log(error)
}
}
},
])
this.tray = new Tray(this.trayIco1)
this.tray.setContextMenu(trayMenu)
this.tray.setToolTip(app.name)
this.tray.on('double-click', () => {
// ...
})
}
// 托盤圖示閃爍
flashTray(flash) {
let hasIco = false
if(flash) {
if(this.flashTimer) return
this.flashTimer = setInterval(() => {
this.tray.setImage(hasIco ? this.trayIco1 : this.trayIco2)
hasIco = !hasIco
}, 500)
}else {
if(this.flashTimer) {
clearInterval(this.flashTimer)
this.flashTimer = null
}
this.tray.setImage(this.trayIco1)
}
}
// 銷燬托盤圖示
destoryTray() {
this.flashTray(false)
this.tray.destroy()
this.tray = null
}這裡需要注意的是，圖示路徑容易出錯，除錯發現electron主程式中__dirname指向了dist_electron目錄。
這樣就可以在根目錄下新建一個static目錄，然後path.join(__dirname, '../static/favicon.ico')就能識別到本地圖示了。
electron-builder打包配置
在建立專案的時候，會有一個vue.config.js檔案。可用來配置一些簡單的vue3專案，另外也可以進行一些electron打包配置項。
/**
* @Desc vue3+electron專案/打包配置
* @Time andy by 2021-02
* @About Q：282310962 wx：xy190310
*/
const path = require('path')
module.exports = {
// 基本路徑
// publicPath: '/',
// 輸出檔案目錄
// outputDir: 'dist',
// assetsDir: '',
// 環境配置
devServer: {
// host: 'localhost',
// port: 8080,
// 是否開啟https
https: false,
// 編譯完是否開啟網頁
open: false,
// 代理配置
// proxy: {
// '^/api': {
// target: '<url>',
// ws: true,
// changeOrigin: true
// },
// '^/foo': {
// target: '<other_url>'
// }
// }
},
// webpack配置
chainWebpack: config => {
// 配置路徑別名
config.resolve.alias
.set('@', path.join(__dirname, 'src'))
.set('@assets', path.join(__dirname, 'src/assets'))
.set('@components', path.join(__dirname, 'src/components'))
.set('@module', path.join(__dirname, 'src/module'))
.set('@plugins', path.join(__dirname, 'src/plugins'))
.set('@layouts', path.join(__dirname, 'src/layouts'))
.set('@views', path.join(__dirname, 'src/views'))
},
// 外掛配置
pluginOptions: {
electronBuilder: {
// 配置後可以在渲染程式使用ipcRenderer
nodeIntegration: true,
// 專案打包引數配置
builderOptions: {
"productName": "electron-qchat", //專案名稱 打包生成exe的字首名
"appId": "com.example.electronqchat", //包名
"compression": "maximum", //store|normal|maximum 打包壓縮情況(store速度較快)
"artifactName": "${productName}-${version}-${platform}-${arch}.${ext}", //打包後安裝包名稱
// "directories": {
// "output": "build", //輸出資料夾（預設dist_electron）
// },
"asar": false, //asar打包
// 拷貝靜態資源目錄到指定位置
"extraResources": [
{
"from": "./static",
"to": "static"
},
],
"nsis": {
"oneClick": false, //一鍵安裝
"allowToChangeInstallationDirectory": true, //允許修改安裝目錄
"perMachine": true, //是否開啟安裝時許可權設定（此電腦或當前使用者）
"artifactName": "${productName}-${version}-${platform}-${arch}-setup.${ext}", //打包後安裝包名稱
"deleteAppDataOnUninstall": true, //解除安裝時刪除資料
"createDesktopShortcut": true, //建立桌面圖示
"createStartMenuShortcut": true, //建立開始選單圖示
"shortcutName": "ElectronQChat", //桌面快捷鍵圖示名稱
},
"win": {
"icon": "./static/shortcut.ico", //圖示路徑
}
}
}
}
}最後還需注意：
- 專案路徑最好不要包含中文，打包的時候會報錯！
- 在頁面中最好不要使用
getCurrentInstance來操作store或router，打包也會報錯！ - 在頁面中使用
ipcRenderer或remote，記得在建立視窗的時候配置nodeIntegration:true和enableRemoteModule:true，否則打包會報錯！ - 呼叫dll來截圖，打包後無效！可以配置extraResources來解決。
// 拷貝靜態資源目錄到指定位置
"extraResources": [
{
"from": "./static",
"to": "static"
},
],好了，以上就是vue3+electron開發跨平臺仿製QQ聊天軟體的一些介紹。希望大家喜歡哈~~
本作品採用《CC 協議》，轉載必須註明作者和本文連結