开始尝试用electron搭建了一个hello world,体验还是挺不错的,对于一个web开发者来说,能把自己的开发成果做成一个桌面app,那将是一步巨大的跨越
藉此,再深入学习后,开始了第二个“hello world”
下载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
# 成功跑起来了,并且出现了官方的默认首页文本
开始折腾这个快速模板
// 修改项目名称
"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)\""
},
百度一下啦~
第一种方案,修改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
修改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>
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
跑一下咯 运行打包命令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
我要发送给朋友装装逼@_@!
Now, go and show off your friends!