打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
教程:使用web.blink (miniblink) 嵌入瀏覽器控件
Jacen.He
151
主題
2381
帖子
1萬
積分
管理員
積分
13089
發消息
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控件
var mb = web.blink.form(winform);
更改如下:
實際上這種用法是最多的,
嵌入瀏覽器控件更適合用在界面上展示那部分最適合用網頁來呈現的內容。
但是我在寫教程時,都直接用winform來創建瀏覽器控件,省幾句代碼。
實際開發時,建議使用上面的方法嵌入控件,當然,如果你要整個窗口用瀏覽器來呈現,這也是可以的。
分享到: 
QQ好友和群
收藏10
分享
頂1
回覆
Jacen.He
151
主題
2381
帖子
1萬
積分
管理員
積分
13089
發消息
來自 2#
 樓主|發表於 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()的參數里還可以指定要等待的網址(可以是網址的一部分字符串)
運行一下,看看效果如何:
簡簡單單幾句代碼我們就可以非常方便的控制網頁。
點評回覆
Jacen.He
151
主題
2381
帖子
1萬
積分
管理員
積分
13089
發消息
來自 3#
 樓主|發表於 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")
點評回覆
Jacen.He
151
主題
2381
帖子
1萬
積分
管理員
積分
13089
發消息
來自 4#
 樓主|發表於 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();
點評回覆
Jacen.He
151
主題
2381
帖子
1萬
積分
管理員
積分
13089
發消息
來自 5#
 樓主|發表於 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;
//創建miniblink控件
var mb = web.blink.form(winform);
//使用瀏覽器打開網頁
mb.go("http://www.so.com")
//等待頁面打開
mb.wait();
import gdip.bitmap;
//創建GDI+位圖
var bmp = gdip.bitmap( mb.getWidth(),mb.getHeight() );
//獲取位圖DC
var hdc  = bmp.graphics.getDc();
mb.print(hdc,1);//網頁截圖
//釋放位圖DC
bmp.graphics.releaseDc(hdc);
//保存圖片到文件
bmp.save("/page.jpg",80)
winform.show();
win.loopMessage();
點評回覆
Jacen.He
151
主題
2381
帖子
1萬
積分
管理員
積分
13089
發消息
來自 6#
 樓主|發表於 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(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();
點評回覆
Jacen.He
151
主題
2381
帖子
1萬
積分
管理員
積分
13089
發消息
7#
 樓主|發表於 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();
上面這段代碼我就不多解釋了,大家可以自己動手試一下就明白了。
點評回覆
Jacen.He
151
主題
2381
帖子
1萬
積分
管理員
積分
13089
發消息
8#
 樓主|發表於 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="//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();
點評回覆
Jacen.He
151
主題
2381
帖子
1萬
積分
管理員
積分
13089
發消息
9#
 樓主|發表於 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();
點評回覆
Jacen.He
151
主題
2381
帖子
1萬
積分
管理員
積分
13089
發消息
10#
 樓主|發表於 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();
點評回覆
Jacen.He
151
主題
2381
帖子
1萬
積分
管理員
積分
13089
發消息
11#
 樓主|發表於 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();
點評回覆
12#
 樓主|發表於 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
點評回覆
zhoubujin
7
主題
50
帖子
394
積分
培訓班
積分
394
發消息
13#
發表於 2017-12-8 18:17:01|只看該作者
謝謝校長提供教程
點評回覆
liqwei
0
主題
2
帖子
20
積分
新手入門
積分
20
發消息
14#
發表於 2017-12-19 11:39:13|只看該作者
請問,如何實現,網頁加載完畢後,對當前視圖進行截圖,並保存?
點評回覆
Walter2046
2
主題
8
帖子
45
積分
新手入門
積分
45
發消息
15#
發表於 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"> **/
var ele = wb.getEle("input")
ele.value = "asdf2w"
import win.util.tray;//導入汽球提示支持庫
win.util.tray(winform).pop( ele.value || ele.innerHTML || ele.outerHTML ) //看看節點取的是否正確
點評回覆
松江
1
主題
59
帖子
1414
積分
四級會員
積分
1414
發消息
16#
發表於 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大法好!'
點評回覆
yootou
14
主題
56
帖子
335
積分
二級會員
積分
335
發消息
17#
發表於 2018-3-15 17:16:03|只看該作者
之前有使用一款收銀軟件,按F12,可以把調試控制台打開,控制台的名稱是 DevTools,看安裝目錄位置,沒找著這個相應的文件,估計是封裝了。想請問一下,有什麼辦法可以實現集成 chrome的控制台麼?謝謝哈。
點評
Jacen.He
mb.showDevTools() 打開網頁*** 發表於 2018-3-16 22:18
點評回覆
yootou
14
主題
56
帖子
335
積分
二級會員
積分
335
發消息
18#
發表於 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>
點評回覆
Jacen.He
151
主題
2381
帖子
1萬
積分
管理員
積分
13089
發消息
19#
 樓主|發表於 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();
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
Miniblink 调用 Video.js 播放视频
新手教程:写一个资源管理器
使用webkit内核开发桌面软件界面
看看短短几句 aardio 代码能做什么
(自用)AAR里一些好玩的功能
AAuto快手自动登录之500W
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服