支付宝小程序地图、获取节点、跳转

333 阅读3分钟

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

地图

  1. my.getMapInfo:my.getMapInfo 是获取地图基础信息的 API,在使用 [map 地图组件] 之前进行兼容逻辑操作。

使用限制

  • 基础库 [1.24.6] 或更高版本;支付宝客户端 10.1.95 或更高版本,若版本较低,建议采取 [兼容处理]。
  • 小程序开发者工具(IDE)暂不支持调试此 API,请使用 [真机调试] 功能在真机进行调试。
  • 此 API 暂仅支持企业支付宝小程序使用。

image.png
示例代码:

image.png 2. my.createMapContext:my.createMapContext 是创建并返回一个地图上下文对象 [mapContext] 的 API。

image.png

返回值

返回值为 [MapContext]

[MapContext]

MapContext 实例,可通过 [my.createMapContext] 获取。

MapContext 通过 ID 跟一个 map 组件绑定,操作对应的 [map 地图]。

image.png

获取节点

my.createSelectorQuery

my.createSelectorQuery 是返回一个 [SelectorQuery] 对象实例,该实例上有一些用于选择页面节点或获取节点信息的方法。该 API 需要在页面渲染完成后使用。页面渲染完成的时机有:

  • 在 Page.onReady 中,页面处于渲染完成状态。注意:Page.onReady 只会在页面初次渲染完成时触发。
  • 在 Page.onShow 中,页面处于渲染完成状态。
  • 在 setData 回调函数中,页面处于渲染完成状态。

返回值

返回值为 [SelectorQuery]对象实例。
先写createSelectorQuery()对象,然后调用方法,比如select()然后调用exec获取交接点 image.png
结果:

image.png

selectorQuery

  1. SelectorQuery.boundingClientRect:SelectorQuery.boundingClientRect 是将当前选择节点的位置信息放入查询结果,类似 Dom 的 getBoundingClientRect。

返回对象包含 width、height、left、top、bottom、right。如果当前节点为窗口对象则只返回 width、height。 2. SelectorQuery.scrollOffset:SelectorQuery.scrollOffset 用于将当前选择节点的滚动信息放入查询结果。

image.png

image.png 3. SelectorQuery.select:SelectorQuery.select 是用于选择当前第一个匹配选择器的节点,选择器支持 ID 选择器以及 Class 选择器。 4. SelectorQuery.selectAll:SelectorQuery.selectAll 用于选择所有匹配选择器的节点,选择器支持 ID 选择器以及 Class 选择器。 5. SelectorQuery.selectViewport:SelectorQuery.selectViewport 用于选择窗口对象 6. SelectorQuery.node:SelectorQuery.node 是获取 Node 节点实例。目前只支持 [Native Canvas]的获取。

image.png

image.png

image.png 7. SelectorQuery.context:SelectorQuery.context 是获取节点Context实例查询请求。目前支持 [VideoContext] 和 [MapContext]的获取。

image.png

image.png 8. SelectorQuery.fields:SelectorQuery.fields 用于获取节点的相关信息。需要获取的字段在 fields 中指定。

image.png

image.png 9. SelectorQuery.exec:SelectorQuery.exec 是将查询结果放入 callback 回调中。查询结果按请求次序构成数组,数组中每项为一次查询的结果。

如果当前是节点列表,则单次查询结果也为数组。

级联选择

  • my.multiLevelSelect:my.multiLevelSelect 是级联选择功能 API。主要用于选择多级关联数据,例如省市区的信息选择。

image.png 注意:除了 name 和 subList 以外的属性实际会被忽略,但也会增大 list 数据量,Android 版本上可能导致功能异常。参见后文 Bug & Tip

image.png

image.png

跳转(往外跳转)

出于业务需求,小程序可能需要引导用户与小程序外部环境互动;这类需求包括但不限于:

  • 需要在小程序内展示一个H5页面
  • 从小程序跳转到一个外部H5页面
  • 从外部APP跳转到小程序内
  • 从一个小程序跳到另一个小程序
  • ......

使用场景

从业务场景进行区分,可以分为 小程序互相跳转内嵌 H5 页面小程序跳转外部外部跳转到小程序跳转到调试中未上架小程序版本 5个场景。