精易论坛

标题: 欢迎加入WebKit!,打造你的HTML5浏览器,第一期,创建一个简单的浏览器 [打印本页]

作者: 黑猫よ__    时间: 2016-3-13 23:42
标题: 欢迎加入WebKit!,打造你的HTML5浏览器,第一期,创建一个简单的浏览器
本帖最后由 宇智波·佐助 于 2016-3-21 10:03 编辑

      《Hello WebKit》, 是完全面向对象的框架,所有的对浏览器的操作都在类中进行,所有的回调事件也在类中响应,总之一切皆为(类)对象 , 在这里请将《Hello WebKit》框架视作易语言版的Cef框架,因为本身也是如此。



《Hello WebKit》框架运行环境下载: https://drive.google.com/file/d/0B8L3SgpHRzjtSzc2YXNHMFpjZnc/view?usp=sharing
《Hello WebKit》框架源代码: Hello WebKit 1.0000.01.rar (21.83 KB, 下载次数: 996)

《WebKit Browser》源代码: WebKit Browser.rar (14.12 KB, 下载次数: 1011)
《浏览器模版》源代码:
浏览器模版: 浏览器模版.rar (10.96 KB, 下载次数: 1297)
《Hello WebKit》互助群: 89456201


这里为大家准备一些关于WebKit 和 Cef 的学习资料,方便掌握:
Cef3学习笔记一: http://www,cnblogs,com/haippy/archive/2013/06/10/3131373,html
Cef3学习笔记二: http://www,cnblogs,com/haippy/archive/2013/06/10/3131354,html
Cef3学习笔记三: http://www,cnblogs,com/haippy/archive/2013/06/10/3131253,html
--------------------------------------------------------------------------------------------------------------------------------------------------------
使用《Hello WebKit》创建一个简单的浏览器:

下面我将以"Kirino"代表这个即将诞生的浏览器 , 当然它将会是一款非常简单的浏览器,因为它只有一个功能,就是启动之后显示home页。
打开我为大家准备好的浏览器模版,开始编写我们的第一个WebKit浏览器吧!


第一步,下载《Hello WebKit》框架运行环境,并解压到目录中,然后再下载《Hello WebKit》框架源代码,释放到运行环境所在的目录中,然后打开框架源代码
找到"HelloWebKit__"程序集,在这里找到"_启动子程序",打开你会发现一个有一个 "HelloWebKits" 的函数,将其的屏蔽状态去除后运行框架代码,如果框架顺利
运行并成功的显示出了一个网页,那么表明一切正常,好了,将函数 "HelloWebKits" 屏蔽后编译框架代码,生成模块文件(*.ec)。


第二步,下载《浏览器模版》源代码,并将其放到《Hello WebKit》框架运行环境目录下,打开这个模版,我已为大家搭建好了控件面板,大家可以用自行排版控件,直接深入主题,如果你不想使用我为你准备的模版,那么你也可以动手自己做一个,并将你编译好的《Hello WebKit》框架模块附加到工程中。


进入正题,开始编写我们的第一个浏览器
首先,你需要声明4个类,当然类的名字由你定,但你得分得清楚它们谁是谁,这里我以MyKirino作为段名,后缀表明了它们的作用:
MyKirinoApp
MyKirinoBrowserProcessHandler
MyKirinoHandler
MyKirinoLifeSpanHandler

图示:




好,接着我们打开第一个类"MyKirinoApp",在基类一栏上填入"CefApp",表明这个类是由基类"CefApp"派生出来的。





在打开第二个类"MyKirinoBrowserProcessHandler",在基类一栏上填入"CefBrowserProcessHandler",表明继承于CefBrowserProcessHandler基类
在打开第三个类"MyKirinoHandler",在基类一栏上填入"CefClient",表明继承于CefClient基类
最后打开第四个类"MyKirinoLifeSpanHandler",在基类一栏上填入"CefLifeSpanHandler",表明继承于"CefLifeSpanHandler"基类

