搜索
查看: 11969|回复: 27

教程:使用web.blink (miniblink) 嵌入浏览器控件

  [复制链接]

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
发表于 2017-12-8 16:20:19 | 显示全部楼层 |阅读模式
miniblink使用新版chromium内核,并且精简了体积,兼容WKE( WebKit )组件的接口。
aardio中提供了基于WKE( WebKit )的web.kit 扩展库,也提供了基于miniblink的web.blink扩展库。
这两个扩展库基本的用法是一样的( 因为接口基本一样 ),请参考教程:使用webkit开发桌面软件

import win.ui;
/*DSG{{*/
var winform = win.form(text="创建miniblink控件";right=1123;bottom=570)
/*}}*/

//导入miniblink扩展库
import web.blink.form;  

//创建miniblink控件
var mb = web.blink.form(winform);

//使用浏览器打开网页
mb.go("http://www.so.com")

//打开网页调试工具( 在网页右键菜单里点击“检查”切换节点 )
mb.showDevTools()

//显示窗口
winform.show();

//启动界面线程消息循环
win.loopMessage();
winform是当前创建的窗体对象。
web.blink.form(winform) 就相当于给winform穿了一件神奇的超级外衣 - 使之变为超级组件。
web.blink.form(winform) 返回的新对象 mb 就是我们所需要的浏览器对象了。

我们现在演示的是用winform作为容器来加载miniblink,
我们也可以用winform上其他的控件窗口来加载miniblink,
例如,我们首先在窗体上拖上去一个custom控件:

miniblink.gif

为了让控件可以自适应窗口 - 自动缩放大小,
我们可以再设置一下控件四个方向都固定外边距(控件外部边距),操作如下图:

miniblink2.gif

然后我们再把前面源代码中的以下代码:
//创建miniblink控件
var mb = web.blink.form(winform);

更改如下:

miniblink3.gif

实际上这种用法是最多的,
嵌入浏览器控件更适合用在界面上展示那部分最适合用网页来呈现的内容。

但是我在写教程时,都直接用winform来创建浏览器控件,省几句代码。
实际开发时,建议使用上面的方法嵌入控件,当然,如果你要整个窗口用浏览器来呈现,这也是可以的。

回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
 楼主| 发表于 2017-12-8 16:38:07 | 显示全部楼层

使用miniblink调用网页上的对象、函数

使用miniblink,我们可以非常方面的调用网页上的对象、函数,
这一部分没有任何难度,在JS里你怎么写代码,在 aardio里也基本差不多,
aardio的语法与JS又很像,会点JS的话这部分你一看就明白:
import win.ui;
/*DSG{{*/
var winform = win.form(text="使用miniblink调用网页上的对象、函数";right=848;bottom=585)
winform.add()
/*}}*/

//导入miniblink支持库
import web.blink.form;

//创建浏览器控件
var mb = web.blink.form(winform)

//打开网页
mb.go("http://www.so.com")

//显示窗口
winform.show();

//一定要记住调用下面的代码等待页面完全打开
mb.wait();

/*
调用js的querySelector函数搜索节点,
并且改变节点的value属性(控件的值)
*/

mb.querySelector(
"#input").value = "aardio miniblink";

/*
调用js的querySelector函数搜索节点,
并且调用click函数模拟点击按钮。
*/

mb.querySelector(
"#search-button").click();

/*
等待网页打开,
参数可以指定期待的网址(或者网址的一部分)
*/

mb.wait(
"&q=aardio");

win.loopMessage();

上面的一个关键代码是调用 mb.wait() 函数等待网页完全打开,
因为你不等待网页打开,后面的代码搜索节点就可能失败(因为这时候网页可能还正在下载中)
mb.wait()的参数里还可以指定要等待的网址(可以是网址的一部分字符串)

运行一下,看看效果如何:

miniblink4.gif


简简单单几句代码我们就可以非常方便的控制网页。
回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
 楼主| 发表于 2017-12-8 16:48:03 | 显示全部楼层

