小程序的页面结构与路由设计

微信小程序的页面结构与路由设计直接影响用户体验和开发效率。合理的目录组织、页面配置和跳转逻辑能够提升性能，降低维护成本，同时满足复杂的业务场景需求。

页面结构的基本组成

小程序的页面结构通常由四个文件组成，存放在pages目录下的独立文件夹中：

1. WXML：页面结构文件，类似HTML
2. WXSS：页面样式文件，类似CSS
3. JS：页面逻辑文件
4. JSON：页面配置文件

典型目录结构示例：

pages/
  home/
    home.wxml
    home.wxss
    home.js
    home.json
  user/
    user.wxml
    user.wxss
    user.js
    user.json

路由配置与页面注册

小程序的路由系统基于app.json中的pages数组进行配置。数组的第一个元素默认为首页，后续页面按需添加：

{
  "pages": [
    "pages/home/home",
    "pages/user/user",
    "pages/detail/detail"
  ],
  "window": {
    "navigationBarTitleText": "示例小程序"
  }
}

页面注册时需要调用Page()函数：

// home.js
Page({
  data: {
    message: 'Hello World'
  },
  onLoad() {
    console.log('页面加载')
  }
})

路由跳转方式

小程序提供多种路由API，适用于不同场景：

1. 保留当前页面跳转

wx.navigateTo({
  url: '/pages/detail/detail?id=123'
})

2. 关闭当前页面跳转

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

3. 跳转到Tab页

wx.switchTab({
  url: '/pages/user/user'
})

4. 页面返回

wx.navigateBack({
  delta: 1  // 返回层数
})

动态路由与参数传递

路由参数通过URL的query字符串传递，在目标页面的onLoad生命周期中获取：

// 跳转时传递参数
wx.navigateTo({
  url: '/pages/detail/detail?id=123&type=news'
})

// 目标页面接收参数
Page({
  onLoad(options) {
    console.log(options.id)    // 输出123
    console.log(options.type) // 输出news
  }
})

页面栈管理

小程序维护着页面栈，可通过API获取和操作：

// 获取当前页面栈
const pages = getCurrentPages()
// 获取前一页实例
const prevPage = pages[pages.length - 2]
// 向前一页传递数据
prevPage.setData({ refresh: true })

分包加载策略

当项目体积较大时，可采用分包机制优化加载速度：

{
  "pages": [
    "pages/main/home"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/category",
        "pages/search"
      ]
    }
  ]
}

页面生命周期与路由关系

页面生命周期与路由行为密切相关：

Page({
  onLoad() {},     // 页面加载
  onShow() {},     // 页面显示
  onReady() {},    // 页面初次渲染完成
  onHide() {},     // 页面隐藏
  onUnload() {}    // 页面卸载
})

路由拦截与权限控制

通过封装路由方法实现全局权限检查：

// utils/router.js
const authPaths = ['/pages/user/user']

function navigateTo(url) {
  if (authPaths.includes(url)) {
    checkLogin().then(() => {
      wx.navigateTo({ url })
    })
  } else {
    wx.navigateTo({ url })
  }
}

页面间通信方式

除路由参数外，还可通过以下方式通信：

1. 全局变量：

// app.js
App({
  globalData: {
    sharedInfo: null
  }
})

// 设置数据
getApp().globalData.sharedInfo = { key: 'value' }

2. 事件总线：

// 创建事件监听
const event = getApp().globalEvent
event.on('dataUpdate', this.handleUpdate)

// 触发事件
event.emit('dataUpdate', { newData: 123 })

页面预加载优化

利用preloadRule配置提前加载关键资源：

{
  "preloadRule": {
    "pages/home/home": {
      "network": "wifi",
      "packages": ["packageA"]
    }
  }
}

路由动画配置

通过CSS实现自定义转场效果：

/* 入场动画 */
.page-enter {
  transform: translateX(100%);
  opacity: 0;
}

.page-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: all 300ms;
}

路由错误处理

捕获并处理路由跳转异常：

wx.navigateTo({
  url: 'invalid/path',
  fail(err) {
    console.error('路由跳转失败', err)
    wx.showToast({ title: '页面不存在' })
  }
})

多端路由兼容方案

使用条件编译处理不同平台的路由差异：

// #ifdef MP-WEIXIN
wx.navigateTo({ url })
// #endif

// #ifdef H5
window.location.href = url
// #endif

页面滚动位置记忆

返回页面时恢复滚动位置：

Page({
  data: {
    scrollTop: 0
  },
  onPageScroll(e) {
    this.data.scrollTop = e.scrollTop
  },
  onShow() {
    wx.pageScrollTo({ scrollTop: this.data.scrollTop })
  }
})

路由性能监控

通过自定义方法收集路由性能数据：

const startTime = Date.now()
wx.navigateTo({
  url: '/pages/detail/detail',
  complete() {
    const cost = Date.now() - startTime
    reportAnalytics('navigate_cost', { cost })
  }
})