页面 page

官网介绍：https://uniapp.dcloud.io/collocation/pages

pages.json 页面配置

原本Vue 中一般使用Vue Router 管理页面和路由跳转。

而 Uni-App 中的所有页面，是通过 src 下的 pages.json 进行管理的，默认跳转的就是里面数组的第一个元素所表示的页面：

页面规范

按照规范，所有的页面 .vue 文件要放到 src下的 pages 文件夹。

新建一个文件夹，名字为页面的名字（如用户管理，可以起名user），这个页面的主vue文件，一般用 组件名称.vue（src/pages/user/user.vue），当然由你自己决定。

新增页面

只需要右键点击pages，点击新建页面即可。

可以选页面模板

创建好后会帮你增加文件夹和对应的.vue文件

同时帮你在 pages.json 里面注册

=====================

页面结构说明

顶部导航栏 navigationBar

主体页面

样式

页面背景色

page{
    background-color:#ddd;
}

底部导航 TabBar

底部导航就是几个按钮，主要用于切换主体页面要显示的内容。

官网说明：https://uniapp.dcloud.io/collocation/pages?id=tabbar

这里分两种：
1、小程序原生的
2、自定义的

1、小程序原生

原生的tabbar有且只有一个且在首页（pages.json 里的 pages 数组第一个页面就是首页）

官方说明，用原生的tabBar性能更优，除非满足不了需求，否则建议优先用原生的

开启

直接在 pages.json 里面新增一个”tabBar” 属性即可开启原生的。

配置按钮/样式

然后配置list，这个就是显示的按钮和对应跳转的页面。

只能配置最少2个、最多5个，按钮按数组的顺序排序。

还可以通过API动态设置tabBar功能，查看：https://uniapp.dcloud.io/api/ui/tabbar

生命周期

tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad

2、自定义

官方说明，除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义

H5端

H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用 custom-tab-bar组件 来自定义
https://uniapp.dcloud.io/component/custom-tab-bar

它仍然读取 pages.json 里配置的tabBar信息，
支持 pages.json 中 tabBar 相关配置（不支持 borderStyle ），
支持所有 tabBar 相关 API，例如设置 tab 徽标、显示红点、以及 switchTab 等。

需要用这个组件自己写，可以自定义位置和显示样式

<template>
    <view>
        <custom-tab-bar direction="horizontal" :show-icon="false" :selected="selected" @onTabItemTap="onTabItemTap" />
    </view>
</template>

普通自定义

使用view自行绘制tabBar。

如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示，所以这种情况建议使用单页方式。

单页方式，如果是复杂页面，应用性能会下降明显，需减少页面复杂度。

如果是App端，nvue单页的性能会显著高于vue页面

微信小程序

微信提供一直基于webview自定义tabBar的方案。
该功能体验不佳，不太推荐使用。

如果要使用，参考微信文档：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html

项目src目录下，创建 custom-tab-bar 目录，注意里边的代码是 .wxml、.wxss，不是 .vue，
uni-app编译器会直接拷贝该目录到微信小程序中。

二级页面

如需的tab，需自行编写view来实现。

一般二级页面更适合的导航是 segement组件，相当于web应用的标签页，查看 https://ext.dcloud.net.cn/plugin?id=54

=====================

页面栈

什么是栈？

就是往一个箱子里面放东西，先放进去的最后才能拿出来，你往箱子里面看，看到的永远是放在最上面的东西。

小程序也是一样，把页面当做东西，放在一个箱子里面，你永远看到的页面是最上层的，如下图。

页面栈层数是有上限的，目前小程序最高是10层。

官网介绍：https://uniapp.dcloud.io/frame?id=%e9%a1%b5%e9%9d%a2%e6%a0%88

页面路由跳转

路由跳转有两种方式：
1、 组件跳转
2、API 方法跳转

1、 组件跳转

官方文档：https://uniapp.dcloud.io/component/navigator

2、API 方法跳转

官方文档：https://uniapp.dcloud.io/api/router?id=navigateto