安卓支付宝小程序空白

模拟器显示正常。ios显示正常。安卓显示空白

代码逻辑跟`f-my`的源码是一致的。用tarojs写的

真机调试没有任何报错

### index.alipay.tsx
```tsx
import { Canvas } from "@tarojs/components";
import { Canvas as FCanvas } from "@antv/f-engine";

import { Props } from "@/components/F2Canvas/types";
import Taro from "@tarojs/taro";
import styles from "@/components/F2Canvas/index.module.scss";
import IndexBase from "@/components/F2Canvas/indexBase";

interface S {
width: number;
height: number;
}

export default class IndexAlipay extends IndexBase {
canvas: FCanvas;
canvasEl: any;

constructor(props) {
super(props);
this.state = {
width: 351,
height: 167,
};
}

componentDidMount() {
const isAppX2CanvasEnv = () =>
my.canIUse("canvas.onReady") &&
my.canIUse("createSelectorQuery.return.node");
if (!isAppX2CanvasEnv()) {
console.error("当前基础库版本过低，请升级基础库版本到 2.7.0 或以上。");
}
}

componentDidUpdate() {
if (!this.canvas) {
return;
}
const children = this.props.onRender(this.props);
console.log("update", children);
this.canvas.update({
children,
});
}

componentWillUnmount() {
this.canvas?.destroy();
}

onCanvasReady = () => {
Taro.createSelectorQuery()
.select(`#${this.props.id}`)
.node()
.exec((res) => {
console.log("canvas alipay==>", res);
if (!res[0]) {
return;
}
const canvas = res[0].node;
const {
width,
height,
createImage,
requestAnimationFrame,
cancelAnimationFrame,
} = canvas;

const pixelRatio = Taro.getSystemInfoSync().pixelRatio;
this.setState(
{
width: width * pixelRatio,
height: height * pixelRatio,
},
() => {
const context = canvas.getContext("2d");

const fCanvas = this.createCanvas({
width,
height,
pixelRatio,
context,
createImage,
requestAnimationFrame,
cancelAnimationFrame,
});
console.log("canvas", canvas);
fCanvas?.render();
setTimeout(() => {
const children = this.props.onRender(this.props);
fCanvas?.update({ children });
}, 1000);
}
);
});
};

createCanvas({
width,
height,
pixelRatio,
context,
createImage,
requestAnimationFrame,
cancelAnimationFrame,
}) {
if (!width || !height) {
return;
}
const children = this.props.onRender(this.props);
console.log("children", children);
const canvas = new FCanvas({
pixelRatio,
width,
height,
context,
children,
createImage,
requestAnimationFrame,
cancelAnimationFrame,
// @ts-ignore
offscreenCanvas: Taro.createOffscreenCanvas(),
useNativeClickEvent: false,
isTouchEvent: (e) => e.type.startsWith("touch"),
isMouseEvent: (e) => e.type.startsWith("mouse"),
});
this.canvas = canvas;
this.canvasEl = canvas.getCanvasEl();
return canvas;
}

render() {
const { id } = this.props;
const { width, height } = this.state;
console.log("width", width);
console.log("height", height);
return (

);
}
}

```

### indexBase.ts

```ts
import React from "react";

export default class IndexBase extends React.Component {
canvasEl: any;
canvas: any;

convertTouches(touches) {
if (!touches) return touches;
return touches.map((touch) => {
touch.pageX = 0;
touch.pageY = 0;
touch.clientX = touch.x;
touch.clientY = touch.y;
return touch;
});
}

_dispatchEvent(el, event, type) {
if (!el || !event) return;
const evt = JSON.parse(JSON.stringify(event));
if (!evt.preventDefault) {
evt.preventDefault = function () {};
}
evt.type = type;
evt.target = el;
const { touches, changedTouches, detail } = evt;
evt.touches = this.convertTouches(touches);
evt.changedTouches = this.convertTouches(changedTouches);
if (detail) {
evt.clientX = detail.x;
evt.clientY = detail.y;
}
console.log("dispatchEvent", evt);
el.dispatchEvent(evt);
}

onClick = (e) => {
e.stopPropagation();
e.preventDefault();
console.log("click==>");
this._dispatchEvent(this.canvasEl, e, "click");
};

onTouchStart = (e) => {
e.stopPropagation();
e.preventDefault();
this._dispatchEvent(this.canvasEl, e, "touchstart");
};

onTouchEnd = (e) => {
e.stopPropagation();
e.preventDefault();
this._dispatchEvent(this.canvasEl, e, "touchend");
};

onTouchMove = (e) => {
e.stopPropagation();
e.preventDefault();
this._dispatchEvent(this.canvasEl, e, "touchmove");
};
}

```