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>

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