当前位置: 首页 > news >正文

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>

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

http://www.lryc.cn/news/185629.html

相关文章:

  • 三十二、【进阶】hash索引结构
  • 如果有一天AI能自主编程了,程序员还有前途吗?
  • 网络安全:个人信息保护,企业信息安全,国家网络安全的重要性
  • 自动驾驶学习笔记(二)——Apollo入门
  • Flask 进行 Web 开发时,常见的错误
  • 【项目】5.1阻塞和非阻塞、同步和异步 5.2Unix、Linux上的五种IO模型
  • Unity可视化Shader工具ASE介绍——3、ASE的Shader类型介绍
  • 国内手机安装 Google Play 服务 (GMS/Google Mobile Services)
  • 数据结构与算法-(7)---栈的应用-(4)后缀表达式求值
  • [VIM]spcaevim
  • Android中的RxJava入门及常用操作符
  • 【数字化转型】10大数字化转型能力成熟度模型03
  • 【算法与数据结构】--前言
  • R²决定系数
  • 软件工程与计算总结(一)软件工程基础
  • SpringBoot-黑马程序员-学习笔记(一)
  • Apache Tomcat安装、运行
  • 聊聊分布式架构05——[NIO基础]BIO到NIO的演进
  • 聊天、会议、多媒体一体化:多平台支持的即时通讯系统 | 开源日报 No.44
  • 收录一些常见的算法题型
  • Node-RED系列教程-25node-red获取天气
  • Rust中的枚举和模式匹配
  • 好物周刊#19:开源指北
  • 分布式数据库(林子雨慕课课程)
  • 使用UiPath和AA构建的解决方案 3. CRM 自动化
  • 【C++设计模式之状态模式:行为型】分析及示例
  • 微信小程序使用路由传参和传对象的方法
  • 中国创可贴市场研究与未来预测报告(2023版)
  • 水库安全监测方案(实时数据采集、高速数据传输)
  • vue项目 ueditor使用示例