持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情
现在的浏览器主页多种多样
不同的浏览器往往有着相同的特点----广告，各种新闻，游戏推销，有时候想切换搜索引擎也比较麻烦
有这样的
360---(https://hao.360.com/)
一大堆广告，各种奇怪的网友推荐，垃圾新闻.........
搜狗---(https://123.sogou.com/?fr=rescue)
2345-----(https://www.2345.com/indexold.htm)
如Edge和Chrome还好些，但是很多国产浏览器主页属实是一言难尽。。
为此，作为前端工程师的我们，为什么不自己开发一款浏览器呢
下面是我基于vue-cli开发的浏览器主页
背景较为简洁(其实是没找到好图)可以快速切换不同的搜索引擎，还有一键切换背景(目前是在项目目录下的几张图片间切换
下面是开发的流程，莫得耐心的小伙伴也可以直接去文章尾部看代码
首先找个项目要放的地方在终端中执行下列代码完成初始化
vue create 项目名
然后选择版本，这里选择Manually select features
键盘上下控制移动 回车确定
在下一个页面中选择 空格表示选中 再摁一下取消 最后的选择应该如下
这个小项目装这俩就行了
然后回车到下一页，版本选择2
再下一页选择Less就可以
然后选择In package.json
最后选择N就可以
找到目录
可以在src/assets下放一些图片，然后在代码中引入
找到App.vue文件，加入以下代码 完成
启动项目切换到项目所在的目录 然后输入
npm run serve
就可以启动项目了 ctrl+c可以停止
五个单选框一键切换不同的搜索引擎
输入框内输入要搜索的内容 右边的🔍开始搜索 也可以使用快捷键 摁下回车进行搜索
点击搜索框上方的图片切换背景 也可以使用快捷键 Alt + c一键切换背景
App.vue中的全部代码如下
<template>
<div>
<img id="bgGlobal3" src="./assets/kqh.jpg" class="imgClassBody2">
<img id="bgGlobal2" src="./assets/ymx.jpg" class="imgClassBody2">
<img id="bgGlobal" src="./assets/oys2.jpg" class="imgClassBody">
<!-- 搜索框上方 有一个图片 可以点击 完成切换背景 也有一个Alt + c一键切换背景 -->
<button id="bkg" class="imgClass" @click="bkgChange()"><img id="imgGlobal" src="./assets/oys.png" alt="点击切换背景" class="imgClass1"></button>
<input @keyup.enter="btnEvent" class="inputClass" type="text" id="input" name="input" placeholder="请输入您要搜索的内容" autocomplete="off">
<button id="btn" class="btnClass" @click="btnEvent()">🔍</button><br/>
<span class="spanClass">>>>>>>>选择您的搜索引擎
<!-- 设置单选框 -->
<input type="radio" name="choose" value="baidu" checked>百度
<input type="radio" name="choose" value="souhu">搜狗
<input type="radio" name="choose" value="bing">bing
<input type="radio" name="choose" value="360">360
<input type="radio" name="choose" value="Yandex">Yandex
</span>
</div>
</template>
<script>
export default {
mounted(){
const that = this;
document.addEventListener('keydown',that.changeByKey);
},
methods:{
btnEvent(){
var ch = document.getElementsByName('choose');
console.log(ch);
for(let i = 0;i < ch.length;i++){
if(ch[i].checked){
console.log('选择的是'+ch[i].value);
var result = ch[i].value;
}
}
if(result === 'baidu'){
console.log('使用百度搜索引擎进行搜索');
let dSearch = document.getElementById('input').value;
window.open(`https://www.baidu.com/s?wd=${dSearch}`);
dSearch.value = "";
//https://www.baidu.com/s?wd=%E4%BD%A0%E5%A5%BD&rsv_spt=1&rsv_iqid=0x9848a36f004c2dea&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&rqlang=&tn=baiduhome_pg&ch=
}
else if(result === 'bing'){
console.log('使用Bing进行搜索');
let dSearch = document.getElementById('input').value;
window.open(`https://cn.bing.com/search?q=${dSearch}`);
//https://cn.bing.com/search?q=%E4%BD%A0%E5%A5%BD
dSearch.value = "";
}
else if(result === 'souhu'){
console.log('使用搜狗进行搜索');
//https://www.sogou.com/web?ie=UTF-8&query=%E4%BD%A0%E5%A5%BD
//https://www.sogou.com/web?ie=UTF-8&query=你好
let dSearch = document.getElementById('input').value;
window.open(`https://www.sogou.com/web?ie=UTF-8&query=${dSearch}`);
dSearch.value = "";
//https://www.sogou.com/
}
else if(result === '360'){
console.log('使用360进行搜索');
let dSearch = document.getElementById('input').value;
window.open(`https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome&ssid=&q=${dSearch}`);
dSearch.value = "";
// https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome&ssid=&q=%E4%BD%A0%E5%A5%BD
}
else {
console.log('Yandex搜索');
let dSearch = document.getElementById('input').value;
window.open(`https://yandex.com/search/?text=${dSearch}`);
dSearch.value = "";
//https://yandex.com/search/?text=%E4%BD%A0%E5%A5%BD&lr=21449
}
},
bkgChange(){
console.log('开始换背景');
var bgGlobal = document.getElementById('bgGlobal');
var bgGlobal2 = document.getElementById('bgGlobal2');
var bgGloba3 = document.getElementById('bgGlobal3');
if(bgGlobal.className === 'imgClassBody' && bgGlobal2.className === 'imgClassBody2'){
bgGlobal.className = 'imgClassBody2';
bgGlobal2.className = 'imgClassBody';
console.log('2');
}
else if(bgGlobal2.className === 'imgClassBody' && bgGlobal3.className === 'imgClassBody2'){
bgGlobal2.className = 'imgClassBody2';
bgGlobal3.className = 'imgClassBody';
console.log('3');
}
else {
bgGloba3.className = 'imgClassBody2';
bgGlobal.className = 'imgClassBody';
console.log('1');
}
},
changeByKey(e){
if(e.altKey && e.keyCode===67){
console.log('successfully');
this.bkgChange();
}
}
}
}
</script>
<style lang="less">
input[type='radio'] {
width: 25px;
height: 25px;
}
input[type='radio']:checked{
background-color:brown;
color: aquamarine;
}
.imgClassBody {
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
position: absolute;
}
.imgClassBody2 {
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
position: absolute;
display: none;
}
.imgClassBody3 {
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
position: absolute;
display: none;
}
.spanClass {
color:darkblue;
font-size: 23px;
margin-left: 480px;
margin-top: 30px;
overflow: hidden;
}
.btnClass {
background-color:aqua;
padding-top: 3px;
padding-bottom: 10px;
border-color: blue;
border-style:dotted ;
border-radius: 20px;
margin-left: 10px;
width: 60px;
height: 60px;
font-size: 26px;
}
.inputClass {
margin-left: 480px;
margin-top: 20px;
width: 480px;
height: 55px;
background-color: antiquewhite;
color:brown;
font-size: 25px;
border-color: chartreuse;
border-style: dotted;
margin-bottom: 20px;
}
.inputClass:focus {
outline-color: orangered;
outline-width: 5px;
}
.imgClass {
margin-top: 45px;
margin-left: 630px;
width: 140px;
height: 90px;
border: 0px;
}
.imgClass1 {
margin-left: -5px;
width: 140px;
height: 90px;
border: 0px;
}
</style>
核心是通过javaScript中的location.open来打开对应的搜索引擎搜索出结果的网页。