在miniblink中通过aardio调用、执行js脚本

前面我们已经演示了aardio如何调用网页上的对象和函数,
实际上也就是调用JS中的对象和函数,所以我们已经知道了在aardio中可以直接调用JS。

再来个更简单的例子:
import win.ui;
/*DSG{{*/
var winform = win.form(text="调用JS函数";right=848;bottom=585)
/*}}*/

//导入miniblink支持库
import web.blink.form;

//创建浏览器控件
var mb = web.blink.form(winform);

//调用JS函数
mb.window.alert("调用JS的alert函数");

//调用document对象的函数
mb.document.write("调用JS函数写点HTML");

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

除了调用JS函数以外,
我们还可以调用 mb.doScript() 函数直接执行JS代码,
示例如下:
import win.ui;
/*DSG{{*/
var winform = win.form(text="调用JS函数";right=848;bottom=585)
/*}}*/

//导入miniblink支持库
import web.blink.form;

//创建浏览器控件
var mb = web.blink.form(winform);

//执行JS代码
mb.doScript(`
    alert('JS弹出的对话框');
    document.write('JS写入的HTML')
`
)

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

我们还可以使用 mb.eval() 计算一个JS表达式的值,例如:
var n = mb.eval("123")

回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
 楼主| 发表于 2017-12-8 16:54:26 | 显示全部楼层

在miniblink中使用js脚本调用aardio函数

很简单,直接看示例:
import win.ui;
/*DSG{{*/
var winform = win.form(text="miniblink - js调用aardio函数";right=1123;bottom=570)
/*}}*/

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

/*
只要写到 mb.external里面的本地函数在JS中都可以直接调用。
*/

