uniapp多页面搭建

多页面配置基础

在uniapp中创建多页面应用，需在pages.json中配置页面路径。每个页面需要独立配置路径、样式和导航栏信息。示例配置如下：

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

页面跳转方法

使用uni.navigateTo实现页面跳转，保留当前页面并打开新页面。在需要跳转的按钮或事件中调用：

uni.navigateTo({
  url: '/pages/detail/detail'
})

使用uni.redirectTo关闭当前页面并跳转至新页面：

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

页面间传参

通过URL传递参数，在目标页面的onLoad生命周期中接收：

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

// 接收参数
onLoad(options) {
  console.log(options.id) // 输出123
  console.log(options.name) // 输出test
}

分包加载优化

对于大型项目，使用分包加载减少首次加载时间。在pages.json中配置：

{
  "subPackages": [
    {
      "root": "subpackage",
      "pages": [
        {
          "path": "subpage/subpage",
          "style": {}
        }
      ]
    }
  ]
}

条件编译处理平台差异

通过条件编译处理不同平台的页面差异，示例：

// #ifdef H5
console.log('仅在H5平台执行')
// #endif

// #ifdef MP-WEIXIN
console.log('仅在微信小程序平台执行')
// #endif

全局样式管理

在App.vue中定义全局样式，所有页面均可继承：

/* App.vue */
page {
  background-color: #f5f5f5;
  font-size: 16px;
}

页面生命周期注意事项

注意各页面生命周期的触发时机：

• onLoad：页面加载时触发
• onShow：页面显示时触发
• onReady：页面初次渲染完成时触发
• onHide：页面隐藏时触发
• onUnload：页面卸载时触发

页面通信方案

使用全局事件总线实现页面间通信：

// 发送事件
uni.$emit('update', {data: 'new data'})

// 接收事件
uni.$on('update', function(data) {
  console.log(data)
})

页面返回传值

使用uni.navigateBack返回并传递数据：

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

// 返回时触发
const pages = getCurrentPages()
const prevPage = pages[pages.length - 2]
prevPage.$vm.returnData = '返回数据'
uni.navigateBack()

页面预加载处理

在onLoad前使用uni.preloadPage预加载页面：

uni.preloadPage({
  url: '/pages/detail/detail'
})