新版WebUI開發模式採用MiniBlink內核,這個內核功能更完善,dll壓縮之後才5M,而且提供開發者功能,內核還在更新中,而且是開源項目:https://github.com/weolar/miniblink49 如果是內核方面的問題可以到 http://miniblink.net/ 提問! ...
新版WebUI開發模式採用MiniBlink內核,這個內核功能更完善,dll壓縮之後才5M,而且提供開發者功能,內核還在更新中,而且是開源項目:https://github.com/weolar/miniblink49 如果是內核方面的問題可以到 http://miniblink.net/ 提問!
通過Html來開發UI可以利用海量的前端資源,然後配合C#優美的語法加無敵的VS來開發,簡直完美!
html和C#類對應,就像WPF或者WebForm那樣。
開始開發
新建X86的Winform項目,窗體繼承改成DSkin.Forms.MiniBlinkForm
期望大小乘以ZoomFactor,是為了適應DPI縮放;把app.manifest中的這段DPI代碼取消註釋
程式集里的資源Url寫法是res://開頭的
res://WebUIDemo/Views/index.html res://程式集名/若幹文件夾/文件名 區分大小寫
Html頁面和C#類綁定,頁面和類的名稱要一樣,Html在哪個文件夾無所謂,區分大小寫, 支持主頁面和框架頁面的綁定
類繼承 DSkin.Forms.MiniBlinkPage
C#屬性和頁面雙向綁定,依賴Vue,支持簡單屬性的雙向綁定,和集合的單向綁定,複雜屬性請用Json字元串
JS中也可以用Get(“屬性名”); Set(“屬性名”,值) 訪問和設置屬性值,可以不需要Vue
頁面設置一個綁定的全局ID,預設是page,如果想改成其他的,頁面和C#類需要一起改,在構造函數里設置。這個ID和Vue綁定ID是一致的!
頁面里的 {{Text}} 就是綁定到C#里定義的Text的屬性了
綁定操作寫好之後,Js中就可以操作這個Vue綁定對象了,對象名就是那個Id,預設為page
Js中的高級操作可以到Vue官網查看教程 https://cn.vuejs.org/v2/guide/
比如Js中調用 page.Text=’這麼牛逼!’; 這個值就會更新到C#類Text屬性和頁面
Js綁定C#方法,方法上面加JSFunction,方法參數只支持簡單的數據類型,數量和類型要和JS調用的對應
JS同步調用C#方法:參數對應,直接調用就是同步調用
JS非同步調用C#方法:前面參數對應,最後加個包含一個參數的回調函數
如果頁面里引用了JQuery,你還可以用C#封裝的JQuery調用,方便操作Dom元素
C#直接調用JS: InvokeJS("alert('test')");
最終的Demo效果,是不是很簡單,方便!