DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI

从零学习前端开发 2018-04-08

新版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

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI

期望大小乘以ZoomFactor,是为了适应DPI缩放;把app.manifest中的这段DPI代码取消注释

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI

程序集里的资源Url写法是res://开头的

res://WebUIDemo/Views/index.html res://程序集名/若干文件夹/文件名 区分大小写

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI

Html页面和C#类绑定,页面和类的名称要一样,Html在哪个文件夹无所谓,区分大小写, 支持主页面和框架页面的绑定

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UIDSkin 的WebUI开发模式介绍,Html快速开发Winform的UIDSkin 的WebUI开发模式介绍,Html快速开发Winform的UIDSkin 的WebUI开发模式介绍,Html快速开发Winform的UI

类继承DSkin.Forms.MiniBlinkPage

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UIDSkin 的WebUI开发模式介绍,Html快速开发Winform的UI

C#属性和页面双向绑定,依赖Vue,支持简单属性的双向绑定,和集合的单向绑定,复杂属性请用Json字符串

JS中也可以用Get(“属性名”); Set(“属性名”,值) 访问和设置属性值,可以不需要Vue

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UIDSkin 的WebUI开发模式介绍,Html快速开发Winform的UI

页面设置一个绑定的全局ID,默认是page,如果想改成其他的,页面和C#类需要一起改,在构造函数里设置。这个ID和Vue绑定ID是一致的!

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI

页面里的 {{Text}} 就是绑定到C#里定义的Text的属性了

绑定操作写好之后,Js中就可以操作这个Vue绑定对象了,对象名就是那个Id,默认为page

Js中的高级操作可以到Vue官网查看教程 https://cn.vuejs.org/v2/guide/

比如Js中调用 page.Text=’这么牛逼!’; 这个值就会更新到C#类Text属性和页面

Js绑定C#方法,方法上面加JSFunction,方法参数只支持简单的数据类型,数量和类型要和JS调用的对应

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UIDSkin 的WebUI开发模式介绍,Html快速开发Winform的UI

JS同步调用C#方法:参数对应,直接调用就是同步调用

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI

JS异步调用C#方法:前面参数对应,最后加个包含一个参数的回调函数

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI

如果页面里引用了JQuery,你还可以用C#封装的JQuery调用,方便操作Dom元素

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI

C#直接调用JS: InvokeJS("alert('test')");

最终的Demo效果,是不是很简单,方便!

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI

相关推荐