mb.external = {

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

//使用mb.html可以直接往浏览器里写HTML代码
mb.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("你好,我是miniblink");
    '>调用aardio函数external.aardioCall()</a>
**/


winform.show()
win.loopMessage();

也可以用 web.blink.jsBindFunction直接注册JS可以调用的本地函数,示例如下:
import win.ui;
/*DSG{{*/
var winform = win.form(text="miniblink - 注册JS函数";right=1123;bottom=570)
/*}}*/

import web.blink.form;
var mb = web.blink.form(winform);

//注册JS函数
web.blink.jsBindFunction("aardioMsgbox",1/*JS回调时的参数个数*/,function(str){
   
var mb = owner; //owner是当前调用此函数的miniblink视图对象
    var winform = mb.getForm(); //这是显示网页视图的win.form窗体对象
    if( winform ) winform.msgbox(str);
})

mb.html =
/**  
    <a href='javascript:aardioMsgbox("你好,我是miniblink");
    '>调用本地函数aardioMsgbox()</a>
**/


winform.show()
win.loopMessage();

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

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

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

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

winform.show()
win.loopMessage();


回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
 楼主| 发表于 2017-12-19 14:16:44 | 显示全部楼层

web.blink - 网页截图

liqwei 发表于 2017-12-19 11:39
请问,如何实现,网页加载完毕后,对当前视图进行截图,并保存?

import win.ui;
/*DSG{{*/
var winform = win.form(text="miniblink截图,正在等待页面完全打开....";right=1123;bottom=570)
/*}}*/

import web.blink.form;  
var mb = web.blink.form(winform);//创建miniblink控件
winform.show();

//使用浏览器打开网页
mb.go("http://www.sohu.com")
mb.wait();
//等待页面打开

//创建GDI+位图
import gdip.bitmap;
var bmp = gdip.bitmap( mb.document.body.scrollWidth,mb.document.body.scrollHeight );

//获取位图DC
var hdc  = bmp.graphics.getDc();
mb.print(hdc,1);
//网页截图

//释放位图DC
bmp.graphics.releaseDc(hdc);

//保存图片到文件
bmp.save("/page.jpg",80);

import process;
process.execute(
"/page.jpg");

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

回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
 楼主| 发表于 2018-2-12 16:52:26 | 显示全部楼层

web.blink操作JS对象和数组


import win.ui;
/*DSG{{*/
var winform = win.form(text="web.blink操作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.blink.form;  
var wb = web.blink.form(winform);

//使用external接口定义网页脚本可调用的本地函数
wb.external = {  
    aardioCall =
function(jsObject){

        winform.edit.print(
"-----------------遍历JS对象的所有成员-----------------------");
        
for name,value in table.eachName(jsObject){
            winform.edit.print(
"对象",name,value);
        }
        
        winform.edit.print(
"-----------------遍历JS数组的所有成员-----------------------");
        
for i,v in table.eachIndex(jsObject.array){
            winform.edit.print(
"数组",i,v);
        
        }
        
        winform.edit.print(
"-----------------直接转换为普通的对象-----------------------");
        
var obj = web.json.strip(jsObject);
        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],
        buffer:new ArrayBuffer(3)
    }); '>调用aardio函数external.aardioCall()操作JS对象、数组</a>
**/


winform.edit.orphanWindow();

winform.show()
win.loopMessage();

回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
 楼主| 发表于 2017-12-8 17:09:33 | 显示全部楼层

使用miniblink如何生成独立EXE文件

经常有人过来问类似的问题,其实并不需要所有的软件一定要生成个独立的EXE。
我们桌面上的大部分软件,基本都不是独立的EXE文件,如果你的软件有多个文件,建议可以做个安装程序,用aardio就可以做安装程序,而且可以做出很漂亮的安装程序,aardio带了7z解压的库,而7z支持在EXE文件尾部直接写压缩文件,这就让我们写自安装程序非常简单了,更重要的是aardio操作文件系统、注册表都非常方便。所以与其去追求独立的EXE文件,不如写个好的安装向导更加有气场一些。

在aardio中使用miniblink如果需要生成独立EXE文件,那么请在导入web.blink 扩展库以前加上下面的代码:
import web.blink.portable
就可以生成独立的EXE文件了( 这个库是把miniblink在运行时释放到appdata目录然后再加载,并且调用了 web.blink.fileSystem 从EXE资源文件中加载网页 )。

如果你需要把网页调试工具(DevTools)也打包到EXE中,也很简单:
1、同样需要先 import web.blink.portable,
2、然后把网页调试工具需要用到的界面文件从 ~\lib\web\blink\.build\front_end 复制到你的工程中(并设置为工程嵌入资源),例如 "/res/front_end" ,
3、然后你打开调试工具的代码改为 mb.showDevTools("/res/front_end" )

其实 web.blink.portable 是使用  web.blink.fileSystem 从EXE资源文件中加载网页,
我们知道如果创建一个aardio工程,我们可以在工程下面创建资源目录,这些资源目录发布成EXE以后可以嵌入到EXE文件内。下面我们详述两种从资源加载网页的方法( 当然你也可以用一句  import web.blink.portable 就实现这个功能,下面主要讲原理 ):

方法一、使用 web.blink.fileSystem 从资源文件加载网页

使用web.blink以前调用  import web.blink.fileSystem 就可以支持从资源文件加载网页了,可嵌入HTML,CSS,JS,SWF等文件,举个例子:

import win.ui;
/*DSG{{*/
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.blink.form;
import web.blink.fileSystem;//支持嵌入资源

//创建webkit浏览器窗口
var webkit = web.blink.form(winform);
webkit.go(
"\html\main.html");

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


方法二、使用wsock.tcp.simpleHttpServer 从资源文件加载网页

wsock.tcp.simpleHttpServer可以用一句代码就可以创建一个微型的嵌入式HTTP服务器,而且wsock.tcp.simpleHttpServer可以支持aardio的EXE资源文件,并且这还可以带给我们一个额外的好处,我们可以使用 wsock.tcp.simpleHttpServer提供的aardio模板语法,使用aardio代码编写动态网页(就像用aardio写网站)

首先我们在aardio工程的res目录下添加 "/res/main.aardio" 文件,
里面写上HTML代码(或者aardio代码),然后我们可以使用下面的代码获取网址:
wsock.tcp.simpleHttpServer.startUrl("/res/main.aardio")

这个函数可以被调用任意多次,他不会重复的创建HTTP服务端,而且他会保证使用一个空闲的端口(不与其他软件冲突)

下面是演示代码:
import win.ui;
/*DSG{{*/
mainForm = win.form(text=
"使用miniblink打开资源文件";right=759;bottom=469;mode="popup")
/*}}*/

import web.blink.form;
var mb = web.blink.form(mainForm);

import wsock.tcp.simpleHttpServer;
mb.go( wsock.tcp.simpleHttpServer.startUrl(
"/res/main.aardio") );

mainForm.show();
win.loopMessage();

这里我就不上传工程了,再给个可以直接看效果的示例:

import win.ui;
/*DSG{{*/
mainForm = win.form(text=
"使用miniblink打开资源文件";right=759;bottom=469;mode="popup")
/*}}*/

import web.blink.form;
var mb = web.blink.form(mainForm);

import wsock.tcp.simpleHttpServer;
var url =wsock.tcp.simpleHttpServer.startUrl(
   
function(response,request){  
        response.write( request.url  )
    }
)

var url = wsock.tcp.simpleHttpServer.startUrl("/res/main.aardio");
mb.go( url );

mainForm.show();
win.loopMessage();

上面这段代码我就不多解释了,大家可以自己动手试一下就明白了。


回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
 楼主| 发表于 2017-12-8 17:26:45 | 显示全部楼层

使用miniblink调用echarts

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio echarts";right=909;bottom=669;border="dialog frame";max=false;min=false)
/*}}*/

import web.blink.form;
var mb = web.blink.form( winform );

import web.json;
mb.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);
    }
}

