如何在瀏覽器中運行 .NET

述：本文將討論如何用最簡單的術(shù)語在網(wǎng)站上運行 C# 代碼。半技術(shù)講座我使用了 wasm-tools-net7，這是一個基于 wasm-tools 的工作負載，沒有包含任何額外的包。我的重點是簡單性和主要主題。徹底了解該主題可提供完成所有其他任務(wù)所需的信息。如何工作？WebAssembly 工作原理：序列圖創(chuàng)建演示創(chuàng)建項目我用的是net7，但這取決于你。Dotnet new console -o WASM_Demo cd WASM_Demo Dotnet workload install wasm-tools-net7此時，需要對 csproj 文件進行修改。Project Sdk=Mi

本文將討論如何用最簡單的術(shù)語在網(wǎng)站上運行 C# 代碼。

半技術(shù)講座

我使用了 wasm-tools-net7，這是一個基于 wasm-tools 的工作負載，沒有包含任何額外的包。我的重點是簡單性和主要主題。徹底了解該主題可提供完成所有其他任務(wù)所需的信息。

如何工作？

WebAssembly 工作原理：序列圖

創(chuàng)建演示

創(chuàng)建項目

我用的是net7，但這取決于你。

Dotnet new console -o WASM_Demo  
  
cd WASM_Demo  
  
Dotnet workload install wasm-tools-net7

此時，需要對 csproj 文件進行修改。

<Project Sdk="Microsoft.NET.Sdk">

    <PropertyGroup>
        <OutputType>Exe</OutputType>
        <TargetFramework>net7.0</TargetFramework>
        <ImplicitUsings>enable</ImplicitUsings>
        <Nullable>enable</Nullable>

        <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
        <WasmMainJSPath>main.js</WasmMainJSPath>
        <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
    </PropertyGroup>

    <ItemGroup>
        <WasmExtraFilesToDeploy Include="index.html" />
        <WasmExtraFilesToDeploy Include="main.js" />
    </ItemGroup>

</Project>

我們添加了什么：

RuntimeIdentifier （wasm-tools 需要）
WasmMainJSPath （wasm-tools 需要）
AllowUnsafeBlocks（JSExportAttribute 需要不安全的代碼）
ItemGroup （Include as resource）導(dǎo)入 index.html導(dǎo)入main.js

返回到program.cs文件，需要考慮某些規(guī)則。

類必須是公共的和部分的。
函數(shù)必須是公共的和靜態(tài)的，并且必須使用 [JSExport] 進行屬性化。

讓我們舉個例子。

using System.Runtime.InteropServices.JavaScript;

namespace WASM_Demo;

public partial class Program
{
    static void Main(string[] args) { }

    [JSExport]
    public static string Response()
    {
        return """
               <h1>
                   Hello World
               </h1>
               """;
    }
}

沒關(guān)系，但是我們?nèi)绾卧跒g覽器中運行此代碼？

運行這個程序的代碼是dotnet.js的，它自帶了wasm-tools，所以沒有必要擔(dān)心它。要使用此dotnet.js，我們只需使用一個名為 main.js 的文件。

import { dotnet } from './dotnet.js'

const is_browser = typeof window != "undefined";
if (!is_browser) throw new Error(`Expected to be running in a browser`);

const { setModuleImports, getAssemblyExports, getConfig, runMainAndExit } = await dotnet
    .withDiagnosticTracing(false)
    .withApplicationArgumentsFromQuery()
    .create();

const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);

const html = 
    exports
        .WASM_Demo    // Namespace
        .Program      // Class Name
        .Response();  // Function Name

// Regular javascript code
document.getElementById("app").innerHTML = `${html}`;

await runMainAndExit(config.mainAssemblyName, [] /* Console App Args */);

index.html頁面的模板已經(jīng)準(zhǔn)備完畢。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>WASM Demo</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="modulepreload" href="./dotnet.js" />
    </head>
    
    <body>
        <main id="app"></main>
        <script type="module" src="./main.js"></script>
    </body>
</html>

現(xiàn)在，讓我們再看一遍這個過程，

HTTP 請求傳入
WASM-Tools 處理此問題并發(fā)送index.html文件。
index.html文件請求dotnet.js和main.js文件，dotnet.js由 WASM-Tools 發(fā)送，main.js是我們的自定義代碼。
通過在 main.js 中使用 dotnet.js，我們可以進入 C# 代碼中的 Program 類，調(diào)用 Response 函數(shù)并在 main.js 中進行我們想要的任何客戶端更改。