这样准备工作就完成了,打开"窗口程序集1",找到"_启动子程序",开始编写代码:

  
子程序名返回值类型公开备 注
_启动子程序整数型 在这里进行浏览器信息初始化
变量名类 型静态数组备 注
main_argsCefMainArgs运行参数
settingsCefSettings设置浏览器的一些相关信息
exit_code整数型 
main_args.Load (GetModuleHandle (0))  ' 初始化信息
exit_code = CefExecuteProcess (main_args, App, 0)  ' 载入初始化数据
如果真 (exit_code ≥ 0)
返回 (exit_code)
settings.SetAsSingleProcess (到整数 (是否为调试版 ()))  ' 是否为单进程运行
settings.SetAsNoSandbox (1)  ' 是否关闭沙盘
settings.SetAsRemoteDebuggingPort (20001)  ' 远程调试端口
CefInitialize (main_args, settings, App, 0)  ' 执行初始化
载入 (窗口1, , )
CefRunMessageLoop ()  ' 消息循环
CefShutdown ()  ' 关闭浏览器
返回 (0)



完成这一步,再次打开"MyKirinoApp"类,声明一个类成员变量"MyBph"类型为"MyKirinoBrowserProcessHandler",添加如下代码:

  
窗口程序集名保 留  保 留备 注
MyKirinoApp, CefApp, , 表明这个类是由CefApp派生出来的   
变量名类 型数组备 注
MyBphMyKirinoBrowserProcessHandler  

子程序名返回值类型公开备 注
_初始化 当基于本类的对象被创建后,此方法会被自动调用

子程序名返回值类型公开备 注
_销毁 当基于本类的对象被销毁前,此方法会被自动调用
MyBph.Release ()
子程序名返回值类型公开备 注
GetBrowserProcessHandler整数型 
返回 (MyBph.Wrap ())  ' 用于将Cpp类转换为C类,并反馈给浏览器




完成这一步之后,打开"MyKirinoBrowserProcessHandler"类,声明一个名为"OnContextInitialized"的函数,在这里当浏览器初始化完成之后我们会收到一次通知,以告诉我们,浏览器已经初始化完成了。声明好之后添加一个命令"REQUIRE_UI_THREAD",这是一个调试命令,只有在调试状态下有效,编译后将跳过。这个命令的作用是检查到达“OnContextInitialized”函数的通知是否是由浏览器UI线程发出的,如果不是,将会再次中断下来,表明发生异常。


  
窗口程序集名保 留  保 留备 注
MyKirinoBrowserProcessHandler, CefBrowserProcessHandler, , 通过CefBrowserProcessHandler派生出属于你的CefBrowserProcessHandler类,该类用于接管浏览器进程信息   
子程序名返回值类型公开备 注
_初始化 当基于本类的对象被创建后,此方法会被自动调用

子程序名返回值类型公开备 注
_销毁 当基于本类的对象被销毁前,此方法会被自动调用

子程序名返回值类型公开备 注
OnContextInitialized 该成员函数继承于CefBrowserProcessHandler->OnContextInitialized,函数名称不可修改。
' 原文注释:
' // Called on the browser process UI thread immediately after the CEF context
' // has been initialized.
' 当浏览器初始化完成时,该回调函数被调用,且仅被调用一次,当你发现你的浏览器再次执行到这里时,说明你的浏览器已经发生了异常
REQUIRE_UI_THREAD ()  ' 进行一次浏览器状况检查,当浏览器出现异常时,将会在此触发一个断点,但这只在调试状态下有效,当编译后,该条命令将被屏蔽





完成之后,跳到自定义数据类型界面,我们来定义一个数据类型用于管理我们的浏览器


  
数据类型名公开备 注
TheBrowserControl 
成员名类 型传址数组备 注
HandlerMyKirinoHandler  
BrowserCefBrowser  





再跳到全局变量界面,声明两个全局变量


  
全局变量名类 型数组公开备 注
broIndexTheBrowserControl100 用于存放浏览器数据,当前设置最大进能运行100个浏览器
broCount整数型  





