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

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

本次更新内容

1.0->2.0

  • Blazor 升级至 .NET5
  • 使用 Antdesign Blazor UI库
  • 添加编程语言选择器
  • 校验结果,关键词、保留字 高亮
  • Hybrid Blazor apps
    • Android(已测试通过)
    • IOS(已在模拟器测试通过)
    • MACOS(未测试)
    • Windows(已测试通过)

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

.NET 5 blazor

修改 CheckKeywordsBlazor.csproj TargetFramework, 更新包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
-<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.

首次加载

img

第二次加载

img

可以看出,抛开其他类库不说,这几个自带的文件都有所增加,并没有预想的极限压缩到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 的企业级组件库

快速上手

添加包

1
dotnet add package AntDesign

注入

Program.cs

1
builder.Services.AddAntDesign();

_Imports.razor 添加引用

1
@using AntDesign

wwwroot/index.html 添加资源文件

1
2
3
<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 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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#部分,定义LanguageNamesSelectedLanguageNames ,并对应赋值即可

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

Blazor 稍微进阶的使用

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

highlignt

.Net 调用 js

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

MSDN call Javascript from Dotnet

首先定义好js方法

csfunc.js

1
2
3
4
5
window.csfunc = {
appendHtml: function (id, html) {
document.getElementById(id).innerHTML = html;
}
};

添加js引用

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

使用

在razor中注入js

1
@inject IJSRuntime JS

在cs中调用

1
2
3
4
using Microsoft.JSInterop; // 添加JsInterop的引用

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

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

renderFragment

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

RenderFragment

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

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

1
2
3
4
<div>@TestRenderFragment</div>
{
TestRenderFragment = @111<strong>222</strong>333
}

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

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

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

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

Hybird blazor

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

install template(目前还是预览版0.5.50,使用时可以nuget先查下是否有新版)

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

create project

1
dotnet new blazorhybrid -o CheckKeywordsMobile

可以看下项目结构

img

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

    1
    2
    3
    4
        <application android:label="CheckKeywords.Xamarin.Android" 
    android:theme="@style/MainTheme"
    + android:usesCleartextTraffic="true"
    ></application>
  2. index.html 文件在各个项目下,需要单独修改(添加引用的css文件)

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

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

REF

评论