支付宝小程序getCurrentPages方法、Router、页面常见的问题、sitemap配置

861 阅读7分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第12天,点击查看活动详情

getCurrentPages全局方法

是个全局的方法,哪个页面都可以调用。
getCurrentPages() 获取当前页面栈的实例,将页面栈的数据以数组的形式返回。第一个元素为首页,最后一个元素为当前页面。
小程序以栈的形式维护当前的所有页面。路由切换与页面栈的关系如下:

image.png

image.png
示例代码 image.png
可以用于检测当前页面栈是否具有 5 层页面深度:

image.png
假设当前页面栈:宿主小程序 A,插件 B,宿主小程序 C。默认地,宿主小程序和插件之间无法访问到各自的页面:

image.png
通过指定 getAllPages,可以获得代理实例,取得 route 信息:

image.png

Q:getCurrentPages 方法怎么获取页面路径?

A:getCurrentPages()[N].route,可以获取到页面路径(N 为页面数组栈中页面对象所在序号,最大值为当前页)。

Q:getCurrentPages 方法可以获取到参数吗?

A:不可以,只能获取页面栈,无法获取参数。

Router

页面路由器对象,有 switchTab、 reLaunch 、redirectTo、 navigateTo、 navigateBack 五个方法。可以通过 this.pageRouter 或 this.router 获得当前页面或自定义组件的路由器对象。
与同名的全局方法 [my.switchTab]、[my.reLaunch]、[my.redirectTo]、[my.navigateTo]、[my.navigateBack] 功能相同,唯一区别在于页面路由器中的方法调用时,相对路径是相对于 this 指代的页面或自定义组件。通常情况下,更推荐使用 this.pageRouter 和 this.router 进行路由跳转。

自定义组件的 Router

在自定义组件中调用时,this.router 将相对于 this 指代的自定义组件自身定义时的路径进行路由跳转。
this.pageRouter 将相对于 this 指代的自定义组件所在页面的路径进行路由跳转。自定义组件的 this.pageRouter 和自定义组件所在页面的 this.pageRouter  获得的是同一个页面路由器对象

路由的相对路径

image.png

使用说明

  • 由于插件和宿主的权限管控,由插件(插件自定义组件或插件页面)发起的路由跳转,无论是使用页面路由器对象 Router 上的路由方法还是全局对象 my 上的路由方法,均不支持跳转到宿主小程序页面或另一个插件页面。
  • 由于插件和宿主的权限管控,当插件自定义组件被用在宿主小程序或另一个插件中时,该插件自定义组件的 this.pageRouter 为 null。
  • 如果在页面 A 通过 redirectTo、reLaunch、navigateBack 方法跳转到页面 B,页面 A 会被销毁,在销毁后的页面 A 调用 this.pageRouter 或 this.routet 的路由方法不会生效。

页面的 Router

在页面中调用时,this.pageRouter 和 this.router 获得的是同一个页面路由器对象(即 this.pageRouter === this.router),将相对于 this 指代的页面进行路由跳转
假设当前页面(栈顶页面)路径为 pages2/index/index,分别在页面 page/index/index 和 自定义组件 components/com/com 中调用路由方法 my.navigateTo、this.pageRouter.navigateTo、this.router.navigateTo 进行路由跳转,跳转结果如下:

image.png

image.png

示例代码:

image.png

image.png

Q:打开小程序白屏,如何处理?

A:有多个原因会导致白屏的发生,请排查:

  1. 请检查手机是否正常使用。
  2. 请检查访问的是否是线上版本。
  3. 可能是启动缓存问题,建议在 支付宝客户端 > 我的小程序 > 最近使用,删除对应小程序,再打开小程序测试。
  4. 可能是兼容问题,建议升级支付宝客户端,再打开小程序测试。
  5. 如果按照以上方法排查后仍存在白屏的问题,请收集整理好问题,在文档页面右侧 咨询 中点击 开始咨询 寻求技术支持帮助。

onError 函数在程序运行异常时无法正常触发?

A:建议把 onError 函数写在 app.js 中,以真机测试效果为准。

小程序 onShareAppMessage 函数如何分享 https 链接?

A:将 https 链接编码后,放在 path 的 query 参数里传递。

Q:进入小程序提示系统错误,如何解决?

