|
今天先看一下百度統(tǒng)計公布的最新桌面操作系統(tǒng)市場份額： Win 10 市場份額 48%，一年增加 10% Win7 市場份額 34%，一年下降 9%，快要涼了 Win8 市場份額 5%，已經(jīng)涼涼了 macOS 市場份額 4% WinXP 市場份額 2% 已經(jīng)徹底涼了 Linux 市場份額 1% 市場份額低于 5% 的我們就先不管了，現(xiàn)在開發(fā)桌面軟件一般考慮 Win10 以及正在崛起的 Win11 就夠了，Win7 短時間內(nèi)可以考慮做一下兼容。 雖然 Win11 已經(jīng)自帶了誘人的 WebView2 ，并且 WebView2也支持 Win7, Win10。但這東西就像飛機(jī)，飛起來是很爽，也沒必要搞一點(diǎn)小東西就開飛機(jī)去搞。 Windows 自帶的 IE 控件也是很不錯的，所有系統(tǒng)都自帶，簡單輕量好用，雖然新的操作系統(tǒng)已經(jīng)移除 IE 瀏覽器，但是微軟已聲明新系統(tǒng)不會移除 IE 控件。 Win10，Win11 自帶的 IE控件版本都是 IE11，Win7 自帶的 IE 最低是 IE8，但 Win7 會通過自動更新升級到 IE11，所以基于 IE控件只要考慮 IE11就可以了。 兼容到 Win7 / IE8 也是一個可選項，像jQuery/DataTables 支持到 XP/IE6 - 說實(shí)話在目前已經(jīng)沒有太大意義了。 aardio 中的 web.form 就是對 IE控件的封裝。使用 web.form 非常簡單，來個例子： import win.ui;/*DSG{{*/var winform = win.form(text='web.form 測試')winform.add(button={cls='button';text='調(diào)用網(wǎng)頁對象';left=214;top=227;right=518;bottom=305;z=1})/*}}*/
import web.form;var wb = web.form(winform);
wb.external = { clickButton = function(){ winform.msgbox('在網(wǎng)頁里調(diào)用了 aardio 函數(shù)') }}
wb.html = /** <head><meta charset='utf-8'> </head><body><button onclick='javascript:external.clickButton()' id='button'> 來個按鈕調(diào)用 aardio 函數(shù)：external.clickButton()</button>**/
winform.button.oncommand = function(id,event){ wb.getEle('button').click()}
winform.show();win.loopMessage();
上面就是一個完整的程序了，按 F5 運(yùn)行，運(yùn)行效果：
aardio 與網(wǎng)頁的交互非常簡單，網(wǎng)頁里可以直接調(diào)用 wb.external 里定義的 aardio 函數(shù)，在 aardio 里也可以直接訪問網(wǎng)頁里的對象，在 web.form 里網(wǎng)頁里的對象就是 COM 對象 —— 在 aardio 里可以直接使用。
注意 HTML 源碼不是一定要寫在 wb.html 這個字符串里，也可以用 wb.go('/res/index.html') 這樣的代碼直接打開資源目錄下的網(wǎng)頁，資源目錄在發(fā)布后可以嵌入 EXE， web.form 不用修改任何代碼 —— 直接就可以支持資源目錄下的網(wǎng)頁。如果要更高級一些，可以用 wsock.tcp.simpleHttpServer 或 wsock.tcp.asynHttpServer 創(chuàng)建嵌入式 HTTP 服務(wù)端打開資源目錄下的網(wǎng)頁，代碼都非常簡單，請參考相關(guān)范例。
我們來個復(fù)雜一點(diǎn)的，找個開源組件來試試，上次演示過 DataTables 了，這次我們換一個強(qiáng)大的下拉搜索框組件 Select2 （支持 Win7 / IE8 內(nèi)核），先看運(yùn)行效果：
注意 web.form 可以綁定任何控件窗口，上面的界面中只有左側(cè)是網(wǎng)頁，右側(cè)是普通 edit 控件。打開新版「 aardio 范例 / Web界面 / web.form /jQuery /Select2 」也可以查看下面的源碼：
import win.ui;/*DSG{{*/var winform = win.form(text='Select2';bgcolor=16777215)winform.add(edit={cls='edit';left=442;top=13;right=739;bottom=453;db=1;dr=1;dt=1;edge=1;multiline=1;z=2};static={cls='static';text='Static';left=6;top=7;right=371;bottom=459;clip=1;db=1;dl=1;dt=1;transparent=1;z=1})/*}}*/
import web.form;var wb = web.form(winform.static);
import web.json;wb.external={ getData = function(){ var data = { { 'id': 1, 'text': 'aardio', 'selected': true }, { 'id': 2, 'text': 'Delphi' }, { 'id': 3, 'text': 'Python', 'disabled': true } } return web.json.stringifyArray(data); } onSelect2Change = function(value){ winform.edit.print('選擇了',value); } }
wb.html = /**<head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <script src='http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js'></script> <script src='http://lib./select2/3.5.3/select2.min.js'></script> <link href='https://lib./select2/3.5.3/select2.min.css' rel='stylesheet' /> </head><body> <input type='text' id='example' style='width:100%;' > <script> $(document).ready(function() { $('#example').select2({ placeholder: '請選擇', 'data': eval( external.getData() ) //調(diào)用 aardio 函數(shù)獲取數(shù)據(jù) }); $('#example').on('change.select2', function (e) { //響應(yīng)事件并調(diào)用 aardio 函數(shù) external.onSelect2Change(e.val); });
});</script></body>**/
winform.show();win.loopMessage();
|
