Electron 结合WEB项目制作桌面APP之二 ---- electron与web的结合开发体验
引言
开始尝试用electron搭建了一个hello world，体验还是挺不错的，对于一个web开发者来说，能把自己的开发成果做成一个桌面app，那将是一步巨大的跨越
藉此，再深入学习后，开始了第二个“hello world”
目标
- 将百度首页做成我的app首页
- 做一个简易的视频播放器
千里之行始于足下，electron还没完全学会，不妨碍我去使用它
下载electron官方推荐的快速模板: 链接
git clone https://github.com/electron/electron-quick-start.git cd electron-quick-start # 安装依赖 yarn install # 安装打包工具 yarn add electron-packager -D # 测试下 yarn run start # 成功跑起来了，并且出现了官方的默认首页文本开始折腾这个快速模板
- 修改package.json，将模板变成我们自己的项目
// 修改项目名称 "name": "百度", // 在script中添加打包命令 "scripts": { "start": "electron .", "package": "electron-packager . baidu --platform=win32 --arch=x64 --out=./dist --asar --app-version=2.0.1 --icon=lte_logo.ico --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js|node_modules)\"" },
- 修改package.json，将模板变成我们自己的项目
百度一下啦~
第一种方案，修改main.js，将windows指向的files协议修改为https协议，将文件修改为www.baidu.com
mainWindow.loadURL(url.format({ // pathname: path.join(__dirname, 'index.html'), // protocol: 'file:', pathname: '//www.baidu.com', protocol: 'https:', slashes: true }))测试一下：
打包一下，打包后的文件自动存放到dist文件夹
yarn run package- 至此，百度首页成功被嵌入到了electronApp中
同上面的方法，我们来制作自己的视频播放器
修改index.html
<html> <head> <meta charset="UTF-8"> <title>video playertitle> <style type="text/css"> *{ margin: 0; padding: 0; font-size: 14px; font-family: "Microsoft YaHei"; } .clearfix:before, .clearfix:after { display: table; content: ''; } .clearfix:after { clear: both; } html, body { width: 100%; height: 100%; overflow: hidden; } /* 修改input的样式 start */ input { /* 去掉默认样式 */ -web-kit-appearance:none; -moz-appearance: none; /* 边框 圆角 高度 字体 颜色 */ font-size:1.0em; height:2.7em; border-radius:4px; border:1px solid #c8cccf; color:#c7cace; /* 去掉输入框的轮廓 */ outline:0; } /* 修改input的样式 end */ .video-playper-body { width: 100%; height: 100%; background-color: #111; position: relative; } .video-window { width: 100%; height: 100%; } .video-list { width: 175px; height: 100%; background-color: #20A0ff; opacity: .7; position: absolute; right: 0; top: 0; } .video-item { line-height: 1.6em; margin-top: .3em; margin-left: 1em; cursor: pointer; list-style: none; } .list-close, .list-open { width: 1.2em; height: 2em; line-height: 2em; position: absolute; font-size: 1.5em; color: #20a0ff; font-weight: bold; top: 45%; right: 0; cursor: pointer; } .list-close { right: 165px; } .hidden-list { /* display: none; */ visibility: hidden; } .sreach-video { width: 100%; } style> head> <body class="video-playper-body clearfix"> <video id="videoWindow" autoplay controls class="video-window">video> <ur class="video-list" id="videoList"> <input type="text" id="sreachVideo" class="sreach-video" onkeyup="sreach()" placeholder="请输入影片名或关键字"> ur> <div onclick="openOrClose()" id="coBtn" class="list-close list-open">》div> <script src="./ajax.js">script> <script type="text/javascript"> let videoWindow = document.getElementById('videoWindow') videoWindow.src = 'http://example.com?video=2423313213123' // 示例视频 console.log('Ajax: ', Ajax) // init window.onload = function () { initVideoList() } function initVideoList() { Ajax.get('./video.json', (res) => { console.log('res: ', JSON.parse(res)) JSON.parse(res).map((v) => { let li = document.createElement('li') li.className = 'video-item' li.setAttribute('onclick', `getVideoItem('${v.desc}')`) // li.onclick = `getVideoItem(${v.desc})` li.innerHTML = v.desc document.getElementById('videoList').appendChild(li) }) }) } function getVideoItem(n) { Ajax.get('./video.json', (res) => { JSON.parse(res).map((v) => { if (n == v.desc) { videoWindow.src = v.url console.log(v.url) } }) }) } // 打开或者关闭列表 function openOrClose() { let coBtn = document.getElementById('coBtn') // coBtn.className = console.log('coBtn: ', coBtn) console.log(coBtn.getAttribute('class').indexOf('list-close') > -1) if (coBtn.getAttribute('class').indexOf('list-close') > -1) { coBtn.innerHTML = '《' coBtn.classList.remove('list-close') document.getElementById('videoList').classList.add('hidden-list') } else { coBtn.innerHTML = '》' coBtn.classList.add('list-close') document.getElementById('videoList').classList.remove('hidden-list') } } // 搜索 const { dialog } = require('electron').remote function sreach () { let sreachVideo = document.getElementById('sreachVideo') if (event.keyCode == 13) { console.log('输入的内容： ', sreachVideo.value) console.log('Enter') dialog.showMessageBox({ type: 'info', message: `你的查询字段是：${sreachVideo.value}。\nBut,没人告诉你，这个功能不可用吗？��` }) } } script> body> html>- 附上ajax.js和video.json的文件
var Ajax={ get: function(url, fn, err) { var xhr = new XMLHttpRequest(); // XMLHttpRequest对象用于在后台与服务器交换数据 xhr.open('GET', url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // readyState == 4说明请求已完成 fn.call(this, xhr.responseText); //从服务器获得数据 } }; xhr.send(); }, post: function (url, data, fn, err) { // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式 var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 添加http头，发送信息至服务器时内容编码类型 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { // 304未修改 fn.call(this, xhr.responseText); } else { err() } }; xhr.send(data); } }[ { "url": "http://113.105.167.160/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/x0200a1uksl.p201.1.mp4?vkey=4AFB455CCB1EFB17914BB0610E27D81DF9F827F6219D7808BE5430E84F647D9D35E631E8B0AD371939B9C77FEA1544CC24C0E94E854433A03B578760ADC881EC675619ED12FDFC57536C3D9463B394A44D7A377C641B95C80F622874B026B1E475497AF5D143AE7CE0E12B6E1E48B22E331D35739A8DF55D&platform=10201&sdtfrom=&fmt=shd&level=0&locid=1fc86f35-8330-493b-b7ba-a42a699d3595&size=5122470&ocid=2507543980", "desc": "视频1" }, { "url": "http://183.61.62.141/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/k02001m96jf.p201.1.mp4?vkey=37A35A75FB70EAC387A467C14CFD9CA3C82B8B86F82090D503B43902BBE92CBF59BA80C5E63ABB55841069EE7E170F04212F2EE377E5947A6015317ABDCCC5154C549EE576FB216276F4C772E89CCC0DB0F439529033E8F5DFDC3A83B5B5D1FD25FFBCA60A4D65129CBC7E0B866660F91C6D8386BBD48A95&platform=10201&sdtfrom=&fmt=shd&level=0", "desc": "视频2" }, { "url": "http://183.61.62.147/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/k02001m96jf.p201.1.mp4?vkey=37A35A75FB70EAC387A467C14CFD9CA3C82B8B86F82090D503B43902BBE92CBF59BA80C5E63ABB55841069EE7E170F04212F2EE377E5947A6015317ABDCCC5154C549EE576FB216276F4C772E89CCC0DB0F439529033E8F5DFDC3A83B5B5D1FD25FFBCA60A4D65129CBC7E0B866660F91C6D8386BBD48A95&platform=10201&sdtfrom=&fmt=shd&level=0&locid=5fbac1ed-7973-42ed-9330-e018d3863cfa&size=2566398&ocid=194322348", "desc": "视频3" }, { "url": "http://113.105.167.144/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/p02008fn39e.p201.1.mp4?vkey=66EC1B74D9779448BC29D12B0CCFD258B9CB5F9E19BE98B80429876E63942AE2F8CE6D9BC3A4359F6639742D3D91AF41F87643DE2FB533B3029DF19C0859FA7D1449F77701D9C226C73B70A08D5FAC68BA4A436DA87419CF9DE7E687A15BA9C1EB082D4B2D404D2B7C4DFF551BDC5384529C05F59E6D8717&platform=10201&sdtfrom=&fmt=shd&level=0&locid=1636e051-0f90-470b-b2fc-fc01ec538834&size=2543069&ocid=2390103468", "desc": "视频4" }, { "url": "http://113.105.167.142/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/p02008fn39e.p201.1.mp4?vkey=66EC1B74D9779448BC29D12B0CCFD258B9CB5F9E19BE98B80429876E63942AE2F8CE6D9BC3A4359F6639742D3D91AF41F87643DE2FB533B3029DF19C0859FA7D1449F77701D9C226C73B70A08D5FAC68BA4A436DA87419CF9DE7E687A15BA9C1EB082D4B2D404D2B7C4DFF551BDC5384529C05F59E6D8717&platform=10201&sdtfrom=&fmt=shd&level=0", "desc": "视频5" }, { "url": "http://113.105.167.144/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/p02008fn39e.p201.1.mp4?vkey=66EC1B74D9779448BC29D12B0CCFD258B9CB5F9E19BE98B80429876E63942AE2F8CE6D9BC3A4359F6639742D3D91AF41F87643DE2FB533B3029DF19C0859FA7D1449F77701D9C226C73B70A08D5FAC68BA4A436DA87419CF9DE7E687A15BA9C1EB082D4B2D404D2B7C4DFF551BDC5384529C05F59E6D8717&platform=10201&sdtfrom=&fmt=shd&level=0&locid=1636e051-0f90-470b-b2fc-fc01ec538834&size=2543069&ocid=2390103468", "desc": "视频6" }, { "url": "http://113.105.167.144/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/p02008fn39e.p201.1.mp4?vkey=66EC1B74D9779448BC29D12B0CCFD258B9CB5F9E19BE98B80429876E63942AE2F8CE6D9BC3A4359F6639742D3D91AF41F87643DE2FB533B3029DF19C0859FA7D1449F77701D9C226C73B70A08D5FAC68BA4A436DA87419CF9DE7E687A15BA9C1EB082D4B2D404D2B7C4DFF551BDC5384529C05F59E6D8717&platform=10201&sdtfrom=&fmt=shd&level=0&locid=1636e051-0f90-470b-b2fc-fc01ec538834&size=2543069&ocid=2390103468", "desc": "视频7" }, { "url": "http://113.105.167.149/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/x0200a1uksl.p201.1.mp4?vkey=4AFB455CCB1EFB17914BB0610E27D81DF9F827F6219D7808BE5430E84F647D9D35E631E8B0AD371939B9C77FEA1544CC24C0E94E854433A03B578760ADC881EC675619ED12FDFC57536C3D9463B394A44D7A377C641B95C80F622874B026B1E475497AF5D143AE7CE0E12B6E1E48B22E331D35739A8DF55D&platform=10201&sdtfrom=&fmt=shd&level=0", "desc": "视频8" }, { "url": "http://113.105.167.160/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/x0200a1uksl.p201.1.mp4?vkey=4AFB455CCB1EFB17914BB0610E27D81DF9F827F6219D7808BE5430E84F647D9D35E631E8B0AD371939B9C77FEA1544CC24C0E94E854433A03B578760ADC881EC675619ED12FDFC57536C3D9463B394A44D7A377C641B95C80F622874B026B1E475497AF5D143AE7CE0E12B6E1E48B22E331D35739A8DF55D&platform=10201&sdtfrom=&fmt=shd&level=0&locid=1fc86f35-8330-493b-b7ba-a42a699d3595&size=5122470&ocid=2507543980", "desc": "视频9" }, { "url": "http://113.105.167.160/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/x0200a1uksl.p201.1.mp4?vkey=4AFB455CCB1EFB17914BB0610E27D81DF9F827F6219D7808BE5430E84F647D9D35E631E8B0AD371939B9C77FEA1544CC24C0E94E854433A03B578760ADC881EC675619ED12FDFC57536C3D9463B394A44D7A377C641B95C80F622874B026B1E475497AF5D143AE7CE0E12B6E1E48B22E331D35739A8DF55D&platform=10201&sdtfrom=&fmt=shd&level=0&locid=1fc86f35-8330-493b-b7ba-a42a699d3595&size=5122470&ocid=2507543980", "desc": "视频10" }, { "url": "http://113.105.167.145/vlive.qqvideo.tc.qq.com/Ao3DQunwAFEAGzpCT3N1ajLG05hAp-kGv1jdNpHcUR4w/a02000zycfk.p201.1.mp4?vkey=70FA12E0C4BDE12A5DCCDF8164A39FA04B97EFF1F63A1CDB2404868D854DA78CDA8CDD3DC65CAF646F12430652918AE419844CF008CD83790467FF65562C929A70DF3843C8C324AB3940B719D1C5A574B0C58067C316128BC9E3934F50384DD9EEC615D275ACC77557CA4B3F34A9CA614D59C0F0619C6C63&platform=10201&sdtfrom=&fmt=shd&level=0", "desc": "视频11" } ]yarn run start跑一下咯
至此，第一个有自己功能的桌面app算是开发完毕，那就打包吧
运行打包命令
yarn run package, 结果如下$ npm run package > my-video-player@1.0.0 package D:\My documents\electron\video_player > electron-packager . rfsniffer --platform=win32 --arch=x64 --out=./dist --asar --app-version=2.0.1 --ignore="(dist|src|docs|.gitignore|LICENSE|README.md|webpack.config.js)" Packaging app for platform win32 x64 using electron v1.8.4 Wrote new app to dist\rfsniffer-win32-x64测试下dist/video-player-win32-x64下的 video-player.exe
我要发送给朋友装装逼@_@!
- 安装winRar软件，32位就可以（朋友电脑可能比较旧，不支持64位，哈哈哈）
- 右键添加压缩文件，选择添加自解压文件，
- 在高级选项中，设置自解压目录和桌面快捷方式，
- 最后点击确定完成打包，具体的见下面动图展示
Now, go and show off your friends!