DSkin 的WebUI開發模式介紹，Html快速開發Winform的UI

新版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效果，是否是很簡單，方便！