CheckKeywords 2.0: Blazor + wasm + AntDesign + Xamarin = ?

嗯，是2.0了，1.0指路👉 CheckKeywords:校验你的接口参数中是否使用了其他语言的关键字/保留字

本次更新内容

• Blazor 升级至 .NET5
• 使用 Antdesign Blazor UI库
• 添加编程语言选择器
• 校验结果，关键词、保留字 高亮
• Hybrid Blazor apps
  • Android（已测试通过）
  • IOS（已在模拟器测试通过）
  • MACOS（未测试, 哪位可以帮忙测试下，可以联系我 谢谢）
  • Windows(已测试通过)

接下来就按照更新的内容按个看看吧

.NET 5 blazor

修改 CheckKeywordsBlazor.csproj TargetFramework, 更新包

-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

-  <PropertyGroup>
-    <TargetFramework>netstandard2.1</TargetFramework>
-    <RazorLangVersion>3.0</RazorLangVersion>
-    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
-  </PropertyGroup>
+  <PropertyGroup>
+    <TargetFramework>net5.0</TargetFramework>
+    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
+  </PropertyGroup>

-  <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.1" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.1" PrivateAssets="all" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.1" PrivateAssets="all" />
-    <PackageReference Include="System.Net.Http.Json" Version="3.2.0" />
-  </ItemGroup>
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.2" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.2" PrivateAssets="all" />
+    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
+  </ItemGroup>

对比下 .NET core 3.1 与 .NET 5 network.

首次加载

第二次加载

可以看出，抛开其他类库不说，这几个自带的文件都有所增加，并没有预想的极限压缩到80k 以内，首次加载比其他框架还是要慢的，只能等微软再优化了。

不过本次更新，个人觉得比较有用的是新增的 lazy load assemblies,就是可以通过配置 BlazorWebAssemblyLazyLoad 设置某些dll延迟加载，这样可以一定程度上减轻首次加载的数据量。（ps 本项目只有一页，且除了UI使用了Antdesign blazor, 没有使用其他的类库，所以没有进项该项配置）

关于性能优化，也有一些补充，感兴趣的可以看下Webassembly performance best practices

至于其他的优化，可能就要等 .NET 6 将blazor程序编译直接产出wasm了（目前是浏览器 down dll，之后生成 wasm，未压缩的 wasm 有 3M+）

个人觉得blazor wasm的优势，除了对webassembly的实现，目前来看只是对C#开发人员比较友好，并且现在也有一些完整且较为成熟的blazorUI框架，比如 antdesign , bootstarp ,kendo …(ps. 仅是可以用C#,vs 去写SPA 程序这一点，开发起来是真的舒服)。如果首屏加载还需要down完整的dll，还是很难大规模商用，(TO B 根据业务场景还有点可能使用)

希望blazor 越来越好吧。

Ant Design Blazor

Ant Design
React UI 组件库，用于研发企业级中后台产品.

Ant Design Blazor
一套基于 Ant Design 和 Blazor 的企业级组件库

快速上手

添加包

dotnet add package AntDesign

注入

Program.cs

builder.Services.AddAntDesign();

在 _Imports.razor 添加引用

@using AntDesign

在 wwwroot/index.html 添加资源文件

<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">
...
<script src="_content/AntDesign/js/ant-design-blazor.js"></script>

准备工作完成

项目中其实只用到了，一个多选的选择器，默认样式因为引用了ant-design css也被覆盖了，有了ant design那味儿。

razor 部分

<Select Mode="multiple"
        Placeholder="Please select need support program language"
        @bind-Values="@SelectedLanguageNames"
        TItemValue="string"
        TItem="string"
        Style="width: 100%; margin-bottom: 8px;"
        EnableSearch
        Size = "large"
        AllowClear>
    <SelectOptions>
        @foreach (var item in LanguageNames)
        {
            <SelectOption TItemValue="string" TItem="string" Value=@item Label=@item />
        }
    </SelectOptions>
</Select>

C#部分，定义LanguageNames，SelectedLanguageNames ，并对应赋值即可