我們還有一件事要做，你需要打開一個名為 runtimeconfig.template.json 的文件，并將以下 JSON 數(shù)據(jù)放入其中。

{
  "wasmHostProperties": {
    "perHostConfig": [
      {
        "name": "browser",
        "html-path": "index.html",
        "Host": "browser"
      }
    ]
  }
}

我們已經(jīng)到了盡頭，程序現(xiàn)在可以運行了。唯一需要的命令是：

Dotnet run -c Release

常見問題

我可以托管所有文件而不是 wasm-tools 嗎？又是如何做到的呢？
當(dāng)然，但它可能會變得有點復(fù)雜，你用 wasm-tools 制作的項目不能用于任何其他目的，即控制臺應(yīng)用程序不起作用，wasm-tools 可以工作。因為我們選擇 browser-wasm 作為 RuntimeIdentifier，并且多個 RuntimeIdentifiers 在 .NET 中不可用。作為替代方法，您可以打開兩個項目，將第一個項目設(shè)置為 WASM 項目，然后在第二個項目中將其設(shè)置為控制臺應(yīng)用程序，然后生成第一個項目并托管輸出文件夾，所有 DLL 和文件都將在那里。

這個演示只是索引文件，我可以做多頁嗎？又是如何做到的呢？
當(dāng)然，但這比你想象的要難得多，因為這樣做的方法是一種叫做SPA（單頁應(yīng)用程序）的方法，用戶總是在同一頁面上，只是內(nèi)容發(fā)生了變化。有多種方法可以做到這一點。所以它可以用你的創(chuàng)造力來完成。

我可以像計數(shù)器一樣做動態(tài)代碼嗎？又是如何做到的呢？
_是的，我也這樣做了，你可以一遍又一遍地調(diào)用 C# 函數(shù)，如果你只是將導(dǎo)出綁定到 window 對象，你可以從每個 JavaScript 代碼中調(diào)用它。

4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入外部 CSS 文件。下面我們就來看看這些方式和它們的優(yōu)缺點。

內(nèi)聯(lián)方式

內(nèi)聯(lián)方式指的是直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS。

示例：

<div style="background: red"></div>

這通常是個很糟糕的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個 <div> 擁有相同的樣式，你不得不重復(fù)地為每個 <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會導(dǎo)致 HTML 代碼變得冗長，且使得網(wǎng)頁難以維護。

嵌入方式

嵌入方式指的是在 HTML 頭部中的 <style> 標(biāo)簽下書寫 CSS 代碼。

示例：

<head>
 <style>
 .content {
 background: red;
 }
 </style>
</head>

嵌入方式的 CSS 只對當(dāng)前的網(wǎng)頁有效。因為 CSS 代碼是在 HTML 文件中，所以會使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因為嵌入的 CSS 只對當(dāng)前頁面有效，所以當(dāng)多個頁面需要引入相同的 CSS 代碼時，這樣寫會導(dǎo)致代碼冗余，也不利于維護。

鏈接方式

鏈接方式指的是使用 HTML 頭部的 <head> 標(biāo)簽引入外部的 CSS 文件。

示例：

<head>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>

這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨的 CSS 文件中，所以具有良好的可維護性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會在第一次加載時引入，以后切換頁面時只需加載 HTML 文件即可。

導(dǎo)入方式

導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。

示例：

<style>
 @import url(style.css);
</style>

比較鏈接方式和導(dǎo)入方式

鏈接方式（下面用 link 代替）和導(dǎo)入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式，并且說明為什么不推薦使用 @import。

link 屬于 HTML，通過 <link> 標(biāo)簽中的 href 屬性來引入外部文件，而 @import 屬于 CSS，所以導(dǎo)入語句應(yīng)寫在 CSS 中，要注意的是導(dǎo)入語句應(yīng)寫在樣式表的開頭，否則無法正確導(dǎo)入外部文件；
@import 是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低，無法正確導(dǎo)入外部樣式文件；
當(dāng) HTML 文件被加載時，link 引用的文件會同時被加載，而 @import 引用的文件則會等頁面全部下載完畢再被加載；

小結(jié)：我們應(yīng)盡量使用 <link> 標(biāo)簽導(dǎo)入外部 CSS 文件，避免或者少用使用其他三種方式。

程序員HTML5培訓(xùn)教程-css的引入方式和選擇器

01.引入css方式（重點掌握）

行內(nèi)樣式

內(nèi)接樣式

外接樣式

