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

 

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第1张图片

 

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

 

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第2张图片

 

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

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

 

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第3张图片

 

 

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

 

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第4张图片

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第5张图片

 

 DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第6张图片

 

 DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第7张图片

 

类继承  DSkin.Forms.MiniBlinkPage

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第8张图片

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第9张图片

 

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

 

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

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第10张图片

 

 DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第11张图片

 

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

 

 DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第12张图片

 

 

页面里的 {{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的UI_第13张图片

 

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第14张图片

 

 

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

 

 

 

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

 

 

 

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

 

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第15张图片

 

 

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

 

 

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

 

DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI_第16张图片

 

你可能感兴趣的:(DSkin 的WebUI开发模式介绍,Html快速开发Winform的UI)