在抖音小程序中使用

阅读时间：2分钟更新于 2025-08-26 9:47

⚠️ 注意：

  • 抖音小程序环境暂不支持【多媒体（音视频）插件】、【陀螺仪插件】

读这篇的前提，你需要已经了解 小程序文档指引__抖音开放平台 和 Galacean Effects。

基本使用

此使用方式为基于 Galacean Effects npm 三方包方式接入。

1、安装依赖

# 安装 Galacean Effects 的小程序/小游戏适配器
$ npm i @galacean/appx-adapter --save
# 安装 Galacean Effects
$ npm i @galacean/effects --save

2、在小程序中使用

<view style="width: 100vw; height: 100vh; background-color: black;">
  <canvas type="webgl"
          id="J-webglCanvas"
          canvas-id="canvas"
          style="width: 100%; height: 100%;"
  >
  </canvas>
</view>
import { registerCanvas } from '@galacean/appx-adapter/douyin';
import { Player } from '@galacean/effects/douyin';

// 1. 使用 adapter 方法注册 canvas
const canvas = await registerCanvas({ id: '#J-webglCanvas' });

// 2. 通过创建的 canvas 对象实例化一个 Galacean Effects 播放器
const player = new Player({
  canvas,
  renderFramework: 'webgl',
});

// 3. 加载资源并执行播放
void this.player.loadScene('url');

完整示例：https://github.com/galacean/effects-miniprogram-demo/tree/douyin

交互

<view >
  <canvas  
    type="webgl" 
    id="J-webglCanvas" 
    canvas-id="canvas"
    style="width: 100%; height: 100%;" 
    bindtouchstart="onTouchStart"
    bindtouchmove="onTouchMove"
    bindtouchend="onTouchEnd"
    bindtouchcancel="onTouchCancel"
  >
  </canvas>
</view>

import {
  dispatchTouchStart,
  dispatchTouchMove,
  dispatchTouchEnd,
  dispatchTouchCancel,
} from '@galacean/appx-adapter/douyin';

Page({
  onTouchEnd(e) {
    dispatchTouchEnd(e);
  },
  onTouchStart(e) {
    dispatchTouchStart(e);
  },
  onTouchMove(e) {
    dispatchTouchMove(e);
  },
  onTouchCancel(e) {
    dispatchTouchCancel(e);
  },
});

插件使用

小程序中支持 GE 的 Spine、3D 模型插件，使用时需要安装下方对应的依赖：

$ npm i @galacean/effects-plugin-spine --save
$ npm i @galacean/effects-plugin-model --save

Spine

需要额外引入 Spine 插件包：

import { Player } from '@galacean/effects/douyin';
import '@galacean/effects-plugin-spine/douyin';

3D 模型

需要额外 3D 模型插件包：

import { Player } from '@galacean/effects/douyin';
import '@galacean/effects-plugin-model/douyin';

基于原生 js/ts 模版的小程序

通过直接引入编译打包好的 effects 库代码文件在原生 js/ts 小程序中使用。

1、获取依赖 lib

根据 demo 项目 main 分支的提示构建好 mp-douyin-galacean-effects.js 文件。

2、在小程序中使用

<view style="width: 100vw; height: 100vh; background-color: black">
  <canvas type="webgl"
          id="J-webglCanvas"
          canvas-id="canvas"
          style="width: 100%; height: 100%;">
  </canvas>
</view>
// 1. 引入 mp-douyin-galacean-effects.js 文件，~/libs 根据项目有所不同
import { adapter, Player } from '~/libs/mp-douyin-galacean-effects';

// 2. 使用 adapter 方法注册 canvas
const canvas = await adapter.registerCanvas({ id: '#J-webglCanvas' });

// 3. 通过创建的 canvas 对象实例化一个 Galacean Effects 播放器
const player = new Player({
  canvas,
  renderFramework: 'webgl',
});

// 4. 加载资源并执行播放
await this.player.loadScene('url');

完整示例：

附：

Preview