Автор: немного липкий хорошо
全文阅读时长6分钟，案例为真实事件改编，小程序名称、人名仅为代号，如有雷同……那我就改。
Типичный случай
Темной и ветреной ночью незаметно запустился умный апплет Baidu "много хх риса".Структура каталогов следующая:
├── 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
в,app.jsonизpagesСодержит все адреса страниц апплета:
{
...
pages: [
"pages/home/index",
"pages/eat/index",
"pages/meat/index",
"pages/drink/index",
"pages/wine/index",
...
]
}
Чтобы разрешить своему апплету доступ к поисковому трафику, Сяомин, фронтенд, впервые представил естественные поисковые ресурсы на платформе разработчика:
Тяжелая работа окупается, и апплет «Много хх риса» наконец-то включен в поисковик и его можно найти.
...
Через несколько месяцев на начальном английском (zi)Яркий(ben)Ссылаться на(bi) качать (po), мини-программы «Много хх риса», функции которых непрерывно повторялись, добились полного пиршества маньчжурских и ханьских китайцев; а компания, чтобы увеличить трафик и потратить деньги, многие страницы мини-программы были размещены в рекламных каналах.
В то же время размер небольших программ становился все больше и больше, а производительность также подвергалась серьезным испытаниям...
Превосходно, как Сяо Мин, как он мог быть в тупике, он сразу выбралЗагрузка подпакета, для оптимизации производительности:
// 分包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
app.jsonЭто становится таким:
{
// 主包配置
"pages": [
"pages/home/index",
...
],
// 分包入口及配置
"subPackages": [
{
"root": "packageA",
"pages": [
"eat/index",
"meat/index",
...
]
},
{
"root": "packageB",
"pages": [
"drink/index",
"wine/index",
...
]
}
]
}
Однако, несмотря на то, что размер пакета небольшой - адрес, который был размещен ранее, недействителен!
Поскольку поисковая система включала мертвые ссылки, апплет «Много xx риса» был понижен!
Из-за понижения квота на отправку ресурсов уменьшена!
Мало того, что все каналы, которые были запущены ранее, нуждаются в согласовании ресурсов, подлежащих замене, а время запуска каналов не поддается контролю... Деньги Бай Хуахуа были слиты!
Босс Лун Ян в ярости, а Сяо Мин беспомощен...
Вопрос: Сколько дней до открытия Xiao Ming? ?
Как решить
На самом деле, если апплет настроенпользовательская маршрутизацияПравила сопоставления, трагедии Сяо Мина не произойдет.
когдаapp.jsonсуществуют вroutesполе, фреймворк считает, что для апплета включена пользовательская маршрутизация, и будет получать путь в соответствии с правилами сопоставления в route.
// 主包配置
"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" // 真实的物理存储路径
}, {
"path": "eat",
"page": "packageA/eat/index"
}, {
"path": "drink",
"page": "packageB/drink/index"
}, {
"path": "wine",
"page": "packageB/wine/index"
}, {
"path": "meat",
"page": "packageA/meat/index"
},
...
]
}
Путем настройки пользовательского маршрута структура исходного кода может быть отделена от пути конфигурации, каталог организации становится более гибким, а рефакторинг кода упрощается.
Далее мы используем изображение, чтобы кратко объяснить конкретные правила сопоставления пользовательской маршрутизации:
правила сопоставления
Где еще действуют правила?
После использования пользовательской маршрутизации API, компоненты, события и т. д., связанные с платформой апплета, также будут принимать новые правила маршрутизации:
API с параметрами path/url
swan.navigateTo,swan.switchTab,swan.navigateToSmartProgram,swan.openShareи т.д. в апиpath、urlпараметр;
// 以navigateTo为例，home为自定义路由的path，对应的真实物理地址是'pages/home/index'
swan.navigateTo({
url: '/home'
});
Навигационный компонент
navigatorкомпонентurlАтрибуты;
// home为自定义路由的path，对应的真实物理地址是'pages/home/index'
<navigator url="/home" />
Делитесь и пересылайте события
обработчик события страницыonShareAppMessage, который возвращает объектpathполе;
Page({
data: {
title: 'xx饭很多信息列表'
},
onShareAppMessage() {
return {
title: this.data.title,
content: 'xx饭很多信息列表',
imageUrl: '',
// home为自定义路由的path，对应的真实物理地址是'pages/home/index'
path: '/home',
success(res) {
// 分享成功
},
fail(err) {
// 分享失败
}
};
}
});
Как открыть апплет
Вызовите соответствующий SDK апплета,один из нихpathполе
// 该方法使用前，需要引入调起sdk的文件
window.swanInvoke({
appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c',
// home为自定义路由的path，对应的真实物理地址是'pages/home/index'
path: '/home',
query: {
id: 1,
type: 'a'
}
});
Рамочный принцип маршрутов
предложное существительное:SwanjsЭто интерфейсная структура умного апплета Baidu.NAFrameworkПредставляет клиентский уровень апплета,ServerДля сервера апплетов.
к调起小程序и использоватьswan.navigateToНапример, давайте кратко поговорим о том, что сделал слой фреймворка для пользовательской маршрутизации:
конец
Короче говоря, конфигурация маршрутов10分钟, планируйте заранее千秋万代——Пусть Сяомин перестанет плакать~😜