mb.html =
/**
<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">  
</head>
<body>
    <div id="main" style="height:600px;"></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>
</body>
</html>
**/

winform.show();
//显示窗体

//启动消息循环
win.loopMessage();


回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
 楼主| 发表于 2017-12-8 17:32:38 | 显示全部楼层

自定义浏览器事件回调函数

下面演示miniblink部分事件回调的用法,
更多的事件回调请在aardio中打开web.blink.callback 这个库了解细节。
import win.ui;
/*DSG{{*/
var winform = win.form(text="miniblink浏览器事件回调";right=848;bottom=585)
winform.add(
custom={cls=
"custom";text="custom";left=26;top=16;right=823;bottom=436;db=1;dl=1;dr=1;dt=1;z=1};
edit={cls=
"edit";left=26;top=467;right=825;bottom=567;db=1;dl=1;dr=1;edge=1;multiline=1;z=2}
)
/*}}*/

import web.blink.form;
var mb = web.blink.form(winform.custom)

mb.onUrlChanged =
function(url){
    winform.edit.print(
"网址已变更",url);
}

mb.onTitleChanged =
function(title){
    winform.edit.print(
"标题已变更",title);  
}

mb.onDocumentReady =
function(isMainFrame){
    winform.edit.print(
"文档已下载完成并准备就绪",url);     
}

//打开连接的时候触发
mb.onNavigation = function(url,navigationType){
   
if( navigationType == 0/*_WKE_NAVIGATION_TYPE_LINKCLICK*/ ){
        winform.edit.print(
"点击了连接",url)
    }
   
return true;//允许网址被打开
}

//定义了这个回调就不会再弹出默认的alert对话框了
mb.onAlertBox = function(str){
         
   

}

import win.inputBox
mb.onPromptBox =
function(title, default){
   
var box = win.inputBox(winform);
    box.text = title;
    box.input.text = default;
   
return box.doModal();
};

mb.go(
"http://wwww.baidu.com")
winform.show();

win.loopMessage();

回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
 楼主| 发表于 2017-12-8 17:45:55 | 显示全部楼层

拦截、修改、并自定义HTTP请求