好了,完成以上工作之后,我们再建立一个程序集,用于辅Zhu管理浏览器


  
窗口程序集名保 留  保 留备 注
MyKirinoBrowserControl  用于管理浏览器的程序集
子程序名返回值类型公开备 注
MyControlNewHandler整数型 
broCount = broCount + 1  ' 取得一个新的浏览器容器, 相当于 broIndex[broCount+1]
返回 (broCount)
子程序名返回值类型公开备 注
MyControlDeleteHandler  
broCount = broCount - 1  ' 释放一个浏览器容器, 相当于 broIndex[broCount-1]
子程序名返回值类型公开备 注
MyControlIsValid逻辑型 
参数名类 型参考可空数组备 注
Index整数型
返回 (Index ≥ 1 Index ≤ broCount)  ' 取得的浏览器容器索引是否在数组中
子程序名返回值类型公开备 注
MyControlGetCurhWnd整数型 
返回 (窗口1.选择夹1.取窗口句柄 ())  ' 返回一个父窗口给浏览器,让它创建在这之上
子程序名返回值类型公开备 注
MyControlGetWidth整数型 
返回 (窗口1.选择夹1.取用户区宽度 () - 3)  ' 返回一个宽度给浏览器
子程序名返回值类型公开备 注
MyControlGetHeight整数型 
返回 (窗口1.选择夹1.取用户区高度 () - 2)  ' 返回一个高度给浏览器





好了,所有准备工作都完成了,开始创建我们的浏览器吧


打开类,"MyKirinoBrowserProcessHandler" 声明一个函数"CreateBrowser",添加如下代码:


  
子程序名返回值类型公开备 注
CreateBrowser 
变量名类 型静态数组备 注
windowInfoCefWindowInfo设置窗口信息
browser_settingsCefBrowserSettings设置浏览器信息
HandlerIndex整数型我们的浏览器框架类
url文本型当然它是用来存放我们的home的
rectRECT浏览器的显示范围
browser整数型 
' 我们将在这里创建第一个WebKit页面,用于显示home
HandlerIndex = MyControlNewHandler ()  ' 取出一个新的浏览器容器
如果真 (MyControlIsValid (HandlerIndex))  ' 取出的浏览器容器是否存在于浏览器容器数组中
rect.top = 22  ' 设定浏览器的左边位置
rect.left = 10  ' 设定浏览器的定边位置
rect.right = MyControlGetWidth ()  ' 设定浏览器的宽度’
rect.bottom = MyControlGetHeight ()  ' 设定浏览器的高度’
windowInfo.SetAsChild (MyControlGetCurhWnd (), rect)  ' 设置浏览器窗口信息,表示当前浏览器窗口为子窗口,如果使用SetAsPopup,则表明使用独立窗口
url = http://www.sunchateau.com/free/UA.htm  ' home页,URL
browser = CefBrowserHostCreateBrowserSync (windowInfo, broIndex [HandlerIndex].Handler, url, browser_settings, 0)  ' 创建浏览器,成功返回浏览器类
如果真 (browser ≠ 0)
broIndex [HandlerIndex].Browser.ToCpp__ (browser)  ' 将浏览器类装入容器





添加完成之后,细心的你肯定会发现,我们使用了一个空的类("broIndex [HandlerIndex].Handler"),我们什么都代码都没有为它编写。那么,现在我们就来为它添加代码


打开类"MyKirinoHandler",声明一个类成员变量"MyLsh",类型为:"MyKirinoLifeSpanHandler"。并添加以下代码:


  
窗口程序集名保 留  保 留备 注
MyKirinoHandler, CefClient, , 通过CefClient派生出属于你的CefClient类,该类用于接管浏览器的整体框架信息   
变量名类 型数组备 注
MyLshMyKirinoLifeSpanHandler用于接管浏览器的运行状况

子程序名返回值类型公开备 注
_初始化 当基于本类的对象被创建后,此方法会被自动调用

子程序名返回值类型公开备 注
_销毁 当基于本类的对象被销毁前,此方法会被自动调用
MyLsh.Release ()  ' 释放一次引用计数
子程序名返回值类型公开备 注
GetLifeSpanHandler整数型 该成员函数继承于CefClient->GetLifeSpanHandler,函数名称不可修改。
返回 (MyLsh.Wrap ())  ' 该成员函数的作用为向库返回我们自己的浏览器运行状况管理类





完成之后,你会发现,我们又引用了一个新的类,我们同样没有为它添加代码,那么打开"MyKirinoLifeSpanHandler"类,声明一个成员变量"theLifeCount",类型为整数型,用以表明当前运行的浏览器数量,接着添加如下代码:


  
窗口程序集名保 留  保 留备 注
MyKirinoLifeSpanHandler, CefLifeSpanHandler   
变量名类 型数组备 注
theLifeCount整数型  

