小程序

示例

这是部分 demo 在小程序上的展示情况：相关示例，需要使用字节小程序开发者工具打开

也可通过以下二维码体验

简介

Tinoe 目前已经适配字节小程序，除了 canvas 的创建和一些跨平台 API 的使用外，tinoe 在小程序中使用方式和在 web 端完全一致，具体使用可参考 web 端快速上手。

其中，提到的需要注意的两个部分是：跨平台 canvas 和跨平台 API，tinoe 对这两部分平台差异的处理如下：

跨平台 Canvas

目前 tinoe 初始化过程中需要传入 canvas 实例，canvas 实例需要你在初始化 tinoe 之前通过小程序的方式获取好，然后传入进行初始化，如下:

tt.createSelectorQuery()
  .select('#myCanvas')
  .node()
  .exec(res => {
    canvas = res[0].node;
    const stage = new Stage({ canvas });
  });

此外，另一个非常重要的是 canvas 的事件，在小程序当中，canvas 事件需要和语法绑定，没有类似 web 中的 addEventListener。 然而，为了方便用户使用，我们在 canvas 上额外增加了 addEventListener 方法，用户仍可以在 canvas 上绑定事件，但是需要在小程序中 dispatch 对应的事件，例如：

//tinoe中增加事件监听
stage.canvas.addEventListener('tap', handler)

//ttml中语法绑定
<canvas bindTap="onTap"></canvas>

//Page
Page({
  onTap(e){
    //真正的handler中触发dispatch
    canvasInstance.dispatch(e)
  }
})

跨平台 API

由于小程序中部分功能 API 与 web 中不一致，目前对 API 的处理主要如下：

export default abstract class Platform {
  //http请求
  abstract request(config: RequestConfig): Promise<unknown>;
  //base64转成arraybuffer
  abstract base64ToArrayBuffer(url: string): ArrayBuffer;
  //arraybuffer转成base64
  abstract arrayBufferToBase64(buffer: ArrayBuffer): string;
  //创建离屏canvas
  abstract createOffscreenCanvas(): Canvas;
  //创建Image标签
  abstract createImage(): Image;
  abstract requestAnimationFrame(): void;
  abstract cancelAnimationFrame(): void;
}

因此，如果你希望你的应用能够跨平台使用，且当你使用到上述相关内容时，请使用 tinoe 内部 platform 提供的方法，比如当你要创建一个 offscreen canvas 给 canvas texture 使用时，应该这样使用：

//创建一个跨平台的canvas
const canvas = Stage.platform.createOffscreenCanvas();
//把这个canvas传给tinoe
const texture = new CanvasTexture({ source: canvas });

其他 web 能力

需要注意的是，其他的 web 能力只能在 web 环境下使用，如果有需求，请联系我们