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效果，是不是很简单，方便！