原生 canvas 组件适配 -凯发app官方网站

支付宝小程序

案例分析

小程序开发前准备

小程序api&组件示例

关注&跳转生活号组件使用说明

小程序page页面中父组件&子组件相互传值调用方法

sjs中getregexp正则表达式函数介绍

小程序地区单选&多项选择场景能力

小程序缓存介绍

服务器端各语言实现手机号&运动步数-aes密文解密

小程序前端实现图片转换base64图片数据

小程序前端中如何实现领取优惠券（消费红包）

小程序打开扫一扫&红包&爱攒油&小程序快报生活号&蚂蚁森林&蚂蚁庄园&股票详情页&付款码等官方业务

小程序模板订购链路介绍

模板小程序发布服务市场发布信息介绍

商家订购小程序获取&推进订单状态和终止订单服务说明

ide开发工具常用快捷键

字符串转换hex string（十六进制字符串）

template_not_have_host

msg_send_error

sdk & demo下载

常见问题

常用工具

iot小程序

运维保障

小程序 > 支付宝小程序 > 案例分析 > 原生 canvas 组件适配

更新时间：2022-12-21 10:47:08

贡献者

我的文档

设置

使用限制

版本要求：基础库 2.6.2 及以上，支付宝 10.2.0 及以上。

操作步骤

为了提升性能、优化小程序体验，

canvas

组件会逐步切换为原生 canvas 组件实现。实际使用中若遇到 ios 平台上覆盖于 canvas 组件上的 web 元素（后称：覆盖元素）无法收到 ui 事件时，可以进行如下适配，以确保顺利收到 ui 事件。

以下两个步骤缺一不可。

当前小程序 app.json 的 window 节点中配置 enablecomponentoverlayer 为 yes，

这个配置项用于指示小程序运行时将目标区域内 ui 事件派发给 canvas 组件。

{

"pages":[

"pages/index/index"

"window":{

"enablecomponentoverlayer":"yes"

}

为覆盖元素添加 af-component-overlayer class 属性来指示小程序运行时将 ui 事件派发给覆盖元素，而不传递给后边的 canvas 组件；若不添加 af-component-overlayer class 属性，则会默认派发给 canvas 组件。

注意

：如果在开发中遇到 canvas 组件上没有可见的 web 元素覆盖（即：开发视角下无覆盖元素）时也收不到 ui 事件，可以只采用步骤 1 来尝试解决。

/* declare style for top class in acss */

.top {

z-index: 2;

}

canvas>

view>

上一篇：ref获取组件实例使用介绍下一篇：小程序lottie组件能力介绍

相关问题