如上边代码写的那样，Antdesign封装的组件都是首字母大写的html标签（比如 html button -> antdesign-blazor Button,html select -> antdesign-blazor Select）,也可以输入<AntDesign.看代码提示。

Blazor 稍微进阶的使用

2.0的时候做了将校验结果中的关键词高亮的优化（实现的很简单，只是将关键词用 pre 括起来），下边的是用js与blazor的两种实现方式

.Net 调用 js

上边的问题，写过js的都知道 用ele.innerHtml = strWithTag就好了， Blazor本来就支持与Js的互相调用，刚好还没有写过，写下试试。

MSDN call Javascript from Dotnet

首先定义好js方法

csfunc.js

window.csfunc = {
    appendHtml: function (id, html) {
        document.getElementById(id).innerHTML = html;
    }
};

添加js引用

<script src="csfunc.js"></script>

使用

在razor中注入js

@inject IJSRuntime JS

在cs中调用

using Microsoft.JSInterop; // 添加JsInterop的引用

// InvokeVoidAsync(函数名，参数[])
await JS.InvokeVoidAsync("csfunc.appendHtml", arg1,arg2 );

---

嗯，调用js很简单，但是觉得这种基础的东西微软应该有封装吧。想到之前看demo项目时，好像在layout看到过类似的实现，再看下

嗯，是这个了，那么看下如何通过 RenderFragment 实现吧

RenderFragment

RenderFragment 表示 UI的内容部分，可以生产HTML片段。具体说明可以看下cnblog上的这篇 RenderFragment RenderTreeBuilder，项目中使用的很简单，此处只记录下使用方式

在razor中，可以写在 {}中，比如

<div>@TestRenderFragment</div>
{
    TestRenderFragment = @111<strong>222</strong>333
}

这样，222就是加粗的显示了

或者，分离写，写到C#代码中，这样就需要用到RenderTreeBuilder的AddMarkupContent了

TestRenderFragment = (builder) => builder.AddMarkupContent(0, "111<strong>222</strong>333");

两个的实现效果是一样的。

Hybird blazor

通过 MobileBlazorBindings 实现，支持Android,IOS，MACOS，Windows.

install template（目前还是预览版0.5.50，使用时可以nuget先查下是否有新版）

dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.5.50-preview

create project

dotnet new blazorhybrid -o CheckKeywordsMobile

可以看下项目结构

CheckKeywordsMobile是一个类库，相当于Xamarin的Form层，其中的WebUI与Blazor项目一样，而其他各个项目都是引用了CheckKeywordsMobile，又包括了各自的配置文件（比如Android的mainfest.xml），或者单独的引用包（比如Windows项目是通过WebView2 实现）

最近.NET 6发布了Maui，只看了Hanselman的连线视频，还没具体实践，感兴趣的可以看下（那个hot reload 有点酷）

tips

之前没写过xamarin的项目，有遇到几个问题，记录下

1. Android 支持http

   从 Andorid 9(API Level 28) , http 默认是不支持的，为方便调试，可以开启

   add this attribute in {Your project name}.Android\Properties\AndroidManifest.xml

       <application android:label="CheckKeywords.Xamarin.Android" 
       android:theme="@style/MainTheme" 
   +    android:usesCleartextTraffic="true" 
       ></application>

2. index.html 文件在各个项目下，需要单独修改（添加引用的css文件）

3. 调用浏览器打开链接(windows 是webview2实现，这部分需要兼容)

   <a href="#" @onclick='() => Launcher.OpenAsync("url")'> href</a>

4. IOS 模拟器调试时还是需要一台 MAC 主机，需要Xcode环境，需提前准备(可参考：Debugging Xamarin.iOS Apps)，真机调试更为复杂，我只试了模拟器，想真机调试的可以看下这篇：使用 Xamarin 在 iOS 真机上部署应用进行调试

REF

• CheckKeywords:校验你的接口参数中是否使用了其他语言的关键字/保留字
• lazy load assemblies
• Webassembly performance best practices
• Ant Design
• Ant Design Blazor
• Ant Design Blazor 快速上手
• call Javascript from Dotnet
• RenderFragment RenderTreeBuilder
• RenderTreeBuilder的AddMarkupContent
• mobile-blazor-bindings devblog