子程序名返回值类型公开备 注
_初始化 当基于本类的对象被创建后,此方法会被自动调用

子程序名返回值类型公开备 注
_销毁 当基于本类的对象被销毁前,此方法会被自动调用

子程序名返回值类型公开备 注
OnAfterCreated整数型 浏览器创建之后
参数名类 型参考可空数组备 注
browser整数型
' Called after a new browser is created.’
REQUIRE_UI_THREAD ()
theLifeCount = theLifeCount + 1
CEF_BROWSER_RELEASE (browser)
返回 (0)
子程序名返回值类型公开备 注
DoClose整数型 
参数名类 型参考可空数组备 注
browser整数型
REQUIRE_UI_THREAD ()
CEF_BROWSER_RELEASE (browser)
返回 (1)
子程序名返回值类型公开备 注
OnBeforeClose 浏览器被关闭
参数名类 型参考可空数组备 注
browser整数型
' // Called just before a browser is destroyed. Release all references to the
' // browser object and do not attempt to execute any methods on the browser
' // object after this callback returns. If this is a modal window and a custom
' // modal loop implementation was provided in RunModal() this callback should
' // be used to exit the custom modal loop. See DoClose() documentation for
' // additional usage information.
REQUIRE_UI_THREAD ()
theLifeCount = theLifeCount - 1
如果真 (theLifeCount = 0)  ' 如果当前所有的浏览器对象都被关闭了,那么进行查看用户是否选择了退出进程
CefQuitMessageLoop ()
CEF_BROWSER_RELEASE (browser)




好了,这样完成之后,我们就为4个类都编写了代码了,最后在打开"MyKirinoApp"类,添加一个成员函数"CreateBrowser",并在函数中调用 MyBph.CreateBrowser()


  
子程序名返回值类型公开备 注
CreateBrowser 创建一个新的浏览器
MyBph.CreateBrowser ()




好了,回到"窗口程序集1",声明一个程序集变量"App"类型为"MyKirinoApp"

  
窗口程序集名保 留  保 留备 注
窗口程序集1   
变量名类 型数组备 注
AppMyKirinoApp应用程序类




最后在 窗口首次激活以及销毁事件中添加以下代码,便大功告成!!


  
子程序名返回值类型公开备 注
_窗口1_首次激活  
App.CreateBrowser ()
子程序名返回值类型公开备 注
_窗口1_将被销毁  
CefQuitMessageLoop ()



点击运行,如果你成功的看到了来自于WebKit的浏览器窗口,那么期待已久的,属于你的第一个WebKit浏览器变完成拉!
好了,本期介绍就到这里。

随着《Hello WebKit》框架的深入开发,我们将逐步的完善这个属于我们自己的浏览器!


感谢观看!







作者: 黑猫よ__    时间: 2016-3-13 23:45
好像浏览器模版文件没有上传上去,在这里


浏览器模版: 浏览器模版.rar (10.96 KB, 下载次数: 249)



作者: danshuiyu    时间: 2016-3-13 23:46
技术帝 辛苦了
作者: 夏末流年    时间: 2016-3-13 23:49
吊炸天!
作者: 刘海斌    时间: 2016-3-13 23:52
膝盖已献上!
作者: Microseors    时间: 2016-3-13 23:57
能不能代替超文本呢
作者: 282134    时间: 2016-3-14 00:16
提示: 作者被禁止或删除 内容自动屏蔽
作者: 520MXQQ    时间: 2016-3-14 00:34
前排留个赞!!
作者: heyteng    时间: 2016-3-14 01:02
强大,支持!领教了!
作者: wolongoyca    时间: 2016-3-14 01:11
这就是传说中的操作谷歌浏览器了吗
作者: 珍藏版    时间: 2016-3-14 01:17
好深奥的东西。。。。。。。。。。。。。。。
作者: z3201    时间: 2016-3-14 01:25
好复杂,表示功力不够,看的好累,,
作者: 黑猫よ__    时间: 2016-3-14 01:55
弓王 发表于 2016-3-14 00:16
其实我一直没弄懂,为什么要去弄一个属于自己的浏览器......

