如何自定义炫酷浏览器主页

左手的ㄟ右手 2022-10-15 00:41 217阅读 0赞

# 如何自定义炫酷浏览器主页 #

## 一、概览 ##

今天和大家分享的是一个自定义浏览器主页。在很早以前我也写过一次，但是那个主页存在许多问题，而且功能也有欠缺。于是今天就来给大家分享一个改进版的浏览器主页。我们来看看效果图：

![在这里插入图片描述][20210522165001445.png_pic_center]

我们点击每个li会进入相应的网站，大家可以设置成自己常用的网站。我们还可以在输入框进行搜索，输入框默认是百度搜索。

总体来说算是非常简单了，如果读者不喜欢DIY的话，可以选择直接使用Infinity插件。

## 二、总体布局 ##

上面的布局非常简单，首先是纵向的三个部分，简化如下：

![在这里插入图片描述][20210522165724336.png_pic_center]

标题没什么好说的，就是一个文本。

搜索框包括了三个东西，简化如下：

![在这里插入图片描述][20210522170047631.png_pic_center]

然后最复杂的是主体部分，我们把主体细分为四个部分：

![在这里插入图片描述][2021052217045464.png_pic_center]

然后我们只需要关注其中一栏的布局就好了：

![在这里插入图片描述][20210522170922370.png_pic_center]

上面就是大致的布局，更详细的会在后面说到。

## 三、使用iVx实现页面 ##

### 3.1、准备工作 ###