这是miniblink非常有趣的一个功能,其他浏览器控件实现起来可能非常的麻烦。
miniblink提供了几个事件回调,让我们可以拦截、修改、自定义HTTP请求,或者修改服务器返回的数据。
import win.ui;
/*DSG{{*/
var winform = win.form(text="miniblink拦截、修改、并自定义HTTP请求";right=848;bottom=585)
winform.add(
custom={cls=
"custom";text="custom";left=26;top=16;right=823;bottom=436;db=1;dl=1;dr=1;dt=1;z=1};
edit={cls=
"edit";left=26;top=467;right=825;bottom=567;db=1;dl=1;dr=1;edge=1;multiline=1;z=2}
)
/*}}*/

import web.blink.form;
var mb = web.blink.form(winform.custom)

/*
这个事件在miniblink发起请求以前被触发,
同时miniblink提供了一些函数让我们可以自定义请求。
*/

mb.onRequestBegin =
function(hRequest,url){
   
if (url== "http://tieba.baidu.com/") {
        
/*
        这是第一个自定义请求的方法:
        通过 mb.requestSetData() 函数直接写自定义的响应数据。
        使用 mb.requestSetUrl(hRequest, url) 直接设置页面的网址。
        使用 mb.requestSetMimeType()直接设置文件的MIME类型。
        */

        mb.requestSetMimeType(hRequest,
"text/html");
        mb.requestSetUrl(hRequest, url);
        mb.requestSetData(hRequest,
'<a href="javascript:void(0)"  
            onclick="javascript:history.back(-1);">点这里后退到上一页</a>'
)
        
return true;//然后使用 return true;阻止默认的请求
    }
   
elseif (url== "http://map.baidu.com/") {
        
/*
        miniblink提供了另外一种自定义请求的方法:
        
        不阻止默认的请求,
        但是调用 mb.hookOnRequestEnd(hRequest);
        请求在服务器返回数据后触发 onRequestEnd事件,
        让我们得到一个修改服务器返回的内存数据的机会。
        */

        mb.hookOnRequestEnd(hRequest);
    }   
}

mb.onRequestEnd =
function(hRequest,url,responseDataPtr,size){
   
/*
    hRequest表示请求句柄,
    也就是之前调用 mb.hookOnRequestEnd(hRequest) 设置的hRequest参数。
   
    在这里可以直接修改responseDataPtr指向的内存值(不用返回值)
    也可以直接返回一个字符串(或buffer)来修改服务器返回的数据。
    */

   
return '<a href="javascript:void(0)"  
        onclick="javascript:history.back(-1);">点这里后退到上一页</a>'

}


mb.go(
"http://wwww.baidu.com")
winform.show();

win.loopMessage();

回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
 楼主| 发表于 2017-12-8 17:50:14 | 显示全部楼层

加载插件的例子

miniblink里带了flash,vlc插件,
flash插件大家都会用就不举例了,下面是加载vlc插件播放视频的演示:
import win.ui;
/*DSG{{*/
var winform = win.form(text="miniblink播放视频测试(VLC控件)";right=1008;bottom=616)
winform.add()
/*}}*/

import libvlc;
import web.blink.form;
var mb = web.blink.form( winform  );

mb.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' />
</object>

**/


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的详细介绍请参考:使用标准库: win.flashBox 创建Flash透明窗口
而且普通控件也可以使用aardio中的orphanWindow非常方便的浮动透明、显示透明flash控件这些,详细的请参考:系列教程:使用plus控件制作精美界面,所以仅仅是让透明flash控件显示在网页上面,这在aardio中是非常简单的。

web.blink 也支持这种不规则的透明分层窗口,这里用来显示透明flash动画只是举个例子,
透明窗口上具体显示些什么,当然不用FLASH用HTML也可以,下面我们先上效果图:


再来看看完整的源码( 注意在小企鹅上面点一下会关闭示例 ):
import win.ui;
/*DSG{{*/
var winform = win.form(text="miniblink浏览器简单示例";right=1123;bottom=570;border="none";mode="popup")
/*}}*/

import web.blink.layeredWindow;
var mb = web.blink.layeredWindow(winform);//创建透明分层窗口

