建站
咨詢
售后
建站咨詢
新聞中心
- 自定義路由
- 什么是自定義路由
- 為什么要使用自定義路由
- 如何使用自定義路由
- 路由映射規(guī)則
- 與路由有關(guān)的接口說(shuō)明
- 匯總表格如下
- 匯總表格如下
自定義路由
Tips：在基礎(chǔ)庫(kù) v3.220.0 及其以下版本存在 bug ，請(qǐng)勿將主包內(nèi)頁(yè)面路由到分包內(nèi)。如業(yè)務(wù)所需可以提升基礎(chǔ)庫(kù)版本至 v3.220.0 以上。
專業(yè)從事做網(wǎng)站、網(wǎng)站建設(shè),高端網(wǎng)站制作設(shè)計(jì),成都小程序開(kāi)發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠(chéng)服務(wù)，采用html5+CSS3前端渲染技術(shù)，成都響應(yīng)式網(wǎng)站建設(shè)公司，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過(guò)程建立專項(xiàng)小組，與您實(shí)時(shí)在線互動(dòng)，隨時(shí)提供解決方案，暢聊想法和感受。
什么是自定義路由
自定義路由是一種通過(guò)配置化的方式，由開(kāi)發(fā)者指定訪問(wèn)路徑與頁(yè)面映射關(guān)系的能力。
為什么要使用自定義路由
默認(rèn)情況下，頁(yè)面訪問(wèn)路徑 path 與小程序包內(nèi)頁(yè)面源碼的目錄結(jié)構(gòu)一致。
例如，某小程序首頁(yè)源碼目錄為：
├── pages│ └── home│ ├── index.js│ ├── index.json│ ├── index.css│ └── index.swan└── project.swan.json
那么，該頁(yè)的訪問(wèn)路徑即為 pages/home/index。
這種源碼目錄結(jié)構(gòu)與路徑的緊耦合關(guān)系限制了開(kāi)發(fā)者代碼結(jié)構(gòu)的靈活組織。
例如，一旦源碼結(jié)構(gòu)重構(gòu)，頁(yè)面路徑需重新變更，導(dǎo)致已被搜索收錄的路徑失效。
通常隨著業(yè)務(wù)復(fù)雜度提高，開(kāi)發(fā)者常常會(huì)遇到一些需要重構(gòu)源碼結(jié)構(gòu)的場(chǎng)景，比如：
- 產(chǎn)品方案變更，頁(yè)面組織方式隨之變化
- 頁(yè)面功能逐漸復(fù)雜，需要拆分多個(gè)頁(yè)面呈現(xiàn)
- 為了性能優(yōu)化考慮，需要將部分頁(yè)面移到子包中
等。
對(duì)于以上這些場(chǎng)景，如果此時(shí)原來(lái)的頁(yè)面路徑已經(jīng)有投放入口，路徑變更會(huì)導(dǎo)致用戶原訪問(wèn)路徑失效。比如：
- 已被搜索收錄的頁(yè)面路徑失效
- 用戶分享的頁(yè)面路徑失效
- 投放在海報(bào)上的二維碼路徑失效
等。
通過(guò)使用自定義路由，可以解耦源碼結(jié)構(gòu)與路徑之間的關(guān)系，方便開(kāi)發(fā)者靈活應(yīng)對(duì)項(xiàng)目變更。
如何使用自定義路由
使用自定義路由的方式，是在 app.json 中增加路由規(guī)則字段 routes 的配置。
詳見(jiàn) routes 字段配置規(guī)則
當(dāng) app.json 中存在 routes 字段，框架則認(rèn)為該小程序啟用了自定義路由，將根據(jù)自定義路由映射規(guī)則計(jì)算。
路由映射規(guī)則
當(dāng)小程序框架接收到一個(gè)頁(yè)面導(dǎo)航指令，如 navigateTo({url: ‘/foo’}) 時(shí)：
- 首先從 routes 中查找 path 為 ‘foo’ 的規(guī)則，若存在，假設(shè)對(duì)應(yīng)的 page 值為 ‘pages/bar/baz’，即開(kāi)發(fā)者顯式聲明了路由映射規(guī)則：
// app.jsonroutes: [{"path": "foo","page": "pages/bar/baz"}]
（1）框架將加載 pages/bar 目錄下的 baz.js、baz.swan 等頁(yè)面源碼作為要打開(kāi)的目標(biāo)頁(yè)源碼渲染。（2）如未找到上述源碼文件，則當(dāng)作頁(yè)面路徑不存在處理。
- 若 routes 中未找到 path 值為 ‘foo’ 的規(guī)則，則認(rèn)為使用默認(rèn)規(guī)則（隱式規(guī)則）：
// app.jsonroutes: [{"path": "foo","page": "foo"}]
（1）框架將加載項(xiàng)目根目錄下的 foo.js、foo.swan 等頁(yè)面源碼作為要打開(kāi)的目標(biāo)頁(yè)源碼渲染。（2）如未找到上述源碼文件，當(dāng)作頁(yè)面路徑不存在處理。
與路由有關(guān)的接口說(shuō)明
本節(jié)介紹前先要明確兩個(gè)概念：
path：路由路徑，即訪問(wèn)一個(gè)小程序時(shí) scheme 中的頁(yè)面路徑
page：頁(yè)面源碼文件路徑，即某個(gè)小程序頁(yè)面源碼（包括頁(yè)面的 js、swan、json、css）基于項(xiàng)目根目錄的文件路徑
采用自定義路由之前，路由路徑 path 與頁(yè)面源碼文件路徑 page 兩個(gè)概念值一定相等。但采用自定義路由之后，被拆分為兩個(gè)獨(dú)立字段，其值可能不同。因此，此小節(jié)將介紹使用自定義路由之后，與導(dǎo)航相關(guān)的一些能力接口的含義劃分。
匯總表格如下
| 接口 | 含義 |
|---|---|
| 打開(kāi)小程序的 scheme | path |
| 導(dǎo)航 API 中的 url 參數(shù) | path |
| 導(dǎo)航組件的 url 屬性 | path |
| 頁(yè)面分享路徑指定 | path |
| 跳轉(zhuǎn)其他小程序 API，swan.navigateToSmartProgram 的 url 參數(shù) | path |
頁(yè)面列表，app.json 中的 pages 字段 | page |
分包頁(yè)面列表，app.json 中的 subPackages 字段 | page |
底部導(dǎo)航欄對(duì)應(yīng)頁(yè)面，app.json 中的 tabBar 字段 | page |
以下將基于如下示例路由規(guī)則，詳細(xì)介紹各個(gè)接口的使用方式：
- JSON
// app.json{"routes": [{"path": "home","page": "pages/home/index"},{"path": "list","page": "subpack/shop/list"}]}
1. 含義為路由路徑（path）的能力接口
使用自定義路由后，所有導(dǎo)航相關(guān)的接口都會(huì)采用新的路由規(guī)則，其中包括：
（1）導(dǎo)航 API
其 url 參數(shù)對(duì)應(yīng)自定義路由規(guī)則的 path 字段。
需注意，path 前需要加“/”表示為基于項(xiàng)目根路徑。否則會(huì)基于當(dāng)前頁(yè)面計(jì)算相對(duì)路徑，如：當(dāng)前路徑 page/foo/bar，相對(duì)路徑 “home”計(jì)算結(jié)果為 page/foo/home
- JS
// 跳轉(zhuǎn)首頁(yè)navigateTo({url: '/home'});// 切換到 tab 頁(yè) listswitchTab({url: '/list'});
（2）導(dǎo)航組件
其 url 屬性對(duì)應(yīng)自定義路由規(guī)則的 path 字段。
- SWAN
// 跳轉(zhuǎn)首頁(yè)首頁(yè) // 切換到 tab 頁(yè) list列表
（3）頁(yè)面分享路徑指定
openShare API 中的 path 參數(shù)對(duì)應(yīng)自定義路由規(guī)則的 path 字段。
- JS
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ù)對(duì)應(yīng)自定義路由規(guī)則的 path 字段。
- JS
onShareAppMessage(){return {title: '智能小程序示例',content: '世界很復(fù)雜，百度更懂你',path: '/home'};}
（4）打開(kāi)小程序的 scheme
scheme 的 page 部分對(duì)應(yīng)自定義路由規(guī)則的 path 字段，相應(yīng)的基于 scheme 封裝的打開(kāi)小程序 sdk 中的 path 也對(duì)應(yīng)自定義路由規(guī)則的 path 字段。
// schemebaiduboxapp://swan/4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c/home
- JS
// 引用調(diào)起 sdk 打開(kāi)window.swanInvoke({appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c',path: 'home',query: {id: 1,type: 'a'}});
（5）跳轉(zhuǎn)其他小程序頁(yè)面 API navigateToSmartProgram
其中 path 參數(shù)對(duì)應(yīng)自定義路由規(guī)則的 path 字段。
- JS
swan.navigateToSmartProgram({appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c',path: 'home',success: res => {console.log('navigateToSmartProgram success', res);})});
2. 含義為頁(yè)面源碼文件路徑的能力接口
使用自定義路由后，有些能力接口仍然表示為頁(yè)面源碼文件路徑，其中包括：
（1）小程序頁(yè)面列表 app.json 中的 pages 字段
其每項(xiàng)仍表示頁(yè)面的源碼目錄基于項(xiàng)目根目錄的路徑。
- JSON
// app.json{"pages": ["pages/home/index",...]}
（2）小程序分包配置 app.json 中的 subPackages 字段
其每項(xiàng)中的 pages 字段仍表示分包頁(yè)面的源碼目錄基于分包目錄的路徑。
- JSON
// app.json{"subPackages": {"root": "subpack","name": "subpack","pages": ["shop/list",...],...}}
（3）底部導(dǎo)航 tabBar 配置 app.json 中的 tabBar 字段
其中 list 字段下的每一項(xiàng)中，pagePath 字段仍表示此 tab 對(duì)應(yīng)的頁(yè)面的源碼目錄基于項(xiàng)目根目錄的路徑。
- JSON
// app.json{"tabBar": {"list": [{"pagePath": "subpack/shop/list","text": "列表"},...]}}
標(biāo)題名稱：創(chuàng)新互聯(lián)百度小程序教程：自定義路由
本文地址：http://www.dlmjj.cn/article/dpoggoc.html
