NanUI文档目录

打包并使用内嵌式的HTML/CSS/JS资源

在使用HTML/CSS/JS设计软件界面时，如果每次都从远程服务器加载资源那显然是不现实的：如果界面是从远程服务器获取，遇到网速不佳时，那么将给用户带来非常糟糕的体验。为了避免这种尴尬的局面，NanUI可以将呈现界面的HTML/CSS/JS等文件作为嵌入资源编译到项目中，这样操纵既可以加速软件界面的加载速度，也可以避免界面遭到恶意修改。

下面的文章将详细介绍如何将HTML/CSS/JS等文件打包到项目中。

第一步 新建NanUI项目

按照之前的教程，新建一个Windows窗体应用程序，并在Program中完成CEF的相关设置操作。

第二步 在项目中添加网页资源

在项目中添加index.html文件，内容随意。在本示例中，在页面中添加以下html标记：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta charset="utf-8" />

	<title>HELLO</title>

</head>

<body>

	<h1>Hello NanUI!</h1>

</body>

</html>

若要将index.html文件作为嵌入资源编译到项目中，您需要在Visual Studio的资源管理器中选中index.html文件，然后在该文件的属性窗口的生成操作栏目中选中该文件为嵌入的资源。如图所示：

这样，在项目编译时index.html文件将会作为内嵌的资源编译到输出的可执行文件中。

第三步 注册嵌入资源的程序集

要让NanUI加载嵌入的资源，需要在项目的Bootstrap执行Load方法成功后注册程序集中的嵌入资源，如下面代码所示，在Load成功后使用Bootstrap静态类的RegisterAssemblyResources将当前程序集中的资源注册到环境中。

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using System.Windows.Forms;

namespace EmbeddedHtmlResources

{

	using NetDimension.NanUI;

	static class Program

	{

		/// <summary>

		/// 应用程序的主入口点。

		/// </summary>

		[STAThread]

		static void Main()

		{

			Application.EnableVisualStyles();

			Application.SetCompatibleTextRenderingDefault(false);

			//指定CEF架构和文件目录结构，并初始化CEF

			if (Bootstrap.Load())

			{

				//注册嵌入资源，并为指定资源指定一个假的域名my.resource.local

				Bootstrap.RegisterAssemblyResources(System.Reflection.Assembly.GetExecutingAssembly(), null, "my.resource.local");

				Application.Run(new Form1());

			}

		}

	}

}

RegisterAssemblyResources方法的第一个参数是需要执行注册的程序集实例，第二个参数指定一个虚假的域名，嵌入的资源将通过该域名进行访问。

除了将html/css/js文件打包到当前项目，还可以将这些资源打包到单独的dll中，然后用反射的方式来获取该资源dll的程序集并使用上述方法进行注册。例如，将另一个index.html文件打包到EmbeddedResourcesInSplitAssembly.dll程序集中，内容可以与上面的本地项目中的index.html有所差别，然后主项目在CEF初始化成功之后通过下面的方法，也可以将外部程序集中的资源加载到NanUI环境中的：

//指定CEF架构和文件目录结构，并初始化CEF

			if (Bootstrap.Load(PlatformArch.Auto, System.IO.Path.Combine(Application.StartupPath, "fx"), System.IO.Path.Combine(Application.StartupPath, "fx\\Resources"), System.IO.Path.Combine(Application.StartupPath, "fx\\Resources\\locales")))

			{

				//注册嵌入资源，并为指定资源指定一个假的域名my.resource.local

				Bootstrap.RegisterAssemblyResources(System.Reflection.Assembly.GetExecutingAssembly(), "my.resource.local");

				//加载分离式的资源

				var separateAssembly = System.Reflection.Assembly.LoadFile(System.IO.Path.Combine(Application.StartupPath, "EmbeddedResourcesInSplitAssembly.dll"));

				//注册外部的嵌入资源，并为指定资源指定一个假的域名separate.resource.local

				Bootstrap.RegisterAssemblyResources(separateAssembly , "separate.resource.local");

				Application.Run(new Form1());

			}

您可以在项目中注册多个程序中的嵌入式资源，只需指定不同的域名(domin参数)即可。

第四步 在Formium窗体中使用嵌入的资源

按照上述方法，我们就完成了资源文件的嵌入。那么如何这些嵌入的资源文件呢？其实就跟平常加载网页上的资源是一样的，只需要按照我们指定的虚假域名和资源嵌入的路径组合以后，就可以在NanUI中使用嵌入的资源了。

例如，按照上面步骤中的方式对文件进行嵌入后，我们就可以通过http://my.resource.local/index.html访问到主项目中的index.html文件，然后通过 http://separate.resource.local/index.html访问到外部程序集EmbeddedResourcesInSplitAssembly.dll中的index.html文件了。

那么，如何测试我们的资源是否这确被嵌入到程序集，并且也正常加载了呢？最简单的例子就是在我们的窗体中直接使用这些地址。

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows.Forms;

namespace EmbeddedHtmlResources

{

	using NetDimension.NanUI;

	public partial class Form1 : Formium

