CS和BS融合开发-NanUI使用说明

介绍

NanUI是一套桌面开发框架，最终输出的是exe桌面程序，但运行的内容是BS页面的内容。
解决了CS界面不容易输出很美观界面的问题。
官网说明：

这是一个开放源代码的 .NET / .NET Core 窗体应用程序（WinForms）界面组件。您可以使用 HTML5 / CSS3 / Javascript 等前端技术来构建您的应用程序界面。主流的Javascript框架，比如Angular, React, Vue都是可以用来构架SPA应用的明智选择。使用 NanUI 界面组件将给您的窗体设计工作带来无限可能。

官网
https://www.formium.net/

国内gitee源码
https://gitee.com/linxuanchen/NanUI
中文使用说明，官方的，讲的很清楚
https://gitee.com/linxuanchen/NanUI/blob/master/docs/zh-CN/README.md

github源码
https://github.com/NetDimension/NanUI

教程
知乎：

使用说明

以下代码是基于0.8这个版本的。
NanUI 版本：

• Chromium 80.0.3987.163
• NanUI 0.8.80.120

新建一个winform项目

1.安装包

把这下面前两个都安装了。

修改代码

修改progrome.cs文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;
using NetDimension.NanUI;

namespace WindowsFormsApp1
{
    static class Program
    {
        static void Main()
        {
            // ...
            WinFormium.CreateRuntimeBuilder(env => {

                env.CustomCefSettings(settings =>
                {
                    // 在此处设置 CEF 的相关参数
                });

                env.CustomCefCommandLineArguments(commandLine =>
                {
                    // 在此处指定 CEF 命令行参数
                });

            }, app =>
            {
                // 指定启动窗体
                app.UseMainWindow(context => new MainWindow());
            })
            .Build()
            .Run();
        }
    }
}

新建一个class文件


代码

using NetDimension.NanUI;
using NetDimension.NanUI.HostWindow;

class MainWindow : Formium
{
    // 设置窗体样式类型
    public override HostWindowType WindowType => HostWindowType.System;
    // 指定启动 Url
    public override string StartUrl => "https://www.formium.net";

    public MainWindow()
    {
        // 在此处设置窗口样式
        Size = new System.Drawing.Size(1024, 768);
    }

    protected override void OnReady()
    {
        // 在此处进行浏览器相关操作

        //ShowDevTools();
        //ExecuteJavaScript("alert('Hello NanUI')");
    }
}

运行

先出现遮罩层

然后是运行的网页。

总结

问题一：打包文件太大

一个demo大小290M，真不小啊。
不过也可以接受。
根据与作者沟通，这个包同时包含x86和x64，所以大一些，实际操作时可以分开打两个包，就会小一些。

问题二：启动有遮罩层

遮罩层可以在代码中自定义或者关闭。

Mask对象，里面有Image属性可以改启动图片，BackColor属性改颜色，Content可以添加子控件
AutoShowMask为false那么就不在启动时显示启动遮罩层

上面是作者的回复，但那个AutoShowMask为false，我暂时没有操作成功。Mask代码如下

    public MainWindow()
    {
        // 在此处设置窗口样式
        Size = new System.Drawing.Size(1024, 768);
        AutoShowMask = false;
        //AllowFullScreen = true;

        Mask.BackColor = System.Drawing.Color.Green;

        Trace.WriteLine(StartUrl);        
    }