典型案例

在一個(gè)夜黑風(fēng)高的夜晚，“xx飯很多”百度智能小程序悄然上線，目錄結(jié)構(gòu)如下：

├── pages
│   └── home
│       ├── index.js
│       ├── index.json
│       ├── index.css
│       └── index.swan
│   └── eat // 大口吃
│       ├── index.js
│       ...
│   └── meat // 肉
│       ├── index.js
│       ...
│ └── drink // 大碗喝
│       ├── index.js
│       ...
│ └── wine // 酒
│       ├── index.js
│       ...
│ ...
├── app.json
├── app.css
├── app.js
復(fù)制代碼

其中，app.json 的 pages 包含了小程序的所有頁(yè)面地址：

{
 ...
 pages: [
      "pages/home/index",
      "pages/eat/index",
      "pages/meat/index",
      "pages/drink/index",
      "pages/wine/index",
        ...
    ]
}
復(fù)制代碼

為了能讓自家小程序接入搜索流量，前端小明，第一時(shí)間在開(kāi)發(fā)者平臺(tái)提交了自然搜索資源：

功夫不負(fù)有心人，“xx飯很多”小程序終于被搜索引擎收錄，可以搜到了。

……

數(shù)月后，在老板的英（zi）明（ben）指（bi）揮（po）下，“xx飯很多”小程序，功能不斷迭，實(shí)現(xiàn)了滿漢全席；而公司，為了提升流量傍大腿、砸銀子，眾多小程序頁(yè)面都被投放了廣告渠道。

與此同時(shí)，小程序體積變得愈發(fā)龐大，性能體驗(yàn)也遭到了嚴(yán)峻考驗(yàn)……

優(yōu)秀如小明，怎會(huì)被難倒，他當(dāng)即選擇了分包加載，進(jìn)行性能優(yōu)化：

 // 分包A
├── packageA
│   └── eat
│      ├── index.js
│      ├── index.json
│      ├── index.css
│      └── index.swan
│   └── meat
│     ├── index.js
│       ...
│   └── ...
│ // 分包B
├── packageB
│    └── drink
│      ├── index.js
│       ...
│    └── wine
│      ├── index.js
│      ...
│    └── ...
├── pages
│    └── home
│      ├── index.js
│       ...
├── app.js
├── app.json
├── app.css
復(fù)制代碼

app.json 則變成了這個(gè)樣子：

{
  // 主包配置
  "pages": [
      "pages/home/index",
      ...
   ],
   // 分包入口及配置
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
          "eat/index",
          "meat/index",
          ...
       ]
    },
    {
      "root": "packageB",
      "pages": [
          "drink/index",
          "wine/index",
          ...
       ]
    }
  ]
}
復(fù)制代碼

然而，包體積雖然小了——之前投放的地址，卻失效了！

由于搜索引擎收錄的是失效死鏈，“xx飯很多”小程序被降級(jí)了！

因?yàn)楸唤导?jí)，資源提交的配額減少了！

不僅如此，之前投放過(guò)的所有渠道，都需要協(xié)調(diào)資源從新替換，渠道的上線時(shí)間不可控……白花花的銀子付諸流水！

老板龍顏大怒，小明束手無(wú)策……

求問(wèn)：小明距離被開(kāi)還有幾天？？

如何解決

其實(shí)，如果配置了小程序的自定義路由映射規(guī)則，小明的悲劇便不會(huì)發(fā)生。

當(dāng) app.json 中存在 routes 字段，框架則認(rèn)為該小程序啟用了自定義路由，將根據(jù) routes 中的映射規(guī)則獲取路徑。

  // 主包配置
  "pages": [
      "pages/home/index",
      ...
   ],
   // 分包入口及配置
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
          "eat/index",
          "meat/index",
          ...
       ]
    },
    {
      "root": "packageB",
      "pages": [
         "drink/index",
          "wine/index",
          ...
       ]
    }
  ],
  // 自定義路由
  routes: [
   {
      "path": "home", // 投放入口，scheme中的path
      "page": "pages/home/index" // 真實(shí)的物理存儲(chǔ)路徑
    }, {
      "path": "eat",
      "page": "packageA/eat/index"
    }, {
      "path": "drink",
      "page": "packageB/drink/index"
    }, {
      "path": "wine",
      "page": "packageB/wine/index"
    }, {
      "path": "meat",
      "page": "packageA/meat/index"
    },
    ...
  ]
}
復(fù)制代碼

通過(guò)配置自定義路由，可以使源碼結(jié)構(gòu)與配置路徑解耦，組織目錄變得更加靈活，方便代碼重構(gòu)。

接下來(lái)，我們用一張圖，簡(jiǎn)單說(shuō)明下自定義路由的具體映射規(guī)則：

映射規(guī)則

規(guī)則還在哪里生效

使用自定義路由后，小程序框架相關(guān)的 api、組件、事件等也會(huì)采用新的路由規(guī)則：

包含path/url參數(shù)的api

swan.navigateTo、swan.switchTab、swan.navigateToSmartProgram、swan.openShare等 api 中的path、url參數(shù)；

// 以navigateTo為例，home為自定義路由的path，對(duì)應(yīng)的真實(shí)物理地址是'pages/home/index'
 swan.navigateTo({
      url: '/home'
 });
復(fù)制代碼

導(dǎo)航組件

navigator組件的url屬性；

// home為自定義路由的path，對(duì)應(yīng)的真實(shí)物理地址是'pages/home/index'
<navigator url="/home" />
復(fù)制代碼

分享、轉(zhuǎn)發(fā)事件

頁(yè)面的事件處理函數(shù)onShareAppMessage，返回對(duì)象的path字段；

Page({
    data: {
        title: 'xx飯很多信息列表'
    },
    onShareAppMessage() {
        return {
            title: this.data.title,
            content: 'xx飯很多信息列表',
            imageUrl: '',
            // home為自定義路由的path，對(duì)應(yīng)的真實(shí)物理地址是'pages/home/index'
            path: '/home',
            success(res) {
                // 分享成功
            },
            fail(err) {
                // 分享失敗
            }
        };
    }
});
復(fù)制代碼

打開(kāi)小程序的方法

調(diào)起小程序的相關(guān)sdk，其中的path字段

// 該方法使用前，需要引入調(diào)起sdk的文件
window.swanInvoke({
    appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c',
    // home為自定義路由的path，對(duì)應(yīng)的真實(shí)物理地址是'pages/home/index'
    path: '/home', 
    query: {
        id: 1,
        type: 'a'
    }
});
復(fù)制代碼

routes的框架原理

前置名詞解釋：Swanjs是百度智能小程序的前端框架，NAFramework代表小程序框架客戶端層，Server為小程序服務(wù)端。

以調(diào)起小程序和使用swan.navigateTo為例，簡(jiǎn)單說(shuō)下框架層對(duì)于自定義路由都做了啥：

結(jié)尾

總之，routes配置10分鐘，未雨綢繆千秋萬(wàn)代——愿小明們不再哭泣~