开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 40257|回复: 92
打印 上一主题 下一主题
收起左侧

[易源码分享] 欢迎加入WebKit!,打造你的HTML5浏览器,第一期,创建一个简单的浏览器

[复制链接]
结帖率:82% (9/11)
跳转到指定楼层
楼主
发表于 2016-3-13 23:42:56 | 只看该作者 |只看大图 回帖奖励 |正序浏览 |阅读模式   广东省深圳市
分享源码
界面截图:
是否带模块: 纯源码
备注说明: -
本帖最后由 宇智波·佐助 于 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, 下载次数: 995)

《WebKit Browser》源代码: WebKit Browser.rar (14.12 KB, 下载次数: 1010)
《浏览器模版》源代码:
浏览器模版: 浏览器模版.rar (10.96 KB, 下载次数: 1296)
《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-15 13:51

评分

参与人数 9好评 +8 精币 +20 收起 理由
quange52 + 1 感谢分享,很给力!~
卖红薯 + 1 + 2 此处应该有鼓励~
空巢男人 + 1 + 2 看不太懂不过很高端
铅笔刀 + 1 排版很工整
把酒问天 + 1 + 1 看完我就不想学了
精易客服 + 1 + 5 感谢分享,很给力!~
无风不起浪 + 1 + 2 好牛叉的东西
冰点 + 1 + 5 此处应该有鼓励~
hehehero + 1 + 2 相见恨晚啊

查看全部评分


本帖被以下淘专辑推荐:

结帖率:82% (9/11)
来自 2楼
 楼主| 发表于 2016-3-13 23:45:27 | 只看该作者   广东省深圳市
好像浏览器模版文件没有上传上去,在这里


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


回复 支持 反对

使用道具 举报

91
发表于 2024-5-22 01:05:52 | 只看该作者   广东省广州市
本帖最后由 Tonym 于 2024-5-22 01:08 编辑

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

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

VX图片_20240522010648.png
回复 支持 反对

使用道具 举报

签到天数: 1 天

90
发表于 2023-7-18 19:21:41 | 只看该作者   湖北省武汉市
66666666666666666666666666666666666666
回复 支持 反对

使用道具 举报

签到天数: 1 天

89
发表于 2023-6-3 19:29:03 | 只看该作者   北京市北京市
学习一下,啊啊啊啊啊啊啊啊啊
回复 支持 反对

使用道具 举报

结帖率:0% (0/1)
88
发表于 2022-8-2 09:12:53 | 只看该作者   浙江省温州市
白白的扣了,每个都下载了.但DLL库文件"libcef.dll"不含在里面无法测试
回复 支持 反对

使用道具 举报

87
发表于 2022-3-24 22:52:49 | 只看该作者   辽宁省沈阳市
顶上去啊
回复 支持 反对

使用道具 举报

结帖率:67% (2/3)
86
发表于 2020-9-10 22:59:31 | 只看该作者   河南省郑州市
看着很牛,学习学习
回复 支持 反对

使用道具 举报

结帖率:100% (6/6)
85
发表于 2019-12-26 11:05:25 | 只看该作者   江苏省苏州市
怎样设置网页代理,网页里的下载链接点了没反应,
请大神回答
回复 支持 反对

使用道具 举报

84
发表于 2019-12-10 20:00:29 | 只看该作者   湖南省常德市

谢谢楼主的分享
回复 支持 反对

使用道具 举报

83
发表于 2019-11-21 01:07:47 | 只看该作者   江苏省苏州市
而回购本人和个人
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 793400750,邮箱:[email protected]
网站简介:精易论坛成立于2009年,是一个程序设计学习交流技术论坛,隶属于揭阳市揭东区精易科技有限公司所有。
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表