随笔分类 - MAUI/Blazor/Vue/Uniapp
前端开发框架
摘要：本章节内容较多，目录如下： 基本概念 数据绑定的五种实现方式 绑定路径Path 绑定模式BindingMode 绑定数据源的字符串格式化StringFormat 绑定源设置为自身或上级RelativeSource 绑定源不存在链接属性的回退值或链接属性值为Null时的替换值 编译绑定 一、基本概念
阅读全文
摘要：PS1：点击查看Blazor中C#和JS互操作 PS2：Vue中，可以直接使用LocalStorage和IndexedDB对象，本章节案例主要以Blazor的使用为主 一、Storage对象 1、浏览器内置的键值对存储。locallStorage理论上永久保存在浏览器中（除非主动清除），而Sessi
阅读全文
摘要：一、什么是Markup语法 XAML可以使用等效的C#后台代码，即可以用C#写UI。但是，C#代码还稍显繁琐，所以在C#代码基础上，由CommutityToolkit提供了Markup扩展包，可以使用更加流畅的C#语法来写UI。通过如下案例来对比一下三者差异： <!--XAML--> <Conten
阅读全文
摘要：MAUI支持跨平台和多设备，可以针对不同平台（Android、iOS、WinUI、MacCatalyst、Tizen），或不同设备（Phone、Tablet、Desktop、TV、Watch），定制不同的UI，应用根据运行环境，自动适应。主要通过OnPlatform和OnIdiom两个标记扩展实现。
阅读全文
摘要：一、样式的定义和使用 Style类似于前端的CSS，可以对视觉元素的样式进行有组织的管理，大量减少代码和重复工作量。Style需要结合资源字典使用，将Style定义在资源字典中，元素通过StaticResource或DynamicResource引用样式资源。 二、引用样式资源的匹配原则 1、元素使
阅读全文
摘要：每个派生自VisualElement或Application的对象，都有一个Resources属性，属性值为Dictionary<string,object>类型的集合对象，这些集合对象可作为资源，提供给元素及其在控件树中的子元素使用。当元素引用资源时，根据键名延着控件树往上匹配。如果控件树中，有多
阅读全文
摘要：x命名空间，又叫XAML命名空间，作用于XAML的编译过程。我们知道，XAML代码，最终通过XAML编译器，编译为中间代码IL，并与后台C#代码的编译结果合并。而在编译的过程中，经常需要告诉编译器一些重要信息，比如应该与哪个C#类的编译结果合并、XAML声明的元素是public还是private、元
阅读全文
摘要：标记扩展，本质上是IMarkupExtension或者IMarkupExtension<T>接口的实现类。这两个接口，均定义了ProvideValue方法。注意，IMarkupExtension<T>继承自IMarkupExtension，如果定义的标记扩展类，需要实现IMarkupExtensio
阅读全文
摘要：标记扩展，使属性值可以引用其他源的值或对象，比如引用资源字典、引用其它控件的属性值、绑定ViewModel类属性等。标记扩展的语法有大括号{}和尖括号<>两种方式，但x:Array比较特殊，只能使用尖括号。下个章节，深入学习标记扩展后，将能够理解两者区别。为方便学习和记忆，将标记扩展归纳为以下几类：
阅读全文
摘要：一、XAML（MAUI的XAML）和HTML 两者相似，都是标签语言组成的树形文档。每个标签元素，可视为一个对象，通过标签属性（Attribute），为对象的属性（Property）、事件等成员赋值。此处特别将Attribute和Proterty提出来，两者中文都叫属性，但Attribute对应于U
阅读全文
摘要：MAUI是微软.NET技术栈的跨端UI框架，2022年11月，和.NET7一起正式发布，未来能否和flutter一战？ MAUI使用XAML标记语言进行开发，相对HTML而言，更加复杂和繁琐，但功能更加全面严谨。MAUI内部，通过Handler机制（面向接口编程），将MAUI的控件映射到各平台的Na
阅读全文
摘要：C#和JS互操作的基本语法是比较简单的，但小知识点特别多，同时，受应用加载顺序、组件生命周期以及参数类型的影响，会有比较多坑，需要耐心的学习。在C#中调用JS的场景会比较多，特别是在WASM模式下，由于WebAssembly的限制，很多时候，还是需要借助JS去控制DOM或BOM，比如WebStora
阅读全文
摘要：注：本节涉及到前后端，这个系列的对比学习，还是专注在前端Vue和Blazor技术，所以就不撸码了，下面主要学习概念。 我们知道，Http是无状态协议，客户端请求服务端，认证一次后，如果再次请求，又要重新认证，因为对服务端来说，客户端的每次请求都是无差别的！另外，服务端的授权体系，一般使用基于RBAC
阅读全文
摘要：前端持久化保存数据的方式，主要包括Cookie，Session，jwt，LocalStorage，SessionStorage，IndexedDB/WebSQL，SQLite（APP端）。我们首先简单的理清一下它们的概念和区别： Cookie、Session、jwt：这三者紧密相连，是客户端和服务端
阅读全文
摘要：Blazor没有提供状态共享的方案，虽然依赖注入可以实现一个全局对象，这个对象可以拥有状态、计算属性、方法等特征，但并不具备响应式。比如，组件A和组件B，都注入了这个全局对象，并引用了全局对象上的数据。我们通过组件A，修改全局对象的数据，全局对象上的数据更新，但引用了这个数据的组件B，并不会自动更新
阅读全文
摘要：前面章节，我们学过了父传子、子传父、祖传孙等，这些方法都是在组件树中进行数据的传递和管理，如果要在兄弟之间，或者远亲关系的组件之间进行数据的传递，利用之前的知识点，会是一件相当棘手的事情。 这个时候，如果我们跳出组件树，独立于组件树之外，创建一个用来存储数据的对象（称它为存储库），组件树中的所有组件
阅读全文
摘要：状态是什么？首次接触这个概念时，很多人会懵，数据是状态吗？ 状态，应该从面向对象的角度来理解。比如我们在介绍一个具体的人时，会说“他叫小明，今年18岁”，“他”是一个具体的对象，有“姓名”和“年龄”两个属性，而“姓名=小明，年龄=18”，就是“他”这个对象的状态。你说，状态就是数据，也不能说你错，但
阅读全文
摘要：一、Vue的组件生命周期，理解和使用都比较简单，只说知识点 1、Vue的组件生命周期，总共四个过程： 组件初始化（beforeCreate/created），逻辑层数据处理 组件挂载（beforeMount/Mounted），首次渲染到视图，形成虚拟DOM 组件数据更新（beforeUpdate/u
阅读全文
摘要：现代前端框架的核心，是数据驱动，绝大多数时候，我们不需要直接去操作DOM，而是通过改变数据，由框架自动完成DOM的渲染。但框架还是给我们留了后门，使我们可以拿到组件的引用。Vue使用ref属性，Blazor则使用@ref指令。 1、我们先看一个Vue的简单例子，使用很简单： //父组件 <templ
阅读全文
摘要：一、基本理解：首次接触“生命周期”这个名词，是比较晦涩的，Vue中有生命周期钩子，而Blazor则是虚方法重写，容易蒙。所以，我尝试从初学者的角度来阐述一下。 我们在基础部分已经知道，组件有两部分组成，一是逻辑层，有数据和方法（方法本质上也是数据）；二是视图层，虽然有自定义组件，但拆到底，还是HTM
阅读全文
