新版WebUI開發(fā)模式采用MiniBlink內(nèi)核，這個內(nèi)核功能更完善，dll壓縮之后才5M，而且提供開發(fā)者功能，內(nèi)核還在更新中，而且是開源項目：https://github.com/weolar/miniblink49  如果是內(nèi)核方面的問題可以到 http://miniblink.net/ 提問！

 

通過Html來開發(fā)UI可以利用海量的前端資源，然后配合C#優(yōu)美的語法加無敵的VS來開發(fā)，簡直完美！

html和C#類對應(yīng)，就像WPF或者WebForm那樣。

 

開始開發(fā)

 

新建X86的Winform項目，窗體繼承改成DSkin.Forms.MiniBlinkForm

 

 

期望大小乘以ZoomFactor，是為了適應(yīng)DPI縮放；把app.manifest中的這段DPI代碼取消注釋

 

 

程序集里的資源Url寫法是res://開頭的

res://WebUIDemo/Views/index.html  res://程序集名/若干文件夾/文件名   區(qū)分大小寫

 

 

 

Html頁面和C#類綁定，頁面和類的名稱要一樣，Html在哪個文件夾無所謂，區(qū)分大小寫， 支持主頁面和框架頁面的綁定

 

 

 

 

 

 

類繼承  DSkin.Forms.MiniBlinkPage

 

C#屬性和頁面雙向綁定，依賴Vue，支持簡單屬性的雙向綁定，和集合的單向綁定，復(fù)雜屬性請用Json字符串

 

JS中也可以用Get(“屬性名”)； Set(“屬性名”,值) 訪問和設(shè)置屬性值，可以不需要Vue 

 

 

 

 頁面設(shè)置一個綁定的全局ID，默認是page，如果想改成其他的，頁面和C#類需要一起改，在構(gòu)造函數(shù)里設(shè)置。這個ID和Vue綁定ID是一致的！

 

 

 

 

頁面里的 {{Text}} 就是綁定到C#里定義的Text的屬性了

 

綁定操作寫好之后，Js中就可以操作這個Vue綁定對象了，對象名就是那個Id，默認為page

Js中的高級操作可以到Vue官網(wǎng)查看教程 https://cn.vuejs.org/v2/guide/

 

比如Js中調(diào)用 page.Text=’這么牛逼！’;  這個值就會更新到C#類Text屬性和頁面

 

 

Js綁定C#方法，方法上面加JSFunction，方法參數(shù)只支持簡單的數(shù)據(jù)類型，數(shù)量和類型要和JS調(diào)用的對應(yīng)

 

 

 

JS同步調(diào)用C#方法：參數(shù)對應(yīng)，直接調(diào)用就是同步調(diào)用

 

 

 

JS異步調(diào)用C#方法：前面參數(shù)對應(yīng)，最后加個包含一個參數(shù)的回調(diào)函數(shù)

 

 

 

如果頁面里引用了JQuery，你還可以用C#封裝的JQuery調(diào)用，方便操作Dom元素

 

 

 

C#直接調(diào)用JS： InvokeJS("alert('test')");

 

 

最終的Demo效果，是不是很簡單，方便！