uniapp学习笔记

属性知识点

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台，其它平台均存在的代码（注意if后面有个n）
#ifdef H5 \|\| MP-WEIXIN 需条件编译的代码 #endif	在 H5 平台或微信小程序平台存在的代码（这里只有\|\|，不可能出现&&，因为没有交集）

%PLATFORM% 可取值：

值	生效条件	版本支持
VUE3	uni-app js引擎版用于区分vue2和3，详情	HBuilderX 3.2.0+
VUE2	uni-app js引擎版用于区分vue2和3，详情
UNI-APP-X	用于区分是否是uni-app x项目详情	HBuilderX 3.9.0+
uniVersion	用于区分编译器的版本详情	HBuilderX 3.9.0+
APP	App
APP-PLUS	uni-app js引擎版编译为App时
APP-PLUS-NVUE或APP-NVUE	App nvue 页面
APP-ANDROID	App Android 平台详情
APP-IOS	App iOS 平台详情
APP-HARMONY	App HarmonyOS Next 平台
H5	H5（推荐使用 `WEB`）
WEB	web（同`H5`）	HBuilderX 3.6.3+
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	抖音小程序
MP-LARK	飞书小程序
MP-QQ	QQ小程序
MP-KUAISHOU	快手小程序
MP-JD	京东小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

支持的文件：

注意：

条件编译是利用注释实现的，在不同语法里注释写法不一样，js/uts使用 // 注释、css 使用 /* 注释 */、vue/nvue/uvue 模板里使用 ；
条件编译APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后面出了APP-NVUE ；
对于未定义平台名称，可能是名称写错了，也可能是低版本HBuilderX还不认识这个平台。此时的条件编译，#ifdef 中的代码不会生效，而 #ifndef 中的代码会生效；
使用条件编译请保证编译前和编译后文件的语法正确性，即要保障无论条件编译是否生效都能通过语法校验。比如：json文件中不能有多余的逗号，js中不能重复导入；

1
2
3

display: 
grid;gap: 15rpx;
grid-template-columns: repeat(3,1fr);

这段CSS代码是用来设置一个网格布局的样式。下面是对这段代码的详细解释：

display: grid;：这一行指定了元素的显示方式为网格布局（Grid Layout）。网格布局是一种二维布局系统，它允许开发者以行和列的形式来布局网页内容。
gap: 15rpx;：这一行设置了网格项（grid items）之间的间隙。15rpx可能是一个特定框架或平台（如微信小程序）中的单位，而不是标准的CSS单位。在标准的CSS中，通常会使用px（像素）、em、rem、%等单位。如果rpx是特定框架的单位，它可能用于确保在不同屏幕尺寸上保持一致的视觉比例。
grid-template-columns: repeat(3,1fr);：这一行定义了网格的列布局。repeat(3,1fr)表示创建三列，每列的宽度相同，为1个分数单位（fractional unit，简称fr）。fr是CSS Grid布局中的一个单位，用于在网格容器内分配空间，它允许你按照比例分配空间，而不是使用固定的像素值。在这个例子中，三列将平分网格容器的宽度。

综上所述，这段CSS代码创建了一个三列的网格布局，每列宽度相等，列与列之间有15rpx的间隙。这种布局非常适合用于创建响应式网页布局，特别是当你希望内容能够根据不同屏幕尺寸自适应调整时。不过，需要注意的是rpx单位可能不是标准的CSS单位，而是特定框架或平台特有的单位。

display: flex;：这个属性将容器的显示方式设置为弹性盒子（flexbox）。这意味着容器内的子元素将使用flexbox模型进行布局，允许更灵活的对齐和分布方式。
align-items: center;：这个属性用来在交叉轴（cross-axis）上对齐容器内的子元素。在默认的flex布局方向（即主轴为水平方向）下，交叉轴是垂直方向。因此，align-items: center;会将所有子元素在容器的垂直方向上居中对齐。
justify-content: center;：这个属性用来在主轴（main-axis）上对齐容器内的子元素。在默认的flex布局方向下，主轴是水平方向。因此，justify-content: center;会将所有子元素在容器的水平方向上居中对齐。

综上所述，这段CSS代码的作用是将容器内的所有子元素在水平和垂直方向上都居中对齐。这种布局方式常用于创建居中的卡片、提示框或任何需要在页面上居中的元素。

在CSS（层叠样式表）中，solid 是一个用于定义边框（border）样式的关键字。具体来说，solid 表示边框是实线（不间断的直线）样式。它是边框样式属性（border-style）的可用值之一。

除了 solid 之外，border-style 属性还支持其他值，例如：

在uni-app中，padding 是一个用于设置元素内容与边框之间距离的CSS属性。这个属性在网页布局和元素样式设计中非常重要，它可以帮助你控制元素内部的空间，使内容更加美观和易于阅读。

你也可以单独为某个方向设置内边距，使用以下属性：

依次设置上、右、下、左四个方向的内边距。

1
2
3

.example {  
    padding: 10px 20px 30px 40px;  
}

可量尺寸

即时设计 - 可实时协作的专业 UI 设计工具 (js.design)

uniappVue3版本+咸虾米壁纸: uniappVue3版本基础demo及咸虾米壁纸项目的开源代码 - Gitee.com