iVx是一款可视化的编程工具，如果你有编程基础，相信你能很快入手这款工具。详细内容可以在[https://www.ivx.cn/][https_www.ivx.cn]了解。

我们进入工作台创建一个项目：

![在这里插入图片描述][2021052217163284.png_pic_center]

我们选择相对定位，修改应用名然后创建即可。

![在这里插入图片描述][20210522172022245.png_pic_center]

因为我们是电脑端网页，所以这里在右上角选择相应分辨率的电脑。然后点击减号，让电脑可以显示整个布局。下面我们就可以开始写布局了。

### 3.2、布局 ###

我们先简单了解一下工作台的界面：

![在这里插入图片描述][20210522175604403.png_pic_center]

最左侧是我们可以添加的控件，只需要点击即可添加。控件旁边的是控件的属性，右侧是已添加到页面上的控件。

因为这次的应用没有后台，所以我们只需关注前台即可。

我们先为页面添加整体的布局，整体布局是纵向的。因此我们添加一个列，并在列内添加3行：

![在这里插入图片描述][20210522175828506.png_pic_center]

左侧是列和行控件，右侧是添加后的层次关系。这时候它们带有默认背景颜色，我们把它去点，并把列的背景设置为黑色：

![在这里插入图片描述][20210522180215551.png_pic_center]

我们在属性设置面板就可以设置控件的属性了，点击清空就可以取消背景颜色。

为了方便观看，我们给右侧重命名。这里需要注意，实际布局和右侧是倒着来的。我们布局的标题在最上面，内容在最下面，而右侧是反过来的。

现在我们调整一下宽高，把内容的高设置为70%，其余两个设置为15%，设置的适合需要注意单位：

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ONgSjZs-1621681846295)(file:///C:\\Users\\Administrator\\AppData\\Roaming\\Tencent\\Users\\2930777518\\TIM\\WinTemp\\RichOle\\B62~YAT\[B%N\}@(Y0%\]7S)\]F5.png)

要是%而不是px。

### 3.3、标题 ###

标题的布局很简单，只需添加一个文本框即可：

![在这里插入图片描述][20210522180958237.png_pic_center]

我们需要注意把行布局的对齐方式设置为居中，然后修改字体颜色即可。

### 3.4、搜索框 ###

搜索框需要加3个东西，输入框、图标和按钮，位置分别为如下：

![在这里插入图片描述][20210522181351697.png_pic_center]

我们修改输入框的长度已经按钮和标签的大小。然后发现上面的搜索框不够美观，这个适合我们可以选择修改按钮的圆角：

![在这里插入图片描述][20210522181609841.png_pic_center]

我们先去掉左侧圆角，然后再修改圆角大小。就有了上面的效果，但是因为中间有个标签，我们需要设置一下：

![在这里插入图片描述][20210522181907400.png_pic_center]

我们修改左侧几个属性，就有了上面的效果。配色方面大家可以自己调节。这样我们搜索框就完成了。

### 3.5、第一栏布局 ###

我们做好一个栏其余的可以直接复制粘贴。我们按照下面的方式添加控件：

![在这里插入图片描述][20210522182605828.png_pic_center]

然后再一个一个来完成内容。

为了显示不同颜色，我们需要多个文本框：

![在这里插入图片描述][20210522183052421.png_pic_center]

这里我们使用了三个文本，然后给行布局设置了左内边距。其余的选项我就不详细说了，按照上面的操作写即可。最好调整好后的效果如下：

![在这里插入图片描述][20210522183938786.png_pic_center]

现在我们可以开始添加事件了。

### 3.6、点击跳转 ###

现在我们给每个栏目添加一个跳转：

![在这里插入图片描述][2021052218421829.png_pic_center]

选中我们要添加事件的控件，这里我选择了选项1，然后点击右侧的感叹号，再在左侧选择监听的事件，这里我们选择点击。

![在这里插入图片描述][20210522184433351.png_pic_center]

选择事件后，我们点击从对象树选择，然后选择前台，就可以选择下面的选项了：

![在这里插入图片描述][20210522184610319.png_pic_center]

我们选择打开外链，然后输入链接即可，你可以根据自己的爱好选择是否要在当前页打开。

现在我们就实现了跳转功能，其它的也是一样添加的，这里就不细说了。下一步就是要实现搜索框的功能了。

### 3.7、搜索功能 ###

这里我们需要添加3个变量，我们直接在前台添加：

![在这里插入图片描述][20210522185107379.png_pic_center]

三个变量的含义分别是，百度搜索的请求地址，要搜索的词和，最终打开的页面。

其中百度的内容设置为：https://www.baidu.com/s?wd=

其余两个我们可以先不设置。

然后我们找到图标，给它添加一个清空输入框内容的事件：

![在这里插入图片描述][20210522185426283.png_pic_center]

接下来给按钮设置事件：

![在这里插入图片描述][20210522190430704.png_pic_center]

这里事件比较多，上面标注了每一个事件做的事情。下面是没有添加标注的图片：

![在这里插入图片描述][20210522190543658.png_pic_center]

这样我们就完成了个人浏览器主页的编写。

## 四、导出与设置为主页 ##

我们可以带点击上方的按钮进行预览，当效果满意的时候选择私有部署导出页面。当程序复杂度到一定程度时导出是要收费的。

![在这里插入图片描述][20210522190738199.png_pic_center]

然后修改为浏览器主页的话这里以谷歌浏览器为例说一下。点击浏览器左上角的三点，如图：

![img][]  
然后：设置->启动时->打开特定网页或一组网页->添加新网页。网站网址的话，可以先用浏览器打开那个网页，然后把搜索栏的网址复制下来填进去就好了。如下图：

![img][img 1]

然后就完成了。

在这次例子中，我只是做了一个比较简单的纯前端页面。除了网页，iVx还可以做小程序和小游戏。不过笔者现在还没尝试过。另外在iVx中是支持编写后台的，不得不说在同类型的可视化编程工具中iVx功能还是非常丰富的。

感兴趣的读者可以自行访问[官网][https_www.ivx.cn]，另外附上[官方教程][Link 1]。

[20210522165001445.png_pic_center]: /images/20221014/98452bdf8e284290aa70f5eb7f512f0c.png
[20210522165724336.png_pic_center]: /images/20221014/3208f7a46f764c5dbd071232270e8cfd.png
[20210522170047631.png_pic_center]: /images/20221014/f764841076bc4c47872a694937846427.png
[2021052217045464.png_pic_center]: /images/20221014/8043f46dbcb94601b92544d7a4388531.png
[20210522170922370.png_pic_center]: /images/20221014/237e17f845f148f7b548a3e849a3eba0.png
[https_www.ivx.cn]: https://www.ivx.cn/
[2021052217163284.png_pic_center]: /images/20221014/9e4c2dd2c2704162b73a868523a9f6fd.png
[20210522172022245.png_pic_center]: /images/20221014/7c416776eae94e5787437fc36bfe03be.png
[20210522175604403.png_pic_center]: /images/20221014/6f6587826e3542e9a6e5bfc86663af08.png
[20210522175828506.png_pic_center]: /images/20221014/65af085b312646d9931b51232b6b98ad.png
[20210522180215551.png_pic_center]: /images/20221014/193a7c30b3af43979118b91e0a1cabd6.png
[20210522180958237.png_pic_center]: /images/20221014/1f92b792ca284483937da937f47f29d0.png
[20210522181351697.png_pic_center]: /images/20221014/6f1049404b5747bea9360e06af4ef063.png
[20210522181609841.png_pic_center]: /images/20221014/d1e9bd8e760b41ad821ceeece4217e91.png
[20210522181907400.png_pic_center]: /images/20221014/e7e82dc4072b4ed88b18f2bf2e73fcfc.png
[20210522182605828.png_pic_center]: /images/20221014/f2b56571230549b29999823b5a74311a.png
[20210522183052421.png_pic_center]: /images/20221014/a5272878a12349b4b6a158095c25c7a1.png
[20210522183938786.png_pic_center]: /images/20221014/f038067c27e1478f9626ba5dcf33aab3.png
[2021052218421829.png_pic_center]: /images/20221014/9a581c01ee1b4743ab6733caf941229d.png
[20210522184433351.png_pic_center]: /images/20221014/84f6de0f49db4aa2b6a2bcf37dd6910d.png
[20210522184610319.png_pic_center]: /images/20221014/81f1b15cd4ef4c05a9576ddfad66902c.png
[20210522185107379.png_pic_center]: /images/20221014/849a50b6c51d47bdad680eaad26e9daf.png
[20210522185426283.png_pic_center]: /images/20221014/9ab41b80e3b840a4a3cbcc66db45bbff.png
[20210522190430704.png_pic_center]: /images/20221014/d88a3e03b6774e6eb6860dd7a11aee76.png
[20210522190543658.png_pic_center]: /images/20221014/bc8b5c72b5334865a2c3c63293cf9db5.png
[20210522190738199.png_pic_center]: /images/20221014/077c3ac0d9db4da79e471422389a7dfc.png
[img]: /images/20221014/e167bb19b8c84c26a0906cb552407a46.png
[img 1]: /images/20221014/513fa980d3d44cc6b0cb4ac2fb5d4adf.png
[Link 1]: https://course.ivx.cn/