幫朋友公司作了點東西，他說有不少bug，我一看，基本問題都是瀏覽器兼容引發的，而electron內帶Chromium內核，正好一直想嘗試下electron,因此研究了一波。這裏只是簡單的使用electron做爲殼，把本身的項目嵌進去，更多深刻研究之後再來。php
打包本身的項目
這裏沒啥說的本身的項目打包下來,相似下面 
html
快速開始electron
上手electron，官方提供了一個很是好的快速上手實例"electron-quick-start"。node
- git clone https://github.com/electron/electron-quick-start
- cd electron-quick-start
- npm install
- 把本身的項目拷進去
- npm run start就啓動起來了
- npm run packager就打包出來了
熱更新
- 由於Chromium的緣故，即便很小的項目打包出來也有120M左右，若是給客戶使用，不可能每次有點改動就讓客戶從新安裝，顯然咱們須要熱更新。
- 熱更新的原理：每次啓動程序咱們就去拿本地的版本號和服務器上的版本號作對比，若是不一致就去請求資源，下載下來更新本地文件。
- 首先咱們觀察打包出來的文件，發現原始文件都放在resources/app下面的，也便是說咱們下載下來的文件直接覆蓋到resources/app下就能夠達到更新了。
- 這裏我推薦七牛雲，免費的可使用10G內存，咱們把更新資源放上去，須要版本號package.json和更新包dist.zip
- 而後改寫electron配置main.js，加入檢測更新的代碼
/**
* 檢測更新
*/
// const baseUrl = "./";
const baseUrl = "./resources/app/";
const fileUrl = "http://pm72qibzx.bkt.clouddn.com/";//這裏須要修改成本身的資源外網
(function () {
return new Promise((resolve, reject) => {
request(
{
url: `${fileUrl}package.json?v=${new Date().getTime()}`,//請求package.json，與本地對比版本號
},
(error, res, body) => {
try {
if (error || res.statusCode !== 200) {
throw '更新版本號失敗，請聯繫管理員';
}
const json = JSON.parse(body);
const { version, description } = json;
const localVersion = electron.app.getVersion();
// console.log(version, localVersion)
if (version != localVersion) {
mainWindow.webContents.send('updating', '更新中')
console.log('need update')
dialog.showMessageBox({
type: 'info',
title: '發現新版本',
message: '請點擊按鈕進行更新，預計持續幾分鐘，期間請不要操做，更新後會自動重啓',
buttons: ['立刻更新']
},
// (index) => {
// if (index == 0) {
// mainWindow.setProgressBar(0.5)
// } else {
// }
// }
)
mainWindow.setProgressBar(0.5);
downLoad()
.then(() => {
console.log('update success')
//重寫版本號到本地
fs.readFile(`${baseUrl}package.json`, function (err, data) {
if (err) {
return console.error(err);
}
let newData = JSON.parse(data);
newData.version = version;
fs.writeFile(`${baseUrl}package.json`, JSON.stringify(newData), function (err) {
if (err) {
return console.error(err);
}
// 重啓
app.relaunch({ args: process.argv.slice(1) });
app.exit(0);
});
});
})
} else {
console.log('no update')
}
} catch (err) {
reject(err);
}
})
})
})()
/**
* 更新
*/
const downLoad = () => {
return new Promise((resolve, reject) => {
const stream = fs.createWriteStream(`${baseUrl}temp/dist.zip`);
const url = `${fileUrl}dist.zip?v=${new Date().getTime()}`;
request(url).pipe(stream).on('close', () => {
const unzip = new adm_zip(`${baseUrl}temp/dist.zip`); //下載壓縮更新包
unzip.extractAllTo(`${baseUrl}`, /*overwrite*/true); //解壓替換本地文件
resolve()
});
})
}
windows下的安裝包
- 這裏使用electron-winstaller
- 配置在build.js
resultPromise = electronInstaller.createWindowsInstaller({
appDirectory: path.join('./electron/ElectronTest-win32-x64'), //入口
outputDirectory: path.join('./installer/installer64'), //出口
authors: 'yyt',
exe: 'ElectronTest.exe', //名稱
setupIcon: path.join('icon.ico'),//安裝圖標，必須本地
iconUrl: 'http://pm72qibzx.bkt.clouddn.com/icon.ico',//程序圖標，必須url
noMsi: true,
});
- node build.js 打包成win安裝包
完成
- 完成安裝後，玩耍吧
源碼
- 刪除electron和install,防止老文件
- 考入本身項目文件到跟目錄，覆蓋index.html
- cnpm i 或者npm i
- 修改main.js中fileUrl爲本身的更新包資源地
- 修改build.js中的安裝包名稱，圖標等
- npm run packager 打包
- 注意：須要先進入electron項目，‘好比D:\phpStudy\WWW\others\electron-test\electron\ElectronTest-win32-x64\resources\app’，安裝cnpm i request adm-zip
- node build.js 打包成win安裝包
最後
你們好，這裏是「 TaoLand 」，這個博客主要用於記錄一個菜鳥程序猿的Growth之路。這也是本身第一次作博客，但願和你們多多交流，一塊兒成長！文章將會在下列地址同步更新…… 我的博客：www.yangyuetao.cn 小程序：TaoLandgit
原文出處：https://www.cnblogs.com/TaoLand/p/10344235.htmlgithub