安卓支付宝小程序空白

Start by reproducing the blank Android Alipay mini-program behavior and inspect index.alipay.tsx, especially onCanvasReady and createCanvas, alongside indexBase.ts. Compare the Android path with the working simulator and iOS behavior; done means the canvas renders on a real Android device without errors.

模拟器显示正常。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");
  };
}