GraceUI相关的 知识

调试工具:UniApp提供了一些调试工具和插件,如uni-app-cli、调试器等,可以帮助你更好地定位和解决问题。同时,使用浏览器的开发者工具或模拟器的调试功能,可以更直观地观察页面效果和调试代码。

对于 GraceUI 的普通版本和 nvue 版本的选择,可以根据以下因素进行考虑:

功能需求:如果你的应用需要使用一些高级功能或者复杂的交互逻辑,推荐使用 GraceUI 的普通版本。普通版本的组件实现方式更接近 Vue 组件,支持完整的 Vue 模板语法和生命周期函数,功能较全面。

平台适配性:如果你的应用需要在多个平台上运行,包括 Web、小程序等,推荐使用 GraceUI 的普通版本。它基于 Vue 组件开发,具备良好的跨平台能力。

性能要求:如果你对应用的性能有较高的要求,特别是需要在微信小程序、百度小程序等原生平台上运行,建议选择 GraceUI 的 nvue 版本。nvue 版本基于原生组件实现,具有较高的性能和更接近原生应用的体验。

需要注意的是,nvue 版本由于依赖原生平台的支持,在某些高级功能和兼容性方面可能存在一些限制。

综上所述,如果你的应用需求相对简单且性能要求不是很高,可以选择 GraceUI 的普通版本;如果需要更好的性能和原生应用体验,并且目标平台是原生小程序,可以选择 GraceUI 的 nvue 版本。


Vue,react:h5 react native:ios android 原生转化

Flutter 原生转化(精)

Weex,h5,app(ios,android) 原生转化/ webview。双渲染引擎。

Uniapp: 在 App 端,如果使用 vue 页面,则使用 webview 渲染, 性能相对较低,可能出现页面卡顿或加载延迟的情况, WebView 可以在 Android 和 iOS 平台上运行,但需要编写不同平台的代码和适配。

如果使用 nvue 页面(native vue 的缩写),则使用原生渲染。一个 App 中可以同时使用两种页面,比如首页使用 nvue,二级页使用 vue 页面。虽然 nvue 也可以多端编译,输出 H5 和小程序,但 nvue 的 css 写法受限,所以如果你不开发 App,那么不需要使用 nvue。

1 使用 vue 模式进行多端开发,使用 nvue 优化 app 端体验 [ 推荐 ];
2 只开发 app 时 使用 nvue 开发;


具体的知识:

Nvue:

最好是文本写在<view>标签中。

尺寸用rpx,px.

默认是flex竖向布局。

不支持背景图片,不支持阴影,

仅支持类选择器。

字体图标,unicode形式。

|--------------------|--------------|----------------------|
| 样式名称 | 定义位置 | 作用 |
| .gui-text | 皮肤样式文件 | 规范通用文本、尺寸、行高及颜色 |
| .gui-text-small | 皮肤样式文件 | 规范通用小字体、尺寸及行高 |
| .gui-h1 ~ .gui-h6 | 皮肤样式文件 | 规范标题文本尺寸 |
| .gui-text-left | 核心样式文件 | 文本左对齐 |
| .gui-text-center | 核心样式文件 | 文本居中对齐 |
| .gui-text-right | 核心样式文件 | 文本右对齐 |
| .gui-ellipsis | 核心样式文件 | 文本溢出省略 ( nvue 溢出隐藏 ) |
| .gui-bold | 核心样式文件 | 文本加粗 |
| .gui-line-through | 核心样式文件 | 贯穿线 ( 删除线 ) |
| .gui-underline | 核心样式文件 | 下划线 |
| .gui-italic | 核心样式文件 | 文本倾斜 |
| .gui-indent | 皮肤样式文件 | 文本缩进 56rpx |

颜色:

/GraceUI5/css/colors.css。去文件里自己找。

定位:

|------------------|--------------------------------------------------|--------------------------------------------------|
| 属性名称 | 样式值 | 作用 |
| .gui-relative | position:relative; | 声明 view position:relative,一般用于 absolute 元素的父级元素。 |
| .gui-absolute-lt | position:absolute; z-index:2; left:0; top:0; | absolute 左上 |
| .gui-absolute-rt | position:absolute; z-index:2; right:0; top:0; | absolute 右上 |
| .gui-absolute-lb | position:absolute; z-index:2; left:0; bottom:0; | absolute 左下 |
| .gui-absolute-rb | position:absolute; z-index:2; right:0; bottom:0; | absolute 右下 |
| .gui-fixed-lt | position:fixed; z-index:2; left:0; top:0; | fixed 左上 |
| .gui-fixed-rt | position:fixed; z-index:2; right:0; top:0; | fixed 右上 |
| .gui-fixed-lb | position:fixed; z-index:2; left:0; bottom:0; | fixed 左下 |
| .gui-fixed-rb | position:fixed; z-index:2; right:0; bottom:0; | fixed 右下 |

布局:flex!!!

例子:

<button type="default" class="gui-button gui-bg-primary">

<text class="gui-icons gui-color-white gui-button-text"></text>

</button>

可以自己再定义样式,页内或者标签内,然后调用以调整细节!!!!。

相关推荐
雨季6661 小时前
Flutter 三端应用实战:OpenHarmony 简易“动态内边距调节器”交互模式深度解析
javascript·flutter·ui·交互·dart
北极糊的狐4 小时前
光标放在引入的xxx组件行(import { xxx } from ‘element-ui‘;)出现标黄,显示报错:无法解析符号 ‘xxx‘ 解决办法
ui
子春一5 小时前
Flutter for OpenHarmony:构建一个 Flutter 习惯打卡应用,深入解析周视图交互、连续打卡逻辑与状态驱动 UI
flutter·ui·交互
我的xiaodoujiao6 小时前
使用 Python 语言 从 0 到 1 搭建完整 Web UI自动化测试学习系列 44--将自动化测试结果自动推送至钉钉工作群聊
前端·python·测试工具·ui·pytest
UI设计兰亭妙微8 小时前
UI 设计新范式:从国际案例看体验与商业的融合之道
人工智能·ui·b端设计
子春一8 小时前
Flutter for OpenHarmony:构建一个 Flutter 天气卡片组件,深入解析动态 UI、响应式布局与语义化设计
javascript·flutter·ui
雨季6668 小时前
Flutter 三端应用实战:OpenHarmony “极简文本行数统计器”
开发语言·前端·flutter·ui·交互
布兰妮甜8 小时前
Photoshop中通过图层混合模式实现图像元素透明度渐变过渡的完整指南
人工智能·ui·生活·photoshop·文化
AIGCmitutu8 小时前
Photoshop抠图插件2026选择指南,Ps抠图插件哪个好用?
人工智能·ui·ai绘画·photoshop·ps
雨季6668 小时前
Flutter 三端应用实战:OpenHarmony 简易“动态字体大小调节器”交互模式深度解析
开发语言·flutter·ui·交互·dart