mb.html =
/**
<!doctype html>
<html>
<body>
    <object width="500" height="500" type="application/x-shockwave-flash" data="http://img.pet.qq.com/xuanflash/1024900151.swf">
        <param name="movie" value="http://img.pet.qq.com/xuanflash/1024900151.swf">
        <param name="wmode" value="Transparent">
        <param name="quality" value="high" />
    </object>
</body>
</html>
**/


winform.wndproc =
function(hwnd,message,wParam,lParam){
   
if( message == 0x201/*_WM_LBUTTONDOWN*/ )
        winform.close();
}

winform.show()
win.loopMessage();

回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
 楼主| 发表于 2017-12-8 18:00:59 | 显示全部楼层

在miniblink中使用aardio直接调用jQuery

刚才修改 web.blink,新鲜添加了jQuery函数,以及loadScript函数。
下面看示例,注意这个例子在web.kit,web.form中的写法基本是一模一样的,我们尽可能的封装不同的组件提供相似的接口,降低大家掌握新组件的学习成本。
import win.ui;
/*DSG{{*/
var winform = win.form(text="miniblink - jQuery 测试";right=461;bottom=289;)
/*}}*/

//创建miniblink窗体
import web.blink.form;
var mb = web.blink.form(winform)

mb.html =
/**
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="idTest2" class="style2">
    测试文本
    </div>
   
    <div id="idTest" class="style2">
    测试文本
    </div>
</body>
</html>
**/
  
winform.show();

//获取文本
winform.msgbox( mb.jQuery("#idTest").text() )

//这样可以获取原始DOM对象
var ele = mb.jQuery("#idTest")[0]
//winform.msgbox( ele.innerHTML )

//根据节点ID查询节点,使用text() 函数修改文本
mb.jQuery("#idTest").html("Query有意思的是可以使用CSS的语法匹配一个节点的集合
并将他们封装为一个组合,操作组合里所有对象一如操作一个对象,由jQuery自动完成循环操作
<a href='http://www.w3school.com.cn/jquery/' target='_blank'>打开 jQuery教程</a>"
)

//根据CSS类名查询节点,使用css() 函数修改样式
mb.jQuery(".style2").css("font-size","10.5pt")

//根据CSS标签名查询节点,使用css() 函数修改样式
mb.jQuery("div#idTest2").css("color","red")

winform.msgbox(
"点确定隐藏指定节点" );
mb.jQuery(
"div#idTest2").fadeOut( "slow" );

//在Javascript中调用jQuery
var js = /**
    $("div#idTest").click(
        function(){
            $("div#idTest2").html("<a href='http://www.w3school.com.cn/jquery/' target='_blank'>打开 jQuery教程</a>")
            $("div#idTest2").fadeIn( "slow" );
        }
    )   
**/

mb.doScript(js)
winform.text =
"点击文字试试"

//进入消息循环
win.loopMessage();


本教程已完成。
其他功能请打开aardio中的《库函数文档》进一步了解。

相关帖子:
《教程:使用WebKit开发桌面软件》
http://bbs.aardio.com/forum.php?mod=viewthread&tid=12574
这两个库的接口基本一样(少数的功能有区别)。

《web.kit / web.blink 调用layui》
http://bbs.aardio.com/forum.php?mod=viewthread&tid=13659


回复

使用道具 举报

7

主题

51

帖子

409

积分

培训班

积分
409
发表于 2017-12-8 18:17:01 | 显示全部楼层
谢谢Jacen提供教程
回复

使用道具 举报

0

主题

2

帖子

20

积分

新手入门

Rank: 1

积分
20
发表于 2017-12-19 11:39:13 | 显示全部楼层
请问,如何实现,网页加载完毕后,对当前视图进行截图,并保存?
回复

使用道具 举报

3

主题

8

帖子

48

积分

新手入门

Rank: 1

积分
48
发表于 2018-1-27 11:25:16 | 显示全部楼层
mb.querySelector("#input").value = "aardio miniblink";

