易语言&miniblink交互教程——第一课 了解 miniblink

1、什么是 miniblink？

Miniblink是一个非常小巧的浏览器内核，它由 @龙泉寺扫地僧 基于chromium，去除了chromium所有多余的部件，只保留最基本的排版引擎blink，总而言之就是chromium的阉割版，也可以把它当成一个功能强大体积小巧的浏览器或者超文本浏览框。

Miniblink - 免费小巧开源的浏览器控件miniblink是一款极致小巧的开源浏览器控件，可嵌入各种软件中，提供浏览服务https://miniblink.net/

 

2、为什么要用 miniblink？

原因很简单，易语言目前处于弃坑的状态，并且易语言UI方面的支持库、模块很难做出特别好的效果。但如果miniblink做ui界面的话，你就可以用HTML5和Css3、Javascrip来实现各种炫酷的交互效果，同时你也可以调用很多开源的前端UI框架。

Ant Design框架：

 

组件总览 - Ant Designantd 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了社区精选组件作为必要的补充，另外如果您是内网用户，欢迎尝试使用 TechUI。https://ant.design/components/overview-cn

有人可能会说这种WebUI运行效率不行，个人感觉Miniblink的运行效率的确比较一般（毕竟阉割了那么多功能）；

所以我会更倾向于CEF（完整的chromium框架），但缺点也很明显：体积太大了（150M左右），完整的chromium内核运行效率就跟平常浏览器一样，举个例子：著名的开发软件VSCode就是用Electron框架开发的(chromium内核) 。

3、学习 miniblink 需要哪些相关的知识？

前面有说到了，miniblink实际上就是个浏览器，浏览器渲染显示内容自然是要用到HTML、CSS、JavaScript/JQuery。

当然，如果你是纯易语言小白，或者说从来没接触过这方面的，学起来的过程可能会比较痛苦；但如果你接触过网页抓包、爬虫方面的，学起来就会很轻松。

分享我之前用过的几个HTML学习网给大家：

HTML5教程

HTML5 教程 | 菜鸟教程HTML5 简介 HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简单易学。 什么是 HTML5? HTML5 是下一代 HTML 标准。 HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML..https://www.runoob.com/html/html5-intro.html

HTML 教程 | 菜鸟教程HTML 教程- (HTML5 标准) 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 在本教程中，您将学习如何使用 HTML 来创建站点。 HTML 很容易学习！相信您能很快学会它！ HTML 实例 本教程包含了数百个 HTML 实例。 使用本站的编辑器，..https://www.runoob.com/html/html-tutorial.html

w3school 在线教程全球最大的中文 Web 技术教程。https://www.w3school.com.cn/

CSS教程

CSS 教程 | 菜鸟教程CSS 教程 CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。 通过使用 CSS 我们可以大大提升网页开发的工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。 CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发..https://www.runoob.com/css/css-tutorial.html

JS / JQuery教程

JavaScript 教程 | 菜鸟教程JavaScript 教程 JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都可以使用 JavaScript。 JavaScript 非常容易学。 本教程将教你学习从初级到高级 JavaScript 知识。 JavaScript 在线实例 本教程包含了大量的 JavaScript 实例， 您可以点击 '尝试一下' 来在线查看实例。 实例 function displayDat..https://www.runoob.com/js/js-tutorial.html

jQuery 教程 | 菜鸟教程jQuery 教程 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 本章节的每一篇都包含了在线实例 通过本站的在线编辑器，你可以在线运行修改后的代码，并查看运行结果。 实例 [mycode3 type='javascript'] $(document).ready(function(){ $('phttps://www.runoob.com/jquery/jquery-tutorial.html

如果你仅仅只是想弄UI，可以简单了解下JS，着重了解JQuery，因为对于界面开发来说，js原生代码弄得会特别少。因为这个我教程主要是讲解Miniblink的使用方法，所以HTML这部分大家就看上面的教程自学吧。

4、必要的开发工具

使用合适的工具才能提高码字的效率，所以我给大家推荐几款我我在折腾Mniblink时常用的一些开发工具：

1、易语言（这个是必须的）

2、VSCode 或 HBuilder X ，主要用于前端开发，也就是在写HTML的时候用，个人感觉HBuilder X代码提示功能会更完善点；但是VSCode会更轻巧，看你个人的选择。

3、火狐浏览器或Chrome浏览器，这两款堪称程序员的最爱，由于miniblink没有内置开发者工具（被阉割了），所以只能通过这些浏览器来调试网页部分了。

5、Miniblink 学习计划

为了更高效地让大家学习 mniblink 如何使用，我主要把教程分为三个部分：

1. miniblink的窗口绑定、载入HTML
2. miniblink的JS函数绑定、交互、传参
3. miniblink的事件绑定

由于miniblink并未提供易语言的模块，因此也没有官方的相关教程及模块，目前我所使用的模块主要是 @kyozy 所开发的，虽然也提供了相关的例程，但内容比较凌乱，并且没有对应的教程解说，对于小白来说比较难入门，所以我弄了这个教程，带大家玩明白这玩意。

如果你需要这个例程可以在这里下载（虽然教程中用不上这个例程）：

夸克网盘分享夸克网盘是夸克推出的一款云服务产品，功能包括云存储、高清看剧、文件在线解压、PDF一键转换等。通过夸克网盘可随时随地管理和使用照片、文档、手机资料，目前支持Android、iOS、PC、iPad。https://pan.quark.cn/s/92a58340402e