自己做的浏览器不属于自己么,不就文面而已么,你想表达什么?重要的不是浏览器好吗?我这费死大力的用易语言写原生框架是为了什么阿,难道你们真的只想要鱼而不要渔么?
作者: afd    时间: 2016-3-14 06:48
要是有开发更多的网页图标功能就好了
作者: 1029823959    时间: 2016-3-14 09:13
效果怎么样!!!!!!!
作者: iceboy009    时间: 2016-3-14 09:35
如果这webkit能填表就叼炸了,自带的ie7太老了,很多网页填表不舒服斯基
作者: hyi    时间: 2016-3-14 13:45
本帖最后由 hyi 于 2016-3-14 13:54 编辑

“系统核心支持库5.3”版本太低...


强大,支持!领教了!


作者: wangxp    时间: 2016-3-14 18:06
很强大,谢谢!!!!!!!!!!!!!!!!!!!!!
作者: zzzzzzzz88    时间: 2016-3-14 18:56
收藏一个!!!
作者: 林文大大    时间: 2016-3-15 13:50
好啊 支持楼主 测试软件!!
作者: a5598869    时间: 2016-3-15 17:44
66666666666666   哈哈 虽然 我看不懂!!!!!
作者: ensurf    时间: 2016-3-16 14:52
这个必须顶,太棒了
作者: pandiolo    时间: 2016-3-18 11:59
持楼主! 我测试软件!  持楼主! 我测试软件!  
作者: 山顶小雪球    时间: 2016-3-18 19:19
明明是一个中文编程工具,为什么要写一堆英文
作者: 路虎    时间: 2016-3-19 16:35
W10X64跑不起来啊 什么反应没= =
作者: Xw‘小威    时间: 2016-3-19 18:20
一看就是大神的模样。
作者: 弧尊良    时间: 2016-3-20 11:24
先谢楼主分享,!!!!!!!!
作者: 我爱爱爱    时间: 2016-3-21 11:56
这个绝对好东西!!!
作者: 云韵    时间: 2016-3-22 23:26
不明觉厉啊啊啊啊
作者: ovo555    时间: 2016-3-22 23:33
wolongoyca 发表于 2016-3-14 01:11
这就是传说中的操作谷歌浏览器了吗

这么强大?!!!
作者: niufeng    时间: 2016-3-27 07:43
先谢楼主分享,!!!!!!!!

作者: mbskyzcc    时间: 2016-4-26 23:39
好东西。马克
作者: justoid    时间: 2016-5-23 09:29
不会用
作者: 钰凡    时间: 2016-6-12 18:13
必须回复看看,表示好难,英文看的头大
作者: 钰凡    时间: 2016-6-12 20:52
启动不了,怎么办啊

作者: 3106939402    时间: 2016-8-9 09:08

作者: hmilyvivi    时间: 2016-8-17 16:47
我顶。。。 慢慢学习
作者: JZSIDO    时间: 2016-9-12 14:23
挺实用的,好
作者: 0seeker    时间: 2016-9-26 13:08

