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>

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

相关推荐
初九之潜龙勿用7 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
MediaTea8 小时前
七次课掌握 Photoshop:绘画与修饰
ui·photoshop
syj_11112 小时前
初识ArkUI
ui·arkts·arkui
芋芋qwq20 小时前
Unity UI射线检测 道具拖拽
ui·unity·游戏引擎
鸿蒙自习室21 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
大霞上仙1 天前
element ui table 每行不同状态
vue.js·ui·elementui
栈老师不回家1 天前
Element UI 组件库详解【Vue】
前端·vue.js·ui
郭梧悠1 天前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
wyh要好好学习2 天前
WPF数据加载时添加进度条
ui·wpf
code_shenbing2 天前
跨平台WPF框架Avalonia教程 三
前端·microsoft·ui·c#·wpf·跨平台·界面设计