查看: 70698|回复: 41
使用webkit开发桌面软件
主题帖子积分
建议大家使用 web.blink 替代 web.kit，
请参考教程：
miniblink使用新版chromium内核，并且精简了体积，兼容WKE( WebKit ）组件的接口。
一、webkit 扩展库简介
aardio中的web.kit扩展库基于,一般基于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.
var winform = win.form(text=&调用JS测试&;right=1123;bottom=570)
import web.kit.&&
var wbKitView = web.kit.form(winform);
wbKitView.document.write(&测试&);
winform.show();
win.loopMessage();
那么我们怎么在网页里调用 aardio 函数呢？
很简单，与 web.form 的用法类似，使用 wbKitView.external 就可以导出aardio函数给网页使用了，下面是一个简单示例：
import win.
var winform = win.form(text=&webkit浏览器简单示例&;right=1123;bottom=570)
//导入webkit支持库
import web.kit.&&
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();
& & ' style=&-webkit-user-select:cursor:background:#padding:25margin:10&&拖动窗口&/div&
& & &a href='javascript:
& && &&&external.aardioCall(&你好,我是webkit&);
& & '&调用aardio函数external.aardioCall()&/a&
winform.show()
win.loopMessage();
我们也可以使用 web.kit.export 直接将aardio对象导出为JS全局变量，示例：
import win.
var winform = win.form(text=&WebKit - JS直接调用WinAPI&;right=1123;bottom=570)
import web.kit. //导入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插件，这样就能兼顾到体积小与兼容性
主题帖子积分
事件、常用函数
3.1、事件：
wbKitView.onTitleChanged 事件在网页标题改变时触发
wbKitView.onURLChanged 事件在网址改变时触发
wbKitView.onNavigation //打开链接时触发
wbKitView.onDocumentReady //文档加载完成时触发
3.2、常用函数：
webkit.wait() 等待网页加载就绪，如果页面上有调用执行JS这些最好在打开网页后加上这句。
webkit.waitDoc() 等待文档准备就绪并返回文档对象。
webkit.doScript(&&) 用于执行JS代码&&
webkit.eval(&&) 运行JS表达式并返回结果，例如 webkit.eval(&window&) 返回JS中的window对象
webkit.querySelector(&CSS选择器&) 查找节点, web.form虽然也支持这函数但IE6就不行了,这个不用受这个限制。
webkit.querySelectorAll(&CSS选择器&) 查找多个匹配节点并返回集合
3.3、简单示例import win.
var winform = ..win.form(text=&Web Kit&;right=848;bottom=585)
winform.add()
import web.kit.
wbKitView = web.kit.form(winform)
//网页标题改变时触发此事件
wbKitView.onTitleChanged = function(title){
& & owner.getForm().text =
//网址改变时触发此事件
wbKitView.onURLChanged = function(url){
& & //if(#url) owner.getForm().text =
//打开链接时触发
wbKitView.onNavigation = function(url,navigationType){
& & if( navigationType == 0/*_WKE_NAVIGATION_TYPE_LINKCLICK*/ ){
& && &&&//navigationType可以判断打开链接类型
& & return true;//允许打开此链接
//文档加载完成时触发
wbKitView.onDocumentReady = function(url,mainFrameJSState,frameJSState){
& & if( mainFrameJSState == frameJSState ){
& && &&&//判断是否主框架
wbKitView.go(&http://www.so.com&)
winform.show();
wbKitView.wait();
wbKitView.querySelector(&#input&).value = &aardio webkit&;
wbKitView.querySelector(&#search-button&).click();
wbKitView.wait();
wbKitView.doScript(&alert('欢迎使用搜索引擎');&);
winform.text = wbKitView.eval(&document&).location.href
win.loopMessage();
主题帖子积分
注册JS全局函数、加载插件、设置User Agent
5.1、 注册JS全局函数
注册JS全局函数很简单，先看一个例子：//自定义js中的alert函数
web.kit.jsBindFunction(&alert&,1/*JS回调时的参数个数*/,function(str){
& & var wbKitView = owner; //owner是当前调用此函数的webkit视图对象
& & var winform = wbKitView.getForm(); //这是显示网页视图的win.form窗体对象
& & if( winform ) winform.msgbox(str);
在创建webkit窗口视图以前就可以先注册这些全局函数。
5.2、 如何使用插件
web.kit会在当前目录下的plugins子目录下搜索插件，
可以使用 fsys.setCurDir() 函数或 ::Kernel32.SetCurrentDirectoryW() 函数修改当前目录。
web.kit也支持在注册表中自动搜索HKCU\Software\MozillaPlugins下面注册的插件路径并加载。web.kit扩展库已经默认包含了flash插件，但这个插件不是必须的，如果不使用flash可以在发布时选择不需要该插件，那么最后需要发布的文件体积就比较小了（7z压缩后大概 3.xMB, 因为7z已经非常流行了，建议用7z压缩）
5.3、 设置User Agent
import win.
var winform = win.form(text=&Web Kit&;right=848;bottom=585)
import web.kit.
wbKitView = web.kit.form(winform)
wbKitView.userAgent = &Mozilla/5.0&
wbKitView.go(&http://httpbin.org/headers&)
winform.show();
win.loopMessage();
5.4、 如何设置代理
很简单，通过环境变量设置代理，格式： win.setenv(&HTTP_proxy&,&http://代理服务器IP:代理端口/&)
示例程序：
import win.
var winform = win.form(text=&webkit form&;right=811;bottom=497)
//设置webkit代理
win.setenv(&HTTP_proxy&,&http://代理服务器IP:代理端口/&)
import web.kit.form
var wbKit = web.kit.form(winform)
wbKit.go(&http://www.ip.cn/&)
winform.show()
win.loopMessage();
调用下面的代码也可以设置代理：
web.kit.configure({
& & proxy = {
& && &&&type = &HTTP&;
& && &&&hostname = &127.0.0.1&;
& && &&&port = 8080;
& && &&&username = &&;
& && &&&password =&&;
& & cookieFilePath = &/cookie&;
主题帖子积分
通过嵌入式Web服务器使用aardio模板语法
aardio 10支持在服务端使用HTML模板语言，
也可在在HTMLayout中使用HTML模板语言，参考：
这种语言级的HTML模板语法非常方便，其实在web.kit中也可以使用模板语法。
我们需要调用 wsock.tcp.simpleHttpServer.startUrl() 创建一个迷你型的web服务端，这个函数很有意思，创建的服务端自动获取可用端口，所以不用端心端口冲突的问题，并且支持多线程并发请求，自动开始，自动退出，不需要你做任何线程操作，所有事他全部做好，只会返回给你一个可以访问的网址。
wsock.tcp.simpleHttpServer.startUrl()&&返回的网址指向当前工程根目录，并且保证网址尾部不带斜杠。
用起来非常简单，一个例子（ 当然，你需要建议一个 aardio工程，把下面的代码复制到工程的启动文件 main.aardio中）：
import win.
var winform = win.form(text=&webkit浏览器简单示例&;right=1123;bottom=570)
import web.kit.&&
var wbKitView= web.kit.form(winform);
import wsock.tcp.simpleHttpS
wbKitView.go( wsock.tcp.simpleHttpServer.startUrl(&/html/main.aardio&) );
winform.show()
win.loopMessage();
上面的方法也可以用于其他浏览器控件，例如 web.form 等等。
主题帖子积分
在WebKit控件中调用Firebug Lite网页调试工具
Firebug Lite支持web.kit,web.form这些浏览器组件，
只要简单的在HTML里加上这句代码就可以了：
&script src=&https://getfirebug.com/firebug-lite.js#overrideConsole&&&/script&复制代码
如果加载速度慢可以改用国内的CDN
或者下载JS文件到本地。
下面是一个完整的示例，打开后按F12启动Firebug Lite：import win.
winform = win.form(text=&请稍候正在加载firebug-lite.js......&;right=1095;bottom=687)
winform.add()
import web.kit.//导入WebKit组件
var wbKit = web.kit.form(winform); //创建WebKit控件
wbKit.onDocumentReady = function(url,mainFrameJSState,frameJSState){
& & winform.text = &firebug-lite.js已加载，请近F12试一试!&
wbKit.html = /**
&!doctype html&
& & &script src=&https://cdn.bootcss.com/firebug-lite/1.4.0/firebug-lite.js#overrideConsole&&&/script&
& & &div id=&header&&现在主流的浏览器都提供开发工具，都可以通过按F12打开开发工具非常方便&/div&
& & &div id=&container&&
& && &&&但有时候我们需要在内嵌的浏览器控件中使用开发工具，&br&
& && &&&这时候我们可以只要简单的在代码中加上下面的代码就可以了：&br&&br&
& && &&&&script src=&https://getfirebug.com/firebug-lite.js#overrideConsole& & &/script&
& & &/div&
winform.show();
return win.loopMessage();
主题帖子积分
web.kit操作JS对象和数组
新版改进了一下（升级aardio和web.kit扩展库），操作JS对象、数组更简单了：import win.
var winform = win.form(text=&webkit - aardio操作js对象&;right=1123;bottom=570)
winform.add(
edit={cls=&edit&;left=898;top=26;right=1363;bottom=539;db=1;dr=1;dt=1;edge=1;multiline=1;vscroll=1;z=1}
import web.kit.&&
var wb = web.kit.form(winform);
//使用external接口定义网页脚本可调用的本地函数
wb.external = {&&
& & aardioCall = function(object){
& && &&&winform.edit.print(&-----------------遍历JS对象的所有成员-----------------------&);
& && &&&for name,value in table.eachName(object){
& && && && &winform.edit.print(&对象&,name,value);
& && &&&winform.edit.print(&-----------------遍历JS数组的所有成员-----------------------&);
& && &&&for i,v in table.eachIndex(object.array){
& && && && &winform.edit.print(&数组&,i,v);
& && &&&winform.edit.print(&-----------------直接转换为普通的对象-----------------------&);
& && &&&var obj = web.json.strip(object);
& && &&&winform.edit.print(obj);
wb.html = /**&&
& & &a href='javascript:
& & external.aardioCall({
& && &&&url:&服务端URL&,
& && &&&param:{a:1,b:2,c:3},
& && &&&array:[11,12,13,14,15]
& & }); '&调用aardio函数external.aardioCall()操作JS对象、数组&/a&
winform.edit.orphanWindow();
winform.show()
win.loopMessage();
主题帖子积分
inet.http 与 web.kit 共享会话
大家知道inet.http与 web.form浏览器控件是可以自动共享会话的，这非常的方便，而webkit并不能与inet.http共享会话，但是没有关系，今天我已经升级了web.kit 扩展库以及标准库中的inet.http，使两者之间可以实现共享会话。
下面是演示代码，运行以下代码打开论坛以后，请输入用户名、密码登录论坛，然后点击“后台抓网页”按钮在 aardio中调用 inet.http 抓取网页，注意这时候抓取到的页面显示的是登录后的页面，可以看到 inet.http 与 web.kit 成功共享会话。
import win.
var winform = win.form(text=&web.kit/inet.http 共享会话 - 登录后再试&;right=1206;bottom=795)
winform.add(
btnHttpGet={cls=&button&;text=&后台抓取网页&;left=1079;top=16;right=1183;bottom=60;dr=1;dt=1;z=1};
btnOpen={cls=&button&;text=&打开网页&;left=961;top=15;right=1062;bottom=57;dr=1;dt=1;z=5};
custom={cls=&custom&;text=&custom&;left=36;top=88;right=1173;bottom=766;db=1;dl=1;dr=1;dt=1;z=3};
edit={cls=&edit&;left=28;top=76;right=1190;bottom=765;db=1;dl=1;dr=1;dt=1;edge=1;hide=1;multiline=1;z=4};
editUrl={cls=&edit&;text=&http://bbs.aardio.com&;left=28;top=21;right=956;bottom=50;dl=1;dr=1;dt=1;edge=1;multiline=1;z=2}
import web.kit.
var wb = web.kit.form( winform.custom );
winform.show();
//打开网页
wb.go(&http://bbs.aardio.com/&)
//自动点击登录页面
wb.waitQueryEles(&a&,{innerText=&登录&;href=&login&} ).click();
import string.
import inet.
winform.btnHttpGet.oncommand = function(id,event){
& & //首先取浏览器的userAgent，假装是浏览器
& & var http = inet.http(wb.script.navigator.userAgent);
& & //禁用默认的cookie管理
& & http.disableCache();
& & http.disableCookies();
& & //把浏览器的cookie加上去
& & http.addHeaders ={cookie = wb.cookie}
& & var str = http.get(wb.location);
& & if( str ){
& && &&&if(!string.isUtf8(str))
& && && && &str = string.fromto(str,0,65001);& &
& && && && &
& && &&&winform.edit.text = string.html.toText(str);
& & else {
& && &&&winform.edit.text = &&;
& & winform.custom.hide = true;
& & winform.edit.hide = false;
winform.btnOpen.oncommand = function(id,event){
& & wb.go( winform.editUrl.text );
& & winform.custom.hide = false;
& & winform.edit.hide = true;
wb.onURLChanged = function(url){
& & winform.editUrl.text =
//启动消息循环
win.loopMessage();
主题帖子积分
web.kit新版提供的cookie管理函数
import win.
var winform = win.form(text=&webkit 获取所有网站cookie&)
import web.kit.
var wb = web.kit.form( winform );
wb.go(&http://www.baidu.com&)
winform.show();& &
win.delay(1000);
//写网站cookie
wb.cookieSet(& &
& & name = &test&;
& & value = &abc&;
& & domain = &.baidu.com&;
& & path = &/&;
& & expires = time().addday(30)
//输出所有网站cookie
winform.msgbox( wb.cookieData().stringify() )
//转换为HTTP请求头格式
var cookies&&= wb.cookieData().getCookies(&baidu.com&)
//首先取浏览器的userAgent，假装是浏览器
import inet.
var http = inet.http(wb.script.navigator.userAgent);
//禁用默认的cookie管理
http.disableCache();
http.disableCookies();
//把浏览器的cookie加上去
http.addHeaders ={cookie = cookies }
//跟浏览器共话
var str = http.get(wb.location);
win.loopMessage();webkit的cookie格式支持标准库中的，可以使用 fsys.cookies加载，转换，存储，详细的请看库函数文档。
主题帖子积分
web.kit 上传文件
web.kit可以直接支持上传文件：import win.
var winform = win.form(text=&WebKit上传文件&)
winform.add()
import web.kit.
var wb = web.kit.form( winform&&);
wb.html = /**
& & &form action=&http://httpbin.org/post& method=&post& enctype=&multipart/form-data&&
& && &&&选择文件:&input type=&file& name=&file1& /&&br /&
& && &&&&input type=&submit& value=&上传& /&
& & &/form&
winform.show();
win.loopMessage();
主题帖子积分
web.kit 使用js调用aardio上传文件
import win.
var winform = win.form(text=&webkit上传文件示例&)
import web.kit.&&
var wb = web.kit.form(winform);&&
import inet.
import web.multipartFormD
import fsys.
wb.external = {
& & upload = function(userAgent,proc){
& && &&&var postSize,contentLength = 0;
& && &&&var filePath&&= fsys.dlg.open(,&选择要上传的文件&);
& && &&&if(!filePath) return;
& && &&&var form = web.multipartFormData();
& && &&&form.add(&username&,&用户名&);
& && &&&form.add(&password&,&密码&);
& && &&&form.addFile(&filename&,filePath);
& && &&&//使用webkit的userAgent，假装是webkit客户端
& && &&&var http = inet.http(userAgent);
& && &&&http.disableCookies();//禁用默认的cookie
& && &&&http.disableCache(); //强制刷新
& && &&&http.addHeaders ={
& && && && &cookie = wb.//添加浏览器的cookie
& && &&&http.onSendBegin = function(){
& && && && &contentLength = form.size();
& && && && &return contentL
& && &&&http.onSend = function(remainSize){
& && && && &var str = form.read(0x2000);
& && && && &if(!#str)return;
& && && && &postSize = postSize + #
& && && && &proc( contentLength,postSize,remainSize-#str );
& && && && &win.delay(10)
& && && && &return
& && &&&var json = http.post(&http://httpbin.org/post&,,{ [&Content-Type&] = form.contentType() }&&);
& && &&&wb.document.write(&&pre&&+json+&&/pre&&)
wb.html = /**
&!doctype html&
& & &meta http-equiv=&content-type& content=&text/charset=utf-8&&
& & &a href='javascript:external.upload(navigator.userAgent,
& && &&&function(contentLength,postSize,remainSize){
& && && && &document.write( &&br&总大小：& + contentLength +& 已上传：& + postSize + & 剩余：& + remainSize);
& && &&&});'&上传&/a&
winform.show()
win.loopMessage();
主题帖子积分
无边框窗口示例
webkit.png (29.11 KB, 下载次数: 540)
15:29 上传
import win.
var winform = ..win.form(text=&webkit浏览器支持库&;right=544;bottom=362;border=&none&)
winform.add()
//导入webkit支持库
import web.kit.
//创建webkit浏览器窗口
var wbKitView = web.kit.form(winform);
wbKitView.external = {
& & hitmin = function(){
& && &&&return winform.hitmin();& &
& & hitmax = function(){
& && &&&return winform.hitmax()
& & hitCaption = function(){
& && &&&return winform.hitCaption()
& & close = function(){
& && &&&return winform.close()&&
wbKitView.html = /**&&
&!doctype html&
html,body{
& & margin:0;
& & background:#
& & height:100%;
& & -webkit-user-select:
/*标题栏*/
& & position:
& & left:0
& & height:28
& & width:100%;
& & background:rgb(52,152,220);
& & cursor:
/*中间内容栏*/
#container{
& & box-sizing:border-/*使高度包含padding*/
& & height:100%;
& & width:100%;
& & padding-top:28
& & padding-bottom:35
& & margin:0
& & overflow:& &
& & height:35
& & width:100%;
& & position:
& & bottom:0;
& & left:0;
& & z-index:100;
& & background:rgb(239,237,238);
& & text-align:
& & padding:3px 5
& & box-sizing:border-
/*中间内容栏 左侧列*/
#container .lside{
& & height:100%;
& & width:150
& & float:
& & background:rgb(110,179,210);
/*中间内容栏 右侧列*/
#container .rside{
& & height:100%;
& & margin-left:150
& & background:#FFF;
#footer button{
& & padding:4px 13
& & font-size:12
& & background:rgb(27,174,93);
& & color:
& & border:0;
#footer button:hover {
& & background:rgb(33,127,188);
& & box-shadow: 0 0 5px rgba(81, 203, 238, 1);
& & cursor:
#footer button:active {
& & background:rgb(20,110,170);
& & cursor:
#header .title-bar{
& & margin-right:75
& & padding-left:10
& & height:28
& & line-height: 28
& & font-size:9
& & color:#
#header .ctrls{&&
& & width:75
& & height:28
& & float:
#header .ctrls a{
& & display:
& & float:
& & height:14
& & font-family:&Marlett&;
& & font-size:14
& & padding:4
& & color:#
& & cursor:
#header .ctrls a[id]:hover{
& & background:#6
#header .ctrls a[id]:active{
& & background:#FF0000;
& & &div id=&header&&
& && &&&&div class=&ctrls&&
& && && && &&a id=&window-min& onclick=&external.hitmin()&&0&/a&
& && && && &&a id=&window-max& onclick=&this.innerText = external.hitmax()?'2':'1';&&1&/a&
& && && && &&a id=&window-close& onclick=&external.close()&&r&/a&
& && &&&&/div&
& && &&&&div class=&title-bar& onmousedown=&external.hitCaption()&& &span class=title& 我 的 软 件 &/span&&/div&
& & &/div&
& & &div id=&container&&
& & &div class=&lside&& &/div&
& & &div class=&rside&& &/div&
& & &/div&
& & &div id=&footer&&
& && &&&&button onclick=&alert('hello')&&点击这里&/button&
& & &/div&
//添加可拖动边框
import win.ui.resizeB
win.ui.resizeBorder(winform);
//添加阴影
import win.ui.
win.ui.shadow(winform);
//限定最大化范围
import win.ui.
win.ui.minmax(winform);
winform.show();
win.loopMessage();
主题帖子积分
创建透明窗口
首先我们在aardio里显示flash透明窗口是很简单的，例如import win.flashBox
var flash = win.flashBox(text=&aardio Form&;right=599;bottom=399)
flash.movie = &http://update.aardio.com/aardio/samples/transparent.swf&;
flash.show()
win.loopMessage();win.flashBox的详细介绍请参考：而且普通控件也可以使用aardio中的orphanWindow非常方便的浮动透明、显示透明flash控件这些，详细的请参考：，所以仅仅是让透明flash控件显示在网页上面，这在aardio中是非常简单的。
web.kit 也支持这种不规则的透明分层窗口，这里用来显示透明flash动画只是举个例子，透明窗口上具体显示些什么，当然不用FLASH用HTML也可以，下面我们先上效果图：
webkitlayered.png (92.68 KB, 下载次数: 559)
15:32 上传
再来看看完整的源码( 注意在小企鹅上面点一下会关闭示例 )： import win.
var winform = ..win.form(text=&wbKitView浏览器简单示例&;right=1123;bottom=570;border=&none&;mode=&popup&)
winform.add()
//导入wbKitView支持库
import web.kit.layeredW
var wbKitView = web.kit.layeredWindow(winform);//创建透明分层窗口
wbKitView.html = /**
&!doctype html&
& & &object width=&500& height=&500& type=&application/x-shockwave-flash& data=&http://img.pet.qq.com/xuanflash/.swf&&
& && &&&&param name=&movie& value=&http://img.pet.qq.com/xuanflash/.swf&&
& && &&&&param name=&wmode& value=&Transparent&&
& && &&&&param name=&quality& value=&high& /&
& & &/object&
& &&&&nbsp:
& & &!--注意页面上一定要放一点什么空白的内容,不然透明Flash无法自己绘制背景导致产生重影--&
winform.wndproc = function(hwnd,message,wParam,lParam){
& & if( message == 0x201/*_WM_LBUTTONDOWN*/ )
& && &&&winform.close();
winform.show()
win.loopMessage();
主题帖子积分
RE: 使用webkit调用echarts
此示例演示了aardio与Javascript间使用JSON交换数据的方法。
import win.
var winform = win.form(text=&aardio echarts&;right=909;bottom=669;border=&dialog frame&;max=false;min=false)
import web.kit.
var wb = web.kit.form( winform );
import web.
wb.external = {
& & getOption = function( num ){
& && &&&var data = {
& && && && &calculable = true;
& && && && &legend = {
& && && && && & data = { &直接访问&; &邮件营销&; &联盟广告&; &视频广告&; &搜索引擎& };
& && && && && & orient = &vertical&;
& && && && && & x = &left&
& && && && &};
& && && && &series = {
& && && && && & {
& && && && && && &&&center = { &50%&; &60%& };
& && && && && && &&&data = {
& && && && && && && && &{ name = &直接访问&; value = 335 };
& && && && && && && && &{ name = &邮件营销&; value = 310 };
& && && && && && && && &{ name = &联盟广告&; value = 234 };
& && && && && && && && &{ name = &视频广告&; value = 135 };
& && && && && && && && &{ name = &搜索引擎&; value = 1548 }
& && && && && && &&&};
& && && && && && &&&name = &访问来源&; radius = &55%&; type = &pie&
& && && && && & }
& && && && &};
& && && && &title = { subtext = &纯属虚构&; text = &某站点用户访问来源&; x = &center&& & };
& && && && &toolbox = {
& && && && && & feature = {
& && && && && && &&&dataView = { readOnly = false; show = true };
& && && && && && &&&magicType = {
& && && && && && && && &option = { funnel = { funnelAlign = &left&; max = 1548; width = &50%&; x = &25%& }};
& && && && && && && && &show = true;
& && && && && && && && &type = { &pie&; &funnel& }
& && && && && && &&&};
& && && && && && &&&mark = { show = true };
& && && && && && &&&restore = { show = true };
& && && && && && &&&saveAsImage = { show = true }
& && && && && & }; show = true
& && && && &};
& && && && &tooltip = { formatter = &{a} &br/&{b} : {c} ({d}%)&; trigger = &item& }
& && &&&return web.json.stringify(data);
wb.html = /**
&!doctype html&
& & &meta http-equiv=&X-UA-Compatible& content=&IE=edge& /&
& & &meta charset=&UTF-8&&&&
& & &div id=&main& style=&height:600&&&/div&
& & &script src=&http://echarts.baidu.com/dist/echarts.min.js&&&/script&
& & &script&
& && &&&var myChart = echarts.init(document.getElementById('main'));
& && &&&myChart.setOption( JSON.parse( external.getOption() ) );
& & &/script&
winform.show(); //显示窗体
//启动消息循环
win.loopMessage();
主题帖子积分
webkit使用Font Awesome图标字体
import win.
var winform = win.form(text=&图标字体演示 - 注意字体从服务器下载需要一点时间&;right=759;bottom=469)
import web.kit.
var wb = web.kit.form( winform );
wb.go(&http://download.aardio.com/v10.files/demo/font-awesome/test.html&)
winform.show();
win.loopMessage();
1、wke内核使用SVG字体，如果遇到不能正常显示的图标字体，可尝试用FontForge打开重新生成一次即可。
2、字体是禁止跨域链接的，不要链接不同域名下的字体。
另外，使用 import win.fontAwesome 加载的字体也可以直接支持webkit（在CSS里可以直接使用该字体）
主题帖子积分
如何加载资源文件中的HTML文件
1、可以使用嵌入Web服务器wsock.tcp.simpleHttpServer，这个支持加载资源文件生成网页 ，关键代码演示：
import wsock.tcp.simpleHttpS
wbKitView.go( wsock.tcp.simpleHttpServer.startUrl(&/html/main.aardio&) );
2、使用web.kit以前调用&&import web.kit.fileSystem 就可以支持从资源文件了（可嵌入HTML,CSS,JS,SWF等文件），举个例子：
import win.
var winform = win.form(text=&webkit支持嵌入资源&;right=770;bottom=485;border=&none&;mode=&popup&)
winform.add(
button={cls=&button&;text=&button&;left=308;top=225;right=598;bottom=381;z=1}
import web.kit.
import web.kit.fileS//支持嵌入资源
//创建webkit浏览器窗口
var webkit = web.kit.form(winform);
webkit.go(&\html\main.html&);
winform.show();
win.loopMessage();
3、使用web.kit以前调用&&import web.kit.portable 可以生成独立文件，这个库已经包含了 web.kit.fileSystem ，并且可以把webkit用到的DLL组件也放到EXE文件中，生成独立的EXE文件。
主题帖子积分
WebKit调用VLC播放器控件播放视频
注意要升级web.kit扩展库，示例代码：
import win.
var winform = win.form(text=&WebKit播放视频测试(VLC控件)&;right=759;bottom=469)
import web.kit.
var wb = web.kit.form( winform&&);
wb.html = /**
&object type='application/x-vlc-plugin' id='vlc' events='True' width=&100%& height=&100%&&
& & &param name='mrl' value='rtmp://live.hkstv.hk.lxdns.com/live/hks' /&
& & &param name='volume' value='50' /&
& & &param name='autoplay' value='true' /&
& & &param name='loop' value='false' /&
& & &param name='fullscreen' value='false' /&
winform.show()
win.loopMessage();
实际上vlc网页插件还是包装libvlc，所以可以自带libvlc就不用写注册表什么的，例子：
import win.
var winform = win.form(text=&WebKit播放视频测试(VLC控件)&;right=759;bottom=469)
import web.kit.
var wb = web.kit.form( winform&&);
wb.html = /**
&object type='application/x-vlc-plugin' id='vlc' events='True' width=&100%& height=&100%&&
& & &param name='mrl' value='rtmp://live.hkstv.hk.lxdns.com/live/hks' /&
& & &param name='volume' value='50' /&
& & &param name='autoplay' value='true' /&
& & &param name='loop' value='false' /&
& & &param name='fullscreen' value='false' /&
winform.show()
win.loopMessage();
自带libvlc需要在plugins目录下放npvlc.dll，这个我已经在新的web.kit扩展库里放好了。
另外libvlc要自己下载解码器， ，不然vlc控件会崩溃。
主题帖子积分
{:3_59:}{:3_59:}{:3_59:}教程真不错。
教程真不错。
主题帖子积分
新手入门, 积分 16, 距离下一级还需 34 积分
新手入门, 积分 16, 距离下一级还需 34 积分
不错哦，多种方式选择。
不错哦，多种方式选择。
主题帖子积分
三级会员, 积分 935, 距离下一级还需 65 积分
三级会员, 积分 935, 距离下一级还需 65 积分
学习了。谢谢！
学习了。谢谢！
有眼界才有境界，有实力才有魅力，有思路才有出路！
使用20%的努力，带动80%的资源，创造100%的成功！
主题帖子积分
一级会员, 积分 56, 距离下一级还需 144 积分
一级会员, 积分 56, 距离下一级还需 144 积分
主题帖子积分
二级会员, 积分 203, 距离下一级还需 297 积分
二级会员, 积分 203, 距离下一级还需 297 积分
不多说，支持
不多说，支持
主题帖子积分
新手入门, 积分 10, 距离下一级还需 40 积分
新手入门, 积分 10, 距离下一级还需 40 积分
6.web.kit 支持aardio嵌入资源文件。。。
这一节，怎么嵌入呀？例子好像不全吧，新手求全码
6.web.kit 支持aardio嵌入资源文件。。。&&这一节，怎么嵌入呀？例子好像不全吧，新手求全码
主题帖子积分
一级会员, 积分 76, 距离下一级还需 124 积分
一级会员, 积分 76, 距离下一级还需 124 积分
老大的这段代码够我学习好久
老大的这段代码够我学习好久
主题帖子积分
新手入门, 积分 21, 距离下一级还需 29 积分
新手入门, 积分 21, 距离下一级还需 29 积分
这条腿够我玩好久
这条腿够我玩好久
主题帖子积分
一级会员, 积分 64, 距离下一级还需 136 积分
一级会员, 积分 64, 距离下一级还需 136 积分
[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=68036&ptid=12574][c
5.1、 如何使用插件
web.kit会在EXE目录下加载plugins目录下的插件，并且在注册表中自动搜索HKCU\Software ...
请问怎么设置代理IP的用户名和密码呢？？
Powered by