aardio编程之基于低代码平台开发WebView2应用

一、WebView2的概述

1、WebView2 基于性能强悍的 Edge(Chromium) 内核。

2、调用 WebView2 生成的软件体积很小。所有基于 WebView2 的软件可以共享同一个 WebView2 组件。Win11 已经内置 WebView2 组件,其他操作系统也可以快速地自动安装 WebView2 。

3、WebView2 接口非常简洁,嵌入其他窗口界面也非常方便。

总结一句话就是:WebView2 简单、好用、生成软件体积小。

二、开发WebView2的入门介绍

入门介绍:点击这里

三、aardio开发WebView2应用简单说明

1、使用HTML和CSS进行页面设计

aardio开发WebView2应用很方便,设置一个窗口,如form、static、custom控件,在窗口中可以直接写入HTML,也可以引用本地文件。

2、业务逻辑的设计,可以使用方法包括Javascript内部函数的实现、Javascript调用aardio函数,aardio回调Javascript函数。既可以本地业务逻辑实现,也可以与后台系统对接。

2.1 Javascript的内部函数示例

Javascript内部函数

2.2 Javascript调用aardio函数示例

定义aardio函数
调用aardio函数

2.3 aardio回调Javascript函数示例

aardio调用Javascript函数

四、低代码平台amis的概述

amis 框架作为低代码领域的代表,与传统前端框架(如 React、Vue、Angular)以及其他低代码工具相比,有其独特的优势,主要体现在开发效率、使用门槛和业务适配等方面。以下是其核心优势的对比分析:

1. 开发模式:JSON 配置 vs 代码编写

传统框架(React/Vue 等):需要编写大量 HTML、CSS、JavaScript 代码,涉及组件封装、状态管理、DOM 操作等细节,对前端技能要求高。

amis:通过 JSON 配置描述页面,无需关注 DOM 操作、样式适配等底层实现,开发者只需关注「页面结构」和「业务逻辑」。例如,一个表单页面用 amis 只需几十行 JSON 配置,而用 React 可能需要编写多个组件和处理复杂状态。

优势:极大降低前端开发门槛,后端开发者、产品经理也能参与页面开发,实现「跨角色协作」。

2. 开发效率:快速交付 vs 从 0 构建

传统框架:开发一个包含表格、表单、筛选的后台页面,需要设计组件结构、实现交互逻辑、处理数据流转,通常需要数天时间。

amis:内置大量「开箱即用」的业务组件(如 crud 表格、form 表单、modal 弹窗等),这些组件已经封装了分页、搜索、校验、提交等通用逻辑。例如,一个带筛选、分页、编辑功能的表格,用 amis 只需配置 api 和 columns 即可,几小时内就能完成。

优势:开发效率提升 50% 以上,尤其适合需求频繁变更、需要快速上线的业务系统。

3. UI 一致性与标准化

传统框架:团队需要维护一套组件库(如 Ant Design),但不同开发者可能有不同的实现方式,容易导致页面风格、交互逻辑不一致。

amis:所有组件由框架统一提供,样式、交互逻辑完全标准化。例如,按钮的点击反馈、表单的校验提示、表格的排序交互等,无需额外配置即可保持一致。

优势:减少「样式统一」「交互规范」的沟通成本,尤其适合中大型团队协作。

4. 响应式与兼容性

传统框架:需要手动处理响应式布局(如媒体查询),并针对不同浏览器做兼容性适配,工作量大。

amis:所有组件默认支持响应式,自动适配 PC、平板等设备;框架内部已处理主流浏览器的兼容性问题。

优势:省去响应式和兼容性开发的时间,专注业务逻辑。

五、aardio基于amis开发应用

1、代码示例

1.1 amis配置生产UI

amis配置生产UI

1.2 HTML页面引入amis并渲染

引入amis并渲染

1.3 演示效果

演示效果
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容