小程序拍了拍你:来看看如何避开路由雷区
全文阅读时长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配置只需几分钟
,未雨绸缪千秋万代
——愿小明们不再哭泣~😜
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
避坑指南:优秀安全专家谈SIEM如何选型
SIEM(安全信息和事件管理)堪称企业安全运营的发动机,它不但从IT基础架构中的海量信息资源中收集和分析各种活动,同时也是安全自动化、DevSecOps、下一代SOC等安全管理和运营的基础。 SANS 2019年的报告(下图)显示,超过70%的大型企业仍然依赖安全信息和事件管理(SIEM)系统来进行数据关联、安全分析和运营。此外,很多企业的安全运营中心(SOC)团队还围绕SIEM配备了用于威胁检测/响应、调查/查询、威胁情报分析以及流程自动化/编排的其他工具。 没有人怀疑SIEM的重要性,但是由于SIEM本身也存在诸多疑难问题(例如与大量安全工具的可扩展和集成性、需要大量人员培训和经验、消耗大量运营资源、误报过多、对新威胁力的响应不从心、供应商产品之间差异过大等)。因此,企业选择SIEM需要格外谨慎,不仅仅是因为该产品是企业安全运营的基石,SIEM需要考量的因素众多(尤其是考虑到当前很多企业安全架构正在面临重大升级或者DevSecOps范型转移),同时还有很强的锁定效应。 近日,国外多位网络安全专家就SIEM的选型发表了观点,安全牛整理如下: Elastic Security高级总监 ...
- 下一篇
无参数读文件和RCE总结
● 引言 ●代码解析 ●无参数任意文件读取 ●查看当前目录文件名 ●读取当前目录文件 ●查看上一级目录文件名 ●读取上级目录文件 ●查看和读取多层上级路径的就不写了,一样的方式套娃就行 ●无参数命令执行(RCE) ●getallheaders()&apache_request_headers() ●get_defined_vars() ●session_id() ●getenv() ●小结 ●参考 无参数读文件和RCE总结 引言 之前做题时遇到了无参数RCE这类题,在网上查找资料发现都是零散的Writeup或者payload,没有一篇能够完整涵盖读取文件和命令执行的技巧,所以我花了点时间,将PHP无参数读文件以及命令执行所用到的方法总结了一遍,希望能对读者起到些许作用。 什么是无参数? 顾名思义,就是只使用函数,且函数不能带有参数,这里有种种限制:比如我们选择的函数必须能接受其括号内函数的返回值;使用的函数规定必须参数为空或者为一个参数等 接下来,从代码开始讲解无参数读文件和RCE的具体技巧,帮助读者熟悉PHP的各种函数、记住无参数读文件和RCE的各类方法: 例题: <?...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS关闭SELinux安全模块
- 2048小游戏-低调大师作品
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Red5直播服务器,属于Java语言的直播服务器
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7