路由系统

规则

在小程序项目中（个人习惯）：

• pages 目录用于存放主包/主页面。
  • 注：需要在 app.json / pages 字段中进行页面注册。
• subpackages 用于存放子包/子页面。
  • 注：需要在 app.json / subPackages 字段中进行页面注册。

app.json

/* prettier-ignore */
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "subPackages": [
    {
      "name": "apps1",
      "root": "subpackage/apps",
      "pages": [
        "xxx/index",
        "yyy/index"
      ]
    },
    {
      "name": "apps2",
      "root": "subpackage2/apps",
      "pages": [
        "xxx/index",
        "yyy/index"
      ]
    }
  ]
}

路由跳转

在小程序中实现页面跳转，有两种方式：

1. 声明式导航：navigator 组件。
2. 编程式导航：使用小程序 API。

声明式导航

<navigator url="/pages/index/index">跳转到首页</navigator>

编程式导航

• wx.navigateTo()：保留当前页面，跳转到应用内的某个页面，但是不能跳转到 tabbar 页面。
• wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面，但是不能跳转到 tabbar 页面。
• wx.switchTab()：跳转到 tabbar 页面，路径后不能带参数。
• wx.reLaunch()：关闭所有页面，打开到应用内的某个页面。
• wx.navigateBack()：关闭当前页面，返回上一页面或多级页面。

上拉加载

1. 在 app.json 或者 pages/*.json 中配置页面底部距离：onReachBottomDistance: 50，默认为 50。
2. 在 pages/*.js 中定义 onReachBottom 事件监听用户上拉加载。

下拉刷新

1. 在 app.json 或者 pages/*.json 中配置开启允许下拉：enablePullDownRefresh: true。
2. 在 pages/*.js 中定义 onPullDownRefresh 事件监听用户下拉刷新。

提示

可通过 <scroll-view> 组件对“上拉加载”、“下拉刷新”进行功能增强。

分享能力

小程序的分享能力主要通过 onShareAppMessage 和 onShareTimeline 两个页面级别的生命周期函数实现，分别对应“发送给朋友”和“分享到朋友圈”两种分享方式。

const SHARE_CONFIG = {
  title: 'xxx',
  imageUrl: 'https://example.com/xxx.png',
  path: '/pages/index/index',
}

Page({
  onLoad() {
    // 基础库 2.8.1 及以上，showShareMenu 默认就会显示“发送给朋友”
    wx.showShareMenu({
      withShareTicket: true, // 主要是为了获取群信息
      menus: ['shareAppMessage', 'shareTimeline'], // 明确开启这两个功能
    })
  },

  // 分享给朋友
  onShareAppMessage() {
    return {
      title: SHARE_CONFIG.title,
      path: SHARE_CONFIG.path,
      imageUrl: SHARE_CONFIG.imageUrl,
    }
  },

  // 分享到朋友圈
  onShareTimeline() {
    return {
      title: SHARE_CONFIG.title,
      query: '', // 如果首页需要带参数，记得写在这里
      imageUrl: SHARE_CONFIG.imageUrl,
    }
  },
})