安卓支付宝小程序空白
xiaoxintang opened this issue · comments
模拟器显示正常。ios显示正常。安卓显示空白
代码逻辑跟f-my
的源码是一致的。用tarojs写的
真机调试没有任何报错
index.alipay.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<Props, S> {
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 (
<Canvas
canvasId={id}
id={id}
type='2d'
width={width + ""}
height={height + ""}
className={styles.f2Canvas}
onReady={this.onCanvasReady}
onClick={this.onClick}
onTouchStart={this.onTouchStart}
onTouchMove={this.onTouchMove}
onTouchEnd={this.onTouchEnd}
/>
);
}
}
indexBase.ts
import React from "react";
export default class IndexBase<S, T> extends React.Component<S, T> {
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");
};
}