uniapp页面管理

uniapp页面管理基础概念

uniapp的页面管理基于Vue.js框架，采用单文件组件（SFC）形式组织页面。每个页面由.vue文件构成，包含模板、脚本和样式三部分。页面路由通过pages.json配置文件统一管理，无需手动编写路由规则。

页面配置方法

在pages.json中定义页面路径和窗口样式：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    }
  ]
}

页面跳转方式

navigateTo
保留当前页面，跳转到应用内某个页面：

uni.navigateTo({
  url: '/pages/detail/detail?id=1'
})

redirectTo
关闭当前页面，跳转到应用内某个页面：

uni.redirectTo({
  url: '/pages/login/login'
})

reLaunch
关闭所有页面，打开应用内某个页面：

uni.reLaunch({
  url: '/pages/index/index'
})

页面传参技巧

通过URL拼接参数传递数据：

// 发送方
uni.navigateTo({
  url: '/pages/detail/detail?id=1&name=test'
})

// 接收方
onLoad(options) {
  console.log(options.id) // 输出1
  console.log(options.name) // 输出test
}

复杂对象建议使用全局变量或Vuex管理：

// 通过Vuex存储
this.$store.commit('setDetailData', {id: 1, name: 'test'})
uni.navigateTo({url: '/pages/detail/detail'})

// 目标页面获取
computed: {
  detailData() {
    return this.$store.state.detailData
  }
}

页面生命周期管理

uniapp页面生命周期包含Vue组件生命周期和特有的小程序生命周期：

export default {
  onLoad(options) {}, // 页面加载时触发
  onShow() {},       // 页面显示时触发
  onReady() {},      // 页面初次渲染完成时触发
  onHide() {},       // 页面隐藏时触发
  onUnload() {},     // 页面卸载时触发
  mounted() {}       // Vue生命周期钩子
}

页面通信方案

事件总线方式
创建全局事件监听和触发机制：

// main.js中创建EventBus
Vue.prototype.$EventBus = new Vue()

// 页面A发送事件
this.$EventBus.$emit('pageEvent', {data: 'value'})

// 页面B接收事件
this.$EventBus.$on('pageEvent', (data) => {
  console.log(data)
})

uni.$on/uni.$emit
跨页面事件通信方案：

// 页面A触发事件
uni.$emit('update', {msg: '数据更新'})

// 页面B监听事件
uni.$on('update', function(data) {
  console.log(data.msg)
})

页面栈管理技巧

获取当前页面栈信息：

const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
console.log(currentPage.route)

动态修改页面标题：

uni.setNavigationBarTitle({
  title: '新标题'
})

页面性能优化

启用分包加载减少首屏体积：

{
  "subPackages": [{
    "root": "packageA",
    "pages": [
      {
        "path": "page1",
        "style": {}
      }
    ]
  }]
}

使用组件按需加载：

components: {
  'lazy-component': () => import('@/components/lazy-component.vue')
}