作者: qw176425291    时间: 2016-10-21 23:53
谢谢分析,我来学习学习
作者: ye0416    时间: 2016-11-5 17:47
感谢分享 收藏
作者: 乐玩    时间: 2016-11-7 18:44
膜拜大神
作者: ljm1101    时间: 2016-11-21 18:43
感谢分享,很给力!
作者: longzhgm    时间: 2016-11-29 13:33
好东西啊!!!
作者: 947634891    时间: 2016-12-11 10:45
感谢,另外,能否出个支持库呢?
作者: ankalau    时间: 2016-12-15 13:19
还是没有搞懂,有没有大神教一下?
作者: fangzongyy    时间: 2016-12-26 11:32
谢谢分析,我来学习学习
作者: lvliangshan    时间: 2016-12-30 20:02
太深奥了,还是支持支持
作者: qwqw1351734    时间: 2017-1-8 00:07
Mark
作者: 钰凡    时间: 2017-1-18 07:13
支持楼主! 我测试软件!
作者: oddest    时间: 2017-2-18 14:36
提示: 作者被禁止或删除 内容自动屏蔽
作者: 晴雯晴雯    时间: 2017-3-4 18:56
感谢分享,很给力!
作者: SskBad    时间: 2017-3-12 18:50
好东西啊!!!
作者: yyws    时间: 2017-3-15 15:28
感谢分享,很给力!~
作者: workkin    时间: 2017-4-17 17:56
先回复后下载,谢谢大神
作者: zhujiangcq    时间: 2017-6-28 14:18
下载研究下!!!!!!感谢!!
作者: dulang    时间: 2017-7-5 12:21
支持开源~!感谢分享
作者: jyxjjj    时间: 2017-7-20 11:50
Qt只需要7行~
作者: 522525274    时间: 2017-7-23 02:25
试试学习学习
作者: 522525274    时间: 2017-7-23 02:33
却shaodll 文件压 dll文件
作者: lcfdiy    时间: 2017-7-23 22:34
看看看看看看看看看扩扩扩扩扩扩扩扩扩扩扩
作者: lcfdiy    时间: 2017-7-23 22:35
太乱了  集成较好
作者: qw176425291    时间: 2017-7-28 21:27
谢谢分享的朋友,支持!!!
作者: a457730862    时间: 2017-10-19 09:24
支持一下!!!!!
作者: mkxk    时间: 2017-11-1 23:30
缺少DLL文件~
作者: eyy2017    时间: 2017-11-3 10:39
C:\Users\Administrator\Desktop\2345截图20171103103707.png
作者: eyy2017    时间: 2017-11-3 10:39
易语言模块不存在
作者: liujiaqi7998    时间: 2018-2-21 22:22
666666666666666
作者: kic1234    时间: 2018-3-13 17:17
下载了,学习一下
作者: weihua2018    时间: 2018-3-15 08:52
为什么要全部用英文了,易语言明显就是中文编程的,你又搞个英文的啥意思,又回其它语言一样看不到了
作者: boot88    时间: 2018-3-31 01:26
好牛叉的东西
作者: q14060    时间: 2018-6-5 18:18
#在这里快速回复#支持楼主! 我测试软件
作者: 音鬼    时间: 2018-6-23 12:57
模块源码使用的,模块没有,这是坑我的吧
作者: luowei1q    时间: 2018-7-1 14:47
多谢楼主分享
作者: minter    时间: 2018-8-13 21:14
谢谢楼主的分享
作者: minze    时间: 2018-9-14 19:07
谢谢分享·······
作者: huatanxier    时间: 2019-2-15 04:26
BrowserBrowserBrowserBrowser
作者: tianxi    时间: 2019-6-12 09:35
怎么安装 怎么使用 取网页文本内容
作者: 落款hMZ    时间: 2019-8-5 19:27
提示: 作者被禁止或删除 内容自动屏蔽
作者: 落寞23333    时间: 2019-9-7 14:04
好东西下载康康
作者: hsg52052    时间: 2019-10-12 14:26
我来学习学习
作者: lujinge    时间: 2019-11-12 09:15
我来学习学习
作者: ttttttlijlkj    时间: 2019-11-21 01:07
而回购本人和个人
作者: 琉璃苣    时间: 2019-12-10 20:00

谢谢楼主的分享
作者: moli15522    时间: 2019-12-26 11:05
怎样设置网页代理,网页里的下载链接点了没反应,
请大神回答
作者: 瞬间的永恒    时间: 2020-9-10 22:59
看着很牛,学习学习
作者: a3254839740    时间: 2022-3-24 22:52
顶上去啊
作者: 心野天空    时间: 2022-8-2 09:12
白白的扣了,每个都下载了.但DLL库文件"libcef.dll"不含在里面无法测试

作者: lyt2598    时间: 2023-6-3 19:29
学习一下,啊啊啊啊啊啊啊啊啊
作者: DMS千    时间: 2023-7-18 19:21
66666666666666666666666666666666666666
作者: Tonym    时间: 2024-5-22 01:05
本帖最后由 Tonym 于 2024-5-22 01:08 编辑

这种纯属骗积分分数,少个dll,电脑一搜,几十个,哪个都不合适:libcef.dll, 缺少输出函数:cef_api_hash

VX图片_20240522010648.png (101.95 KB, 下载次数: 0)

VX图片_20240522010648.png





欢迎光临 精易论坛 (https://125.confly.eu.org/) Powered by Discuz! X3.4