	{

		public Form1()

			: base("http://my.resource.local/index.html")

		{

			InitializeComponent();

		}

	}

}

编译并执行项目文件，我们就可以看到嵌入的资源已经可以正确加载了。

示例源码

git clone https://github.com/NetDimension/NanUI-Examples-02-Use-Embedded-Resources-In-NanUI.git

社群和帮助

GitHub

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

交流群QQ群

521854872

赞助作者

如果你喜欢我的工作，并且希望NanUI持续的发展，请对NanUI项目进行捐助以此来鼓励和支持我继续NanUI的开发工作。你可以使用微信或者支付宝来扫描下面的二维码进行捐助。

NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源的更多相关文章

  1. NanUI文档 - 开始使用NanUI

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

  2. NanUI文档 - 使用网页来设计整个窗口

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

  3. NanUI文档 - 如何实现C#与Javascript的相互通信

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript的相互通信 如何处理NanUI中的下载过 ...

  4. HTML span标签：用来组合文档中的行内元素

    在DIV+CSS切图布局重构技术中,除了常常使用div标签外也常常使用span标签布局,通常也可以通过对span标签对象设置不同样式实现我们要的美化效果.这里主机吧主要讲的是span标签的定义和用法. ...

  5. 13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式

    1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...

  6. JavaScript--返回顶部方法:锚链接、行内式js写法、外链式、内嵌式

    返回网页顶部方法 一.锚链接 simpleDemo: <!DOCTYPE html> <html lang="en"> <head> <m ...

  7. 将markdown文档使用gulp转换为HTML【附带两套css样式】

    将markdown文档使用gulp转换为HTML[附带两套css样式] 今天遇到一个需求,即将Markdown文档转为为HTML在网页展示,身为一名程序员,能用代码解决的问题,手动打一遍无疑是可耻的. ...

  8. JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  9. java文档打包成压缩包并且下载

    需求,根据产品ID查询产品详情,产品详情会返回产品的一些文案,以及图片的url.需要做成,将文案信息记录在一个txt文档中,然后图片下载到文件夹,最后下载到本地,下载后自动删除刚才生成的文件夹以及文件 ...

随机推荐

  1. 深度学习的异构加速技术（一）：AI 需要一个多大的“心脏”？

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:kevinxiaoyu,高级研究员,隶属腾讯TEG-架构平台部,主要研究方向为深度学习异构计算与硬件加速.FPGA云.高速视觉感知等方向 ...

  2. Web攻击技术

    Web攻击技术 1.针对Web的攻击技术 1.1.在客户端即可篡改请求 在Web应用中,从浏览器那接收到的Http的全部内容,都可以在客户端自由地变更.篡改,所以Web应用可能会接收到与预期数据不相同 ...

  3. java oop详解

    近日来重温了一下java oop的知识.加深了对面向对象的理解.尤其时继承方面.故写一篇博客.记录一下自己的想法和心得 1.面向对象主要分为三大点(封装,继承,多态) 封装的思想促进了类的形成.相比于 ...

  4. 关于vue 框架与后台框架的混合使用的尝试

    这几天我在研究前台框架和后台框架融合的问题,进行了一些尝试; 我前台选择的是 vue,当然也可以选择 react 等其他 mvvm 框架,不过 vue 对于我来说是最熟悉的; 后台话,我选择的是 ph ...

  5. app接入网易严选：webview注入js的几个坑

    消费贷款app"一刻千金"接入网易严选总结 主要任务列表 隐藏相关元素 商品列表页跳转事件绑定 获取商品信息(skuid比较复杂) 隐藏元素 这部分没什么好讲的,使用原生js的do ...

  6. （一）IDEA工具开第一个springboot应用之helloworld

    (一)IDEA工具开第一个springboot应用之helloworld 一.前置知识 1.maven相关知识 2.spring注解 3.RESTful API 二.idea开发第一个springbo ...

  7. Unity塔防游戏开发

    Unity3D塔防开发流程 配置环境及场景搭建编程语言:C#,略懂些许设计模式,如果不了解设计模式,BUG More开发工具:Unity3D编辑器.Visual Studio编译器开发建议:了解Uni ...

  8. Unity3d_GUI_2__(能量条的学习)

    这和上一篇有点跳跃,不过GUI有官方文档,而且也可以查看编辑器自带的脚本文档,多看看API,多操作操作,肯定能熟练的.所以这篇我就介绍下一点小技巧,大佬就略过这篇了,不适合大佬,会被你们教育的. 1. ...

  9. 【微服务】之五：轻松搞定SpringCloud微服务-调用远程组件Feign

    上一篇文章讲到了负载均衡在Spring Cloud体系中的体现,其实Spring Cloud是提供了多种客户端调用的组件,各个微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使 ...

  10. Yacc 与 Lex 快速入门（词法分析和语法分析）

    我们知道,高级语言,一般的如c,Java等是不能直接运行的,它们需要经过编译成机器认识的语言.即编译器的工作. 编译器工作流程:词法分析.语法分析.语义分析.IR(中间代码,intermediate ...