程序拍了拍你：来看看如何避开路由雷区
全文阅读时长6分钟，案例为真实事件改编，小程序名称、人名仅为代号，如有雷同……那我就改。
典型案例
在一个夜黑风高的夜晚，“xx饭很多”百度智能小程序悄然上线，目录结构如下：
├── 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",...]
}
为了能让自家小程序接入搜索流量，前端小明，第一时间在开发者平台提交了自然搜索资源：
功夫不负有心人，“xx饭很多”小程序终于被搜索引擎收录，可以搜到了。
……
数月后，在老板的英（zi）明（ben）指（bi）挥（po）下，“xx饭很多”小程序，功能不断迭，实现了满汉全席；而公司，为了提升流量傍大腿、砸银子，众多小程序页面都被投放了广告渠道。
与此同时，小程序体积变得愈发庞大，性能体验也遭到了严峻考验……
优秀如小明，怎会被难倒，他当即选择了分包加载，进行性能优化：
// 分包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饭很多”小程序被降级了！
因为被降级，资源提交的配额减少了！
不仅如此，之前投放过的所有渠道，都需要协调资源从新替换，渠道的上线时间不可控……白花花的银子付诸流水！
老板龙颜大怒，小明束手无策……
求问：小明距离被开还有几天？？
如何解决
其实，如果配置了小程序的自定义路由映射规则，小明的悲剧便不会发生。
当 app.json 中存在 routes 字段，框架则认为该小程序启用了自定义路由，将根据 routes 中的映射规则获取路径。
// 主包配置"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、组件、事件等也会采用新的路由规则：
包含path/url参数的api
swan.navigateTo、swan.switchTab、swan.navigateToSmartProgram、swan.openShare等 api 中的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'}
});
routes的框架原理
前置名词解释：Swanjs是百度智能小程序的前端框架，NAFramework代表小程序框架客户端层，server为小程序服务端。
以调起小程序和使用swan.navigateTo为例，简单说下框架层对于自定义路由都做了啥：
结尾
总之，简单的routes配置只需 垃圾种类太多? 分类容易搞混? @乐清人 注意啦,拿起手机就能查! 11月6日,生活垃圾分类查询系统登陆乐清市综合行政执法局官方微信公众号,输入垃圾名称即可快速了解垃圾所属哪一类,还有拍照识别查询,教 ... 微信是我们几乎每个人每天都必须要使用的通讯.社交,以及支付等环节的APP.昨天微信最新版本悄悄上线了一个隐藏"彩蛋"功能--微信拍一拍,支持用户在群聊和个人对话中提醒对方. 目前最 ... php网站源码 闪拍拍卖转拍 微拍堂自动挂售竞拍程序 H5拍卖商城系统+app友情链接:1,友情链接列表 2,添加友情链接 文章管理:1,发布文章 2,文章列表 3,文章分类管理 广告管理:1,广告列 ... 最近微信"拍一拍"火遍了各大微信群,并迅速占据了热搜话题榜 于是我突发奇想,决定用pyhton自动实现微信"拍一拍",没想到还真给搞成功了,整个过程才用了30行 ... 在热招的开发岗面试中,Hadoop.HDFS 题被面试官选中的几率非常大,也是 HR 的杀手锏之一,常会被问的有以下几种面试题: 1. HDFS 的架构设计是怎样的? 2. HDFS 的读写流程是怎样 ... 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹 出品 | CSDN(ID:CSDNnews ... 整理 | 屠敏 头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由出门问问「魔音工坊」提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极 ... 点击上方 "程序员小乐"关注, 星标或置顶一起成长 每天凌晨00点00分, 第一时间与你相约 每日英文 You will meet two kinds of people in l ... 微信的「拍一拍」功能刚上线,就在微博热搜上挂了三天! 之后,虽然大家吐槽着"拍一拍"功能无聊,但世间万物,都逃不过一个"真香"定律. "拍一拍&quo ...几分钟，未雨绸缪千秋万代——愿小明们不再哭泣~
程序拍了拍你：来看看如何避开路由雷区相关推荐
最新文章
热门文章