qt html ui,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

2d95d429b2b572315cdebad2e9c8784c.png

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

745f06188de1ae5f6658147acabe19b6.png

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

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

63c04286389e1d1d20c04fe6d10fde41.png

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

62b588d8f7da5422866d0ac7bc0030ee.png

03fd5896278097fe3593da467084944d.png

0de1f4539a73a7724579afe33c254d40.png

f65c938b9a377d92094307b75ab88792.png

类继承DSkin.Forms.MiniBlinkPage

16d24c9726469dcae174251741cf2986.png

1f34c1b875a92739588bcd56bf910288.png

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

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

7f49e3b422f34692151cddb961b2a0b1.png

47ba1ec26fd73a05e52f68375ac4611f.png

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

834bfbb259626be58e92eca5e1820a5e.png

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

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

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

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

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

b27b32b1cd65b0ffdc76d4bee3d907b2.png

ac1ede878366ef47968183cb74886fb7.png

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

8d2b10543e401fb290f7ee456ab52235.png

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

22bf2f56aee434478c1737cd15240ba1.png

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

13eff3e64b6220b58aab0bc308d301b6.png

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

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

ee0d8d13a8b48fd1e8c06738c36c74ca.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值