uni-app基础语法（一）

news2024/10/21 9:51:19

我们今天的学习目标

基础语法
- 1. 创建新页面
- 2.pages配置页面
- 3.tabbar配置
- 4.condition 启动模式配置

基础语法

1. 创建新页面

在这里插入图片描述

2.pages配置页面

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现，配置项参考pageStyle

在这里插入图片描述

我们来通过style修改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有样式在这里插入图片描述

3.tabbar配置

在 Uni-app 中配置 tabBar（底部导航栏）是一个常见的需求。Uni-app 提供了便捷的配置方式，通过修改 pages.json 文件来配置 tabBar。以下是一个基本的配置示例：

打开 pages.json 文件：
这个文件通常位于项目的根目录下。
添加或修改 tabBar 配置：

{  
  "pages": [  
    {  
      "path": "pages/index/index",  
      "style": {  
        "navigationBarTitleText": "首页",  
        "navigationBarTextStyle": "white",  
        "navigationBarBackgroundColor": "#3cc51f",  
        "enableBackToRoot": true  
      }  
    },  
    {  
      "path": "pages/list/list",  
      "style": {  
        "navigationBarTitleText": "列表页",  
        "navigationBarTextStyle": "black",  
        "navigationBarBackgroundColor": "#ffffff",  
        "app-plus": {  
          "titleNView": false  
        }  
      }  
    },  
    {  
      "path": "pages/detail/detail",  
      "style": {  
        "navigationBarTitleText": "详情页",  
        "navigationBarTextStyle": "white",  
        "navigationBarBackgroundColor": "#ff0000",  
        "navigationBarHidden": "true"  
      }  
    }  
    // 可以继续添加更多页面配置  
  ],  
  // 其他配置，如 tabBar、globalStyle 等...  
}

配置说明

path：页面的路径，相对于项目的 pages 目录。例如，pages/index/index 表示 pages/index/ 目录下的 index.vue 文件。
style：页面的样式配置。
navigationBarTitleText：导航条标题文字。
navigationBarTextStyle：导航条标题文字颜色，可选值为 black 或 white。
navigationBarBackgroundColor：导航条背景颜色。
enableBackToRoot：是否允许点击返回按钮时，返回到应用的首页（根页面）。默认为 false。
navigationBarHidden：是否隐藏导航条。可选值为 true（隐藏）或 false（显示）。注意，在某些平台上，如小程序，隐藏导航条可能需要额外的配置。
app-plus：针对 App 平台（如 HBuilderX 打包的 App）的特定配置。例如，titleNView 可以用于自定义原生导航栏。

是不是不想看这样的文字(^o^)

属性	类型	是否必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，仅支持black/white	App 2.3.4+ 支持其他颜色值
list	Array	是		tab 的列表，详见 list 属性说明最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持

属性	类型	是否必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义String
text	String	是	tab 上按钮文字，在 5+APP 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为81px*81px，当postion 为 top时，此参数无效，不支持网络图片，不支持字体图标
selected I(大写的i) conPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为81px*81pX,当postion 为 top 时，此参数无效

注意事项

路径正确性：确保 path 指定的页面路径正确，且对应的 .vue 文件存在于该路径下。
样式兼容性：不同平台（如 H5、小程序、App）对样式的支持可能有所不同。因此，在配置样式时，需要注意各平台的兼容性。
动态路由：Uni-app 不直接支持动态路由，但可以通过编程方式实现页面的跳转和参数的传递。
tabBar 配置：如果需要在底部添加选项卡（tabBar），需要在 pages.json 中单独配置 tabBar 部分，并将需要作为选项卡页面的 path 添加到 tabBar.list 中。

通过以上配置，你可以在 Uni-app 中定义多个页面，并为每个页面设置不同的导航条样式和其他属性。
在这里插入图片描述