A:js 异常会导致报错,建议检查相关配置,如请求涉及的 URL 是否都已添加在白名单。

Q:小程序如何使用 cookie?

A:小程序中不建议使用 cookie,小程序针对服务端回设的 cookie 不会禁用掉,会设置到小程序进程中,下次小程序进行请求,会自动将已有的 cookie 带入到服务端请求中。前端获取不到 cookie,也不会对 cookie 做任何操作。小程序建议使用 [缓存]

Q:小程序可以监听右上角的关闭按钮吗?点击右上角关闭按钮会执行什么函数呢?点击关闭按钮为什么没触发onHide()?

A:不可以监听关闭按钮,点击关闭按钮,不会执行函数。

Q:setData 了,小程序页面数据为什么没刷新?

A:请检查是否有 this 对象值,或者代码执行逻辑是否有问题。

Q:跳转页面为空页面,如何解决?

A:请排查是否未添加域名白名单导致的服务请求失败未加载到数据,导致页面没有数据。

Q:生活号跳转到小程序,小程序如何接收到传递的参数?

A:需要在小程序 app.js 文件app() 里的 onLaunch(options) 使用 options.query 获取。

Q:扫描小程序码 A 后再扫描小程序码 B,为什么在 onLaunch 获取不到码 B 携带的参数?

A:在 onShow() 函数中获取。

Q:第一次扫码进入小程序,切入后台。第二次扫码进入后,为什么在 onLaunch 函数中获取不到参数?

A:建议在 onLaunch()onShow() 函数中都尝试获取参数。

Q:小程序如何获取跳转链接中附带的参数?

A:使用小程序生命周期 onLaunch() 监听小程序初始化,监听器中获取 query 值。

Q:在小程序页面中如何引入 js?

A:使用 import {Ajax} from '/util' 或者 import {Ajax} from './util' 方式可以引入 js

Q:onShow 中可以调用授权函数吗?

A:支付宝小程序中禁止小程序首屏引导用户授权。不建议将用户授权放在生命周期中执行。(应该在使用对应的接口的时候操作)

Q:如何去掉小程序框架自带的 log?

A:在 app.js 中的 onLaunch()onShow() 及页面的 js 文件中 onLoad 等小程序初始和页面初始化方法中去掉日志打印的代码。

Q:如何让一个功能不用点击就会自动触发?

A:把功能写在 onLoad() 中或者 onShow() 中。

Q:不能在小程序页面 axml 中使用函数计算吗?

A:不支持,小程序支持 SJS 语法

Sitemap配置(是否允许被搜索)

小程序服务搜索功能目前已开放,开发者可以通过 sitemap.json 配置,或者 [小程序服务收录]功能来配置其小程序页面是否允许小程序算法识别。当页面被小程序算法识别后,系统自动生成小程序服务,并在 [搜索]等场景上曝光,当用户的搜索关键词命中服务名称时,小程序服务可能展示在搜索结果中。

使用场景

目前该能力适用在小程序服务同步。当开启后算法识别到小程序服务时,会在 服务管理 > 服务同步 中展示服务信息,商家可在列表页补齐信息提交审核,审核通过的小程序服务可在搜索侧展示

image.png

sitemap 配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被支付宝索引,文件内容为一个 JSON 对象,小程序服务收录开关打开时,如果没有 sitemap.json默认为所有页面都允许被索引。

配置原则

  • 配置之间如有冲突,视作不被索引。
  • 匹配页面后面的参数不影响索引结果,示例: path/to/page?a =1  等于 path/to/page
  • * 代表所有页面。

配置示例

以下分别为不同情况下 sitemap.json 的配置,请根据需要进行配置。

image.png

image.png

使用限制

  • IDE 版本 1.16 及以上。
  • sitemap 的索引提示是默认开启的,如需要关闭 sitemap 的索引提示,可在小程序项目配置文件 mini.project.json 的 setting 中配置字段 checkSiteMap 为 false。
  • sitemap 文件内容最大为 5120 个 UTF8 字符

使用步骤

当在小程序项目中设置了 sitemap 的配置文件(默认为 sitemap.json)时,点击索引页面时便可在 IDE 控制台上显示当前页面是否被索引的调试信息。 示例:

image.png

image.png