除了用id值来取,是否还可以用其它值来取?我用
mb.querySelector("q").value = "aardio miniblink";  //探针里面用getele("q")是可以的。
mb.querySelector("name=q").value = "aardio miniblink";
都不行。

也查过函数库web---->blink---view里面的queryselector函数,也看过view.arrdio,可能是功力不够,没看出个所以然。

用网页探针看了:
/** <INPUT id=input class=placeholder value=asdf2w type=text name=q autocomplete="off" suggestWidth="540px" jQuery18303073756374654511="18"> **/
var ele = wb.getEle("input")  
ele.value = "asdf2w"
import win.util.tray;//导入汽球提示支持库
win.util.tray(winform).pop( ele.value || ele.innerHTML || ele.outerHTML ) //看看节点取的是否正确
回复

使用道具 举报

2

主题

57

帖子

1433

积分

新手入门

积分
1433
发表于 2018-1-27 12:25:00 | 显示全部楼层
Walter2046 发表于 2018-1-27 11:25
mb.querySelector("#input").value = "aardio miniblink";

除了用id值来取,是否还可以用其它值来取?我 ...

智能提示不是告诉你了吗?参数是一个CSS选择器,地球人现在用的浏览器都支持,用法完全一致,建议你去下个手册看一下
name是属性,要使用中括号[]括起来
mb.querySelector("[name=q]").value = 'aardio大法好!'

回复

使用道具 举报

15

主题

56

帖子

340

积分

二级会员

Rank: 3Rank: 3

积分
340
发表于 2018-3-15 17:16:03 | 显示全部楼层
之前有使用一款收银软件,按F12,可以把调试控制台打开,控制台的名称是 DevTools,看安装目录位置,没找着这个相应的文件,估计是封装了。想请问一下,有什么办法可以实现集成 chrome的控制台么?谢谢哈。

点评

mb.showDevTools() 打开网页***  发表于 2018-3-16 22:18
回复

使用道具 举报

15

主题

56

帖子

340

积分

二级会员

Rank: 3Rank: 3

积分
340
发表于 2018-3-16 21:10:28 | 显示全部楼层
本帖最后由 yootou 于 2018-3-16 21:21 编辑

之前用web.kit的时候,在js里边调用aardio定义的key模拟按键。可以正常使用,今天换成web.blink, key.press无反应了。在key.press执行前加一个 win.msgbox,模拟按键又有效果。。

import win.ui;
import web.blink.form;
import key;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469;parent=...)
winform.add()
/*}}*/


var webkit = web.blink.form(winform);
webkit.external = {
    key = function(char){
        win.msgbox(char);
                key.press(char);   
    };
}
webkit.go("/assets/html/blink.html");

winform.enableDpiScaling();
winform.show();

win.loopMessage();
return winform;


网页代码:
<html>
<head>
</head>

<body>
<input id="keyword" />
<div onclick="winKey('2');">按键</div>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
function winKey(char){
        $("#keyword").focus();
        external.key(char);
}
</script>
</body>
</html>
回复

使用道具 举报

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13974
 楼主| 发表于 2018-3-16 22:17:56 | 显示全部楼层
yootou 发表于 2018-3-16 21:10
之前用web.kit的时候,在js里边调用aardio定义的key模拟按键。可以正常使用,今天换成web.blink, key.press ...

两个不同的浏览器内核当然会有些小的差异。
这种问题一看就是消息堵塞了,用win.setTimeout先退出当前回调再延迟调用一下就可以。

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
/*}}*/

import web.blink.form;
var mb = web.blink.form(winform);

import key;
mb.external = {
    key =
function(char){
        win.setTimeout(
            
function(){
                key.press(char);
            }
        )
    };
}

mb.html =
/**
<html>
<head>
</head>

<body>
<input id="keyword" />
<div onclick="winKey('2');">按键</div>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript">
function winKey(char){
        $("#keyword").focus();
        external.key(char);
}
</script>
</body>
</html>
**/


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




回复

使用道具 举报

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

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-12-14 01:48 , Processed in 0.109375 second(s), 29 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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