易语言&Miniblink教程(一)了解 miniblink
什么是 Miniblink?
Miniblink是一个非常小巧的浏览器内核,它由 @龙泉寺扫地僧 基于chromium,去除了chromium所有多余的部件,只保留最基本的排版引擎blink,总而言之就是chromium的阉割版,也可以把它当成一个功能强大体积小巧的浏览器或者超文本浏览框。
miniblink官网:https://miniblink.net/
为什么要用 miniblink?
主要有以下几点原因:呈现效果、开发效率、开发难度
从呈现效果上看:易语言目前处于弃坑的状态,并且易语言UI方面的支持库、模块很难做出与HTML页面相媲美的效果
从开发效率上看:基于Node.js的组件化前端框架有很多,例如Vue、React等,可以使用的现成的前端框架非常多,如NextUI、AntDesign、ElementUI等。
从开发难度上看:易语言原生的方式搞一套界面,很多情况下都是造轮子 ,费时费力,有些地方难度还非常大,如果miniblink做ui界面的话,你就可以用HTML5和CSS3、Javascrip来实现各种炫酷的交互效果,同时你也可以调用很多开源的前端UI框架。
有人可能会说这种WebUI运行效率不行,个人感觉Miniblink的运行效率的确比较一般(毕竟阉割了那么多功能)
所以我会更倾向于CEF(完整的chromium框架),但缺点也很明显:体积太大了(150M左右),完整的chromium内核运行效率就跟平常浏览器一样,举个例子:著名的开发软件VSCode就是用Electron框架开发的(chromium内核) 。
学习 miniblink 需要哪些相关的知识?
前面有说到了,miniblink实际上就是个浏览器,浏览器渲染显示内容自然是要用到HTML、CSS、JavaScript/JQuery。同时如果想要更进一步,最好学习下目前主流的前端知识,例如:Node.js、Vue、React、Vite等。
当然,如果你是纯易语言小白,或者说从来没接触过这方面的,学起来的过程可能会比较痛苦;但如果你接触过网页抓包、爬虫方面的,学起来就会很轻松。
分享我之前用过的几个HTML学习网给大家
HTML5教程
https://www.runoob.com/html/html5-intro.html
https://www.runoob.com/html/html-tutorial.html
https://www.w3school.com.cn/
CSS教程
https://www.runoob.com/css/css-tutorial.html
JS/JQuery教程
https://www.runoob.com/js/js-tutorial.html
https://www.runoob.com/jquery/jquery-tutorial.html
如果你仅仅只是想弄UI,可以简单了解下JS,着重了解JQuery,因为对于界面开发来说,js原生代码弄得会特别少。因为这个我教程主要是讲解Miniblink的使用方法,所以HTML这部分大家就看上面的教程自学吧。
Miniblink的缺陷
由于Miniblink是chromium的阉割版,所以必然会有一定的缺陷,缺陷如下:
1、运行效率不高,不支持多线程
2、HTML动画有时候会出现掉帧、卡顿等问题
3、DPI缩放优化问题
4、没有内置字体,因此需要用CSS声明默认字体,否则默认字体会变成宋体
5、更新缓慢,目前新的CSS语法、JavaScript语法都会存在不兼容的问题,因此一些前端框架在使用过程中也可能会出现一定的问题
基于以上缺陷,如果你追求极致的界面呈现以及交互效果,建议改用完整的chromium框架,例如Electron
必要的开发工具
使用合适的工具才能提高码字的效率,所以我给大家推荐几款我我在折腾Mniblink时常用的一些开发工具:
1、易语言(这个是必须的)
2、VSCode 或 HBuilder X ,主要用于前端开发,也就是在写HTML的时候用,个人感觉HBuilder X代码提示功能会更完善点;但是VSCode会更轻巧,看你个人的选择。
3、火狐浏览器或Chrome浏览器,这两款堪称程序员的最爱,由于miniblink没有内置开发者工具(被阉割了),所以只能通过这些浏览器来调试网页部分了。
Miniblink 学习计划
为了更高效地让大家学习 mniblink 如何使用,我主要把教程分为三个部分:
1、miniblink的窗口绑定、载入HTML
2、miniblink的JS函数绑定、交互、传参
3、miniblink的事件绑定
由于miniblink并未提供易语言的模块,因此也没有官方的相关教程及模块,目前我所使用的模块主要是 @kyozy 所开发的,虽然也提供了相关的例程,但内容比较凌乱,并且没有对应的教程解说,对于小白来说比较难入门,所以我弄了这个教程,带大家玩明白这玩意。
如果你需要这个例程可以在这里下载(虽然教程中用不上这个例程):https://pan.quark.cn/s/92a58340402e
例程&源码下载
- 感谢你赐予我前进的力量