3.1 鏈接式

3.1 導(dǎo)入式

css介紹

現(xiàn)在的互聯(lián)網(wǎng)前端分三層：

HTML：超文本標(biāo)記語言。從語義的角度描述頁面結(jié)構(gòu)。

CSS：層疊樣式表。從審美的角度負責(zé)頁面樣式。

JS：JavaScript 。從交互的角度描述頁面行為

CSS：Cascading Style Sheet，層疊樣式表。CSS的作用就是給HTML頁面標(biāo)簽添加各種樣式，定義網(wǎng)頁的顯示效果。簡單一句話：CSS將網(wǎng)頁內(nèi)容和顯示樣式進行分離，提高了顯示功能。

css的最新版本是css3，我們目前學(xué)習(xí)的是css2.1

接下來我們要講一下為什么要使用CSS。

HTML的缺陷：

不能夠適應(yīng)多種設(shè)備

要求瀏覽器必須智能化足夠龐大

數(shù)據(jù)和顯示沒有分開

功能不夠強大

CSS 優(yōu)點：

使數(shù)據(jù)和顯示分開

降低網(wǎng)絡(luò)流量

使整個網(wǎng)站視覺效果一致

使開發(fā)效率提高了（耦合性降低，一個人負責(zé)寫html，一個人負責(zé)寫css）

比如說，有一個樣式需要在一百個頁面上顯示，如果是html來實現(xiàn)，那要寫一百遍，現(xiàn)在有了css，只要寫一遍?，F(xiàn)在，html只提供數(shù)據(jù)和一些控件，完全交給css提供各種各樣的樣式。

行內(nèi)樣式

1 <div>
2 <p style="color: green">我是一個段落</p>
3 </div>

內(nèi)接樣式

復(fù)制代碼

<style type="text/css">
/*寫我們的css代碼*/
 
span{
color: yellow;
}
</style>

復(fù)制代碼

外接樣式-鏈接式

<link rel="stylesheet" href="./index.css">
外接樣式-導(dǎo)入式
<style type="text/css">
@import url('./index.css');
</style>

02.css的選擇器：

1.基本選擇器 2.高級選擇器

基本選擇器包含：

1.標(biāo)簽選擇器

標(biāo)簽選擇器可以選中所有的標(biāo)簽元素，比如div，ul，li ，p等等，不管標(biāo)簽藏的多深，都能選中，選中的是所有的，而不是某一個，所以說 “共性” 而不是 ”特性“

復(fù)制代碼

body{

color:gray;

font-size: 12px;

}

/標(biāo)簽選擇器/

color: red;

font-size: 20px;

}

span{

color: yellow;

}

復(fù)制代碼

2.id選擇器

選中id

同一個頁面中id不能重復(fù)。

任何的標(biāo)簽都可以設(shè)置id

id命名規(guī)范要以字母可以有數(shù)字下劃線 - 大小寫嚴(yán)格區(qū)分 aa和AA是兩個不一樣的屬性值

復(fù)制代碼

1 #box{
2 background:green;
3 }
4 
5 #s1{
6 color: red;
7 }
8 
9 #s2{
10 font-size: 30px;
11 }

復(fù)制代碼

3.類選擇器

所謂類：就是class . class與id非常相似任何的標(biāo)簽都可以加類，但是類是可以重復(fù),屬于歸類的概念。同一個標(biāo)簽中可以攜帶多個類，用空格隔開

類的使用，能夠決定前端工程師的css水平到底有多牛逼？

玩類了，一定要有”公共類“的概念。

復(fù)制代碼

.lv{
 color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}

復(fù)制代碼

<!-- 公共類 共有的屬性 -->
 <div>
 <p class="lv big">段落1</p>
 <p class="lv line">段落2</p>
 <p class="line big">段落3</p>
 </div>

復(fù)制代碼

總結(jié)：

不要去試圖用一個類將我們的頁面寫完。這個標(biāo)簽要攜帶多個類，共同設(shè)置樣式

每個類要盡可能的小，有公共的概念，能夠讓更多的標(biāo)簽使用

未完待續(xù)歡迎繼續(xù)關(guān)注好程序員前端教程分享!

在線咨詢

上一篇：如何編寫HTML提交按鈕代碼？
下一篇：推薦8款非常好用的HTML5開發(fā)工具

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

如何在瀏覽器中運行 .NET

半技術(shù)講座

如何工作？

創(chuàng)建演示

創(chuàng)建項目

常見問題

您的項目需求

如何工作？