新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)百度小程序教程：自定義路由

自定義路由
- 什么是自定義路由
- 為什么要使用自定義路由
- 如何使用自定義路由
- 路由映射規(guī)則
- 與路由有關(guān)的接口說明
  - 匯總表格如下

自定義路由

Tips：在基礎(chǔ)庫 v3.220.0 及其以下版本存在 bug ，請勿將主包內(nèi)頁面路由到分包內(nèi)。如業(yè)務(wù)所需可以提升基礎(chǔ)庫版本至 v3.220.0 以上。
專業(yè)從事做網(wǎng)站、網(wǎng)站建設(shè),高端網(wǎng)站制作設(shè)計,成都小程序開發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊竭力真誠服務(wù)，采用html5+CSS3前端渲染技術(shù)，成都響應(yīng)式網(wǎng)站建設(shè)公司，讓網(wǎng)站在手機、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項小組，與您實時在線互動，隨時提供解決方案，暢聊想法和感受。

什么是自定義路由

自定義路由是一種通過配置化的方式，由開發(fā)者指定訪問路徑與頁面映射關(guān)系的能力。

為什么要使用自定義路由

默認(rèn)情況下，頁面訪問路徑 path 與小程序包內(nèi)頁面源碼的目錄結(jié)構(gòu)一致。
例如，某小程序首頁源碼目錄為：

 
 
 
  
  
  ├── pages
  
  
  │ └── home
  
  
  │ ├── index.js
  
  
  │ ├── index.json
  
  
  │ ├── index.css
  
  
  │ └── index.swan
  
  
  └── project.swan.json

那么，該頁的訪問路徑即為 pages/home/index。

這種源碼目錄結(jié)構(gòu)與路徑的緊耦合關(guān)系限制了開發(fā)者代碼結(jié)構(gòu)的靈活組織。

例如，一旦源碼結(jié)構(gòu)重構(gòu)，頁面路徑需重新變更，導(dǎo)致已被搜索收錄的路徑失效。

通常隨著業(yè)務(wù)復(fù)雜度提高，開發(fā)者常常會遇到一些需要重構(gòu)源碼結(jié)構(gòu)的場景，比如：

產(chǎn)品方案變更，頁面組織方式隨之變化
頁面功能逐漸復(fù)雜，需要拆分多個頁面呈現(xiàn)
為了性能優(yōu)化考慮，需要將部分頁面移到子包中
等。

對于以上這些場景，如果此時原來的頁面路徑已經(jīng)有投放入口，路徑變更會導(dǎo)致用戶原訪問路徑失效。比如：

已被搜索收錄的頁面路徑失效
用戶分享的頁面路徑失效
投放在海報上的二維碼路徑失效
等。

通過使用自定義路由，可以解耦源碼結(jié)構(gòu)與路徑之間的關(guān)系，方便開發(fā)者靈活應(yīng)對項目變更。

如何使用自定義路由

使用自定義路由的方式，是在 app.json 中增加路由規(guī)則字段 routes 的配置。
詳見 routes 字段配置規(guī)則

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

路由映射規(guī)則

當(dāng)小程序框架接收到一個頁面導(dǎo)航指令，如 navigateTo({url: ‘/foo’}) 時：

首先從 routes 中查找 path 為 ‘foo’ 的規(guī)則，若存在，假設(shè)對應(yīng)的 page 值為 ‘pages/bar/baz’，即開發(fā)者顯式聲明了路由映射規(guī)則：

 
 
 
  
  
  // app.json
  
  
  routes: [
  
  
   {
  
  
   "path": "foo",
  
  
   "page": "pages/bar/baz"
  
  
   }
  
  
  ]

 
 
 
  
  
  （1）框架將加載 pages/bar 目錄下的 baz.js、baz.swan 等頁面源碼作為要打開的目標(biāo)頁源碼渲染。
  
  
  （2）如未找到上述源碼文件，則當(dāng)作頁面路徑不存在處理。

若 routes 中未找到 path 值為 ‘foo’ 的規(guī)則，則認(rèn)為使用默認(rèn)規(guī)則（隱式規(guī)則）：

 
 
 
  
  
  // app.json
  
  
  routes: [
  
  
   {
  
  
   "path": "foo",
  
  
   "page": "foo"
  
  
   }
  
  
  ]

 
 
 
  
  
  （1）框架將加載項目根目錄下的 foo.js、foo.swan 等頁面源碼作為要打開的目標(biāo)頁源碼渲染。
  
  
  （2）如未找到上述源碼文件，當(dāng)作頁面路徑不存在處理。

與路由有關(guān)的接口說明

本節(jié)介紹前先要明確兩個概念：

path：路由路徑，即訪問一個小程序時 scheme 中的頁面路徑

page：頁面源碼文件路徑，即某個小程序頁面源碼（包括頁面的 js、swan、json、css）基于項目根目錄的文件路徑

采用自定義路由之前，路由路徑 path 與頁面源碼文件路徑 page 兩個概念值一定相等。但采用自定義路由之后，被拆分為兩個獨立字段，其值可能不同。因此，此小節(jié)將介紹使用自定義路由之后，與導(dǎo)航相關(guān)的一些能力接口的含義劃分。

匯總表格如下

接口	含義
打開小程序的 scheme	path
導(dǎo)航 API 中的 url 參數(shù)	path
導(dǎo)航組件的 url 屬性	path
頁面分享路徑指定	path
跳轉(zhuǎn)其他小程序 API，swan.navigateToSmartProgram 的 url 參數(shù)	path
頁面列表，app.json 中的 `pages` 字段	page
分包頁面列表，app.json 中的 `subPackages` 字段	page
底部導(dǎo)航欄對應(yīng)頁面，app.json 中的 `tabBar` 字段	page

以下將基于如下示例路由規(guī)則，詳細(xì)介紹各個接口的使用方式：

JSON

 
 
 
  
  
  // app.json
  
  
  {
  
  
   "routes": [
  
  
   {
  
  
   "path": "home",
  
  
   "page": "pages/home/index"
  
  
   },
  
  
   {
  
  
   "path": "list",
  
  
   "page": "subpack/shop/list"
  
  
   }
  
  
   ]
  
  
  }

1. 含義為路由路徑（path）的能力接口

使用自定義路由后，所有導(dǎo)航相關(guān)的接口都會采用新的路由規(guī)則，其中包括：

（1）導(dǎo)航 API

其 url 參數(shù)對應(yīng)自定義路由規(guī)則的 path 字段。

需注意，path 前需要加“/”表示為基于項目根路徑。否則會基于當(dāng)前頁面計算相對路徑，如：當(dāng)前路徑 page/foo/bar，相對路徑 “home”計算結(jié)果為 page/foo/home

 
 
 
  
  
  // 跳轉(zhuǎn)首頁
  
  
  navigateTo({url: '/home'});
  
  
  // 切換到 tab 頁 list
  
  
  switchTab({url: '/list'});

（2）導(dǎo)航組件

其 url 屬性對應(yīng)自定義路由規(guī)則的 path 字段。

SWAN

 
 
 
  
  
  // 跳轉(zhuǎn)首頁
  
  
  首頁
  
  
  // 切換到 tab 頁 list
  
  
  列表

（3）頁面分享路徑指定

openShare API 中的 path 參數(shù)對應(yīng)自定義路由規(guī)則的 path 字段。

 
 
 
  
  
  swan.openShare({
  
  
   title: '智能小程序示例',
  
  
   content: '世界很復(fù)雜，百度更懂你',
  
  
   path: '/home',
  
  
   imageUrl: 'https://ms-static.cdn.bcebos.com/miniappdocs/img/logo_new.png',
  
  
   success: res => {
  
  
   swan.showToast({
  
  
   title: '分享成功'
  
  
   })
  
  
   }
  
  
  })

onShareAppMessage API 中的 path 參數(shù)對應(yīng)自定義路由規(guī)則的 path 字段。

 
 
 
  
  
  onShareAppMessage(){
  
  
   return {
  
  
   title: '智能小程序示例',
  
  
   content: '世界很復(fù)雜，百度更懂你',
  
  
   path: '/home'
  
  
   };
  
  
  }

（4）打開小程序的 scheme

scheme 的 page 部分對應(yīng)自定義路由規(guī)則的 path 字段，相應(yīng)的基于 scheme 封裝的打開小程序 sdk 中的 path 也對應(yīng)自定義路由規(guī)則的 path 字段。

 
 
 
  
  
  // scheme
  
  
  baiduboxapp://swan/4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c/home

 
 
 
  
  
  // 引用調(diào)起 sdk 打開
  
  
  window.swanInvoke({
  
  
   appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c',
  
  
   path: 'home',
  
  
   query: {
  
  
   id: 1,
  
  
   type: 'a'
  
  
   }
  
  
  });

（5）跳轉(zhuǎn)其他小程序頁面 API navigateToSmartProgram

其中 path 參數(shù)對應(yīng)自定義路由規(guī)則的 path 字段。

 
 
 
  
  
  swan.navigateToSmartProgram({
  
  
   appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c',
  
  
   path: 'home',
  
  
   success: res => {
  
  
   console.log('navigateToSmartProgram success', res);
  
  
   })
  
  
  });

2. 含義為頁面源碼文件路徑的能力接口

使用自定義路由后，有些能力接口仍然表示為頁面源碼文件路徑，其中包括：

（1）小程序頁面列表 app.json 中的 pages 字段

其每項仍表示頁面的源碼目錄基于項目根目錄的路徑。

JSON

 
 
 
  
  
  // app.json
  
  
  {
  
  
   "pages": [
  
  
   "pages/home/index",
  
  
   ...
  
  
   ]
  
  
  }

（2）小程序分包配置 app.json 中的 subPackages 字段

其每項中的 pages 字段仍表示分包頁面的源碼目錄基于分包目錄的路徑。

JSON

 
 
 
  
  
  // app.json
  
  
  {
  
  
   "subPackages": {
  
  
   "root": "subpack",
  
  
   "name": "subpack",
  
  
   "pages": [
  
  
   "shop/list",
  
  
   ...
  
  
   ],
  
  
   ...
  
  
   }
  
  
  }

（3）底部導(dǎo)航 tabBar 配置 app.json 中的 tabBar 字段

其中 list 字段下的每一項中，pagePath 字段仍表示此 tab 對應(yīng)的頁面的源碼目錄基于項目根目錄的路徑。

JSON

 
 
 
  
  
  // app.json
  
  
  {
  
  
   "tabBar": {
  
  
   "list": [
  
  
   {
  
  
   "pagePath": "subpack/shop/list",
  
  
   "text": "列表"
  
  
   },
  
  
   ...
  
  
   ]
  
  
   }
  
  
  }

名稱欄目：創(chuàng)新互聯(lián)百度小程序教程：自定義路由
網(wǎng)站路徑：http://fisionsoft.com.cn/article/dpoggoc.html