• 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:

    最好是文本写在标签中。

    尺寸用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!!!

    例子:

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

  • 相关阅读:
    【LVS】lvs的四种模式的区别是什么?
    2. selenium学习
    【java web】【瑞吉外卖javaweb】踩坑贴不断更新中...
    C++的Odyssey之旅——STL
    Java全栈开发第一阶段--01.Java基础编程(基本语法-进制)
    最基础的协同过滤介绍
    java计算机毕业设计综合测评系统源码+数据库+系统+部署+lw文档
    编程竞赛之哈希算法应用
    python常用基础笔记
    Servlet学习笔记2
  • 原文地址:https://blog.csdn.net/qq_63053996/article/details/133586071