快速使用NanUI
NanUI:将HTML作为winform窗体呈现的组件,开源,协议为MIT。官网:http://www.formium.net;官方文档:https://docs.formium.net/zh-cn/;作者专栏:https://www.zhihu.com/column/nanui
1、使用vs2019较高版本创建项目,这里是创建一个winform程序。框架为.net framework 4.7.2
2、在引用里点击管理NuGet程序包,搜索NanUI,将下面的都安装了。前两个必须安装,后面的资源使用组件本例只用到了EmbeddedFileResource,可以只安装这个。
3、删除自动创建的窗体文件,新建一个类文件,命名为MainWindow.cs。这个文件就作为启动窗体了。
4、新建文件夹,命名为EmbeddeRes,将你做好的网页文件拷贝到此文件夹下。将里面的每个文件都设置为嵌入的资源。。。
5、修改Program.cs文件,复制粘贴就行了
using System; using System.Windows.Forms; using NetDimension.NanUI; using NetDimension.NanUI.EmbeddedFileResource; static class Program { ////// 应用程序的主入口点。 /// [STAThread] static void Main() { Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); WinFormium.CreateRuntimeBuilder(env => { env.CustomCefSettings(settings => { // 在此处设置 CEF 的相关参数 }); env.CustomCefCommandLineArguments(commandLine => { // 在此处指定 CEF 命令行参数 }); }, app => { app.UseEmbeddedFileResource("http", "res.app.local", "EmbeddedRes"); // 指定启动窗体 app.UseMainWindow(context => new MainWindow()); }) .Build() .Run(); } }
6、编辑MainWindow.cs。StartUrl设置与Program.cs文件中的app.UseEmbeddedFileResource设置的一致,默认就是启动EmbeddedRes下的index.html。这个URL可以改成任意网址,启动后打开的就是相应网站。
using NetDimension.NanUI; using NetDimension.NanUI.HostWindow; using NetDimension.NanUI.JavaScript; using System.Drawing; using System.Windows.Forms; class MainWindow : Formium { public override HostWindowType WindowType => HostWindowType.Kiosk;//选择窗体样式这里Kiosk是无边框 public override string StartUrl => "http://res.app.local"; public MainWindow() { // 在此处设置窗口样式 Size = new System.Drawing.Size(1280,800); } }
7、运行示例
8、将C#对象注册为javascript对象,这样就可以在网页js中直接调用C#对象了。例如,点击上图网页中的退出,实现退出程序。
using NetDimension.NanUI; using NetDimension.NanUI.HostWindow; using NetDimension.NanUI.JavaScript; using System.Drawing; using System.Windows.Forms; class MainWindow : Formium { public override HostWindowType WindowType => HostWindowType.Kiosk;//选择窗体样式这里Kiosk是无边框 public override string StartUrl => "http://res.app.local"; public MainWindow() { // 在此处设置窗口样式 Size = new System.Drawing.Size(1280,800); } protected override void OnReady() { // 在此处进行浏览器相关操作 RegisterWindowObject();//执行注册函数 BeforeClose += MainForm_BeforeClose;//关闭窗体前提示信息 } private void RegisterWindowObject() { var myWindow = JavaScriptValue.CreateObject(); //注册openDevTools myWindow.SetValue("openDevTools", JavaScriptValue.CreateFunction(args => { InvokeIfRequired(() => { ShowDevTools();//打开网页调试工具 }); return null; })); //注册closeWindow myWindow.SetValue("closeWindow", JavaScriptValue.CreateFunction(args => { InvokeIfRequired(() => { Close();//关闭窗体, }); return null; })); RegisterExternalObjectValue("demo", myWindow); } private void MainForm_BeforeClose(object sender, NetDimension.NanUI.Browser.FormiumCloseEventArgs e) { if (MessageBox.Show(this.HostWindow, "Are your sure to quit?", "Quit this App", MessageBoxButtons.YesNo, MessageBoxIcon.Question, MessageBoxDefaultButton.Button2) == DialogResult.No) { e.Canceled = true; } } }
这个RegisterExternalObjectValue("demo", myWindow)就是将对象注册到JS的Formium.external中,即Formium.external.demo
网页里调用示例:
<div class="div_close" onclick="Formium.external.demo.closeWindow()"> 退出 div>
9、其他,Flex快速布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
10、项目如何打包发布,暂不清楚。因为使用资源文件依赖路径,可以将EmbeddedRes等资源文件夹拷贝到debug目录下,然后将debug作为程序包。。。。