页面与路由

uni-app 教程 · 第 3 章 · 7 次浏览

uni-app 页面就是 Vue 单文件组件（.vue）：template 结构 + script 逻辑 + style 样式。页面路由靠 pages.json 配置。

pages.json

全局配置文件：pages 数组定义页面路径和顺序，第一个是首页；globalStyle 配导航栏；tabBar 配底部导航。

生命周期

onLoad（进入页面）、onShow（显示）、onHide（隐藏）、onUnload（销毁）——这是 uni 的页面级生命周期；onReady 等是 Vue 的。请求数据放 onLoad 或 onShow。

代码示例

// pages.json
{
  "pages": [
    { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } },
    { "path": "pages/cart/cart", "style": { "navigationBarTitleText": "购物车" } }
  ],
  "globalStyle": {
    "navigationBarBackgroundColor": "#33691E",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#F5F5F5"
  },
  "tabBar": {
    "list": [
      { "pagePath": "pages/index/index", "text": "首页" },
      { "pagePath": "pages/cart/cart", "text": "购物车" }
    ]
  }
}