使用webkit开发桌面软件

admin2021-01-02  272

一、webkit 扩展库简介

aardio中的web.kit扩展库基于wke,一般基于webkit内核的组件都比较大打包也有几十MB,但是wke这个非常小打包仅3MB多一点,当然这里面精简掉了一些桌面UI不常用的功能,例如音频、视频有关的功能,如果你需要播放音频或视频,可以在网页中嵌入flash。

aardio中可以嵌入的web浏览器内核比较多,有 web.kit, web.layout(HTMLayout内核), web.form(IE内核)。
其中 webform是体积最小的(因为IE内核系统自带),而开发软件界面HTMLayout则是最方便的,webkit的优势是可以使用HTML5,CSS3,以及bootstrap等CSS3框架,但webkit的体积较大(精简后仍然比HTMLayout大几倍)。

HTML5,CSS3虽然用起来很时尚,但是注意这些技术并不是为桌面软件的界面开发所设计的,
如果是做软件界面的话,HTMLayout要方便快捷的多,例如HTMLayout里的自适应大小单位%%,布局CSS属性flow,以及背景前景九宫格、标准库提供的一堆behavior,以及自己扩展behavior的方便快捷,等等,这些用传统CSS都是非常麻烦的。

webform的优势是体积小,可以支持Javascript等,一般可以用HTMLayout做界面,再嵌入webform放传统的网页,HTMLayout可以支持自定义控件,两者可以非常方便的结合。

另外,web.kit 核心只是将网页解析并渲染到位图,通过web.kit.gdiRender等显示在窗口上,就是说他主要的功能是绘图(这样带来的好处是接口更简洁,做桌面透明窗口这些非常方便),他并不提供一个完整的浏览器所具有的一些交互窗口以及相关功能,例如下载文件对话框,右键菜单等等交互窗口,这是缺点同时也是他的优点( 使用IE内核做界面时可能要煞费苦心的设计怎么隐藏掉这些交互窗口 ),所以这个扩展库的目的是用来嵌入网页界面的,并不太适合用来做普通网页浏览器。


二、使用webkit创建窗口

用下面的代码创建webkit视图对象:

var wbKitView = web.kit.form(winform); //winform是win.form创建的窗体对象

那么 wbKitView.window 就是JS的全局对象,而 wbKitView.document 就是文档对象。
获取到JS或文档对象以后,就可以直接调用该对象的属性或函数了,例如:

import win.ui;
/*DSG{{*/
var winform = win.form(text="调用JS测试";right=1123;bottom=570)
/*}}*/

import web.kit.form;  
var wbKitView = web.kit.form(winform);
wbKitView.document.write("测试");

winform.show();
win.loopMessage();

那么我们怎么在网页里调用 aardio 函数呢?
很简单,与 web.form 的用法类似,使用 wbKitView.external 就可以导出aardio函数给网页使用了,下面是一个简单示例:

import win.ui;
/*DSG{{*/
var winform = win.form(text="webkit浏览器简单示例";right=1123;bottom=570)
/*}}*/

//导入webkit支持库
import web.kit.form;  
var wbKitView= web.kit.form(winform); //创建webkit浏览器窗口

//使用external接口定义网页脚本可调用的本地函数
wbKitView.external = {

    hitCaption = function(){
        winform.hitCaption();
    };
    close = function(){
        winform.close();
    };
    aardioCall = function(str){
        winform.msgbox(str);
    };
}

wbKitView.html = /**
    <a href='javascript:external.close();'>关闭窗口</a>
   
    <div onmousedown='javascript:  
        external.hitCaption();
        return false;
    ' style="-webkit-user-select: none;cursor:default;background:#cce;padding:25px;margin:10px;">拖动窗口</div>
   
    <a href='javascript:
        external.aardioCall("你好,我是webkit");
    '>调用aardio函数external.aardioCall()</a>
**/

winform.show()
win.loopMessage();

我们也可以使用 web.kit.export 直接将aardio对象导出为JS全局变量,示例:
import win.ui;
/*DSG{{*/
var winform = win.form(text="WebKit - JS直接调用WinAPI";right=1123;bottom=570)
/*}}*/

import web.kit.form; //导入WebKit支持库
var mb = web.kit.form(winform); //创建WebKit浏览器窗口

//导出DLL对象为JS全局变量
web.kit.export("user32",::User32);

mb.html = /**
    <a href='javascript:
    user32.MessageBox(0,"JS直接调用WinAPI","user32.MessageBox",0)
    '>JS直接调用WinAPI函数试一下</a>
**/  

winform.show()
win.loopMessage();

很简单很简单对吧?

友情提醒:
如果你的网页还需要在HTML中链接其他CSS,JS等资源文件,
请把上面的wbKitView.html赋值改为 wbKitView.go("要打开的文件路径或网址"),
例如你的网页位置是 /res/my.html,那么就使用代码 wbKitView.go("/res/my.html") 打开网页,注意路径中的第一个斜杠表示工程目录,HTML中链接其他CSS,JS等各种文件用相对路径就可以了(跟做网站的规则完全一样)。

如果需要把网页内置到EXE中,请看后面回帖子中的教程。

大家有没有注意到 wbKitView.external 的用法与 web.form 中的  wb.external 用法很象? 这样设计是让实现一个兼容的接口成为可能,web.form基于IE内核,现在支持HTML5的IE11基本已普及并且在不久的将来会完全普及,所以大家可以先做一个检测,如果用户已经有IE11可以用web.form来显示网页,否则提醒用户下载webkit插件,这样就能兼顾到体积小与兼容性

转载请注明原文地址: https://seopai.com/read-117.html
最新回复(0)