PixiJS 的相关介绍与动画生成方法等请参考 官方说明
依赖手淘版本 >= 9.8.0 的环境。
1. 通过 npm 安装：
npm install @tbminiapp/pixi-miniprogram-engine --by=yarn npm install @types/pixi.js@4.7.5 --by=yarn
2. app.json 里添加 enableSkia 配置：
{ "pages": [ "pages/index/index" ], "window": { "defaultTitle": "My App", "enableSkia":"true" } }
3. axml 里传入 canvas 对象用于适配：
<canvas id="canvas" type="webgl" onReady="onCanvasReady" class="canvas" onTouchStart="onTouchHandle" onTouchMove="onTouchHandle" onTouchEnd="onTouchHandle"></canvas>
4. 使用 Pixi 接口：
//引入pixi引擎 import * as PIXI from "@tbminiapp/pixi-miniprogram-engine"; // registerCanvas 注册canvas给PIXI const { registerCanvas, devicePixelRatio } = PIXI.miniprogram; Page({ // 供pixi渲染的canvas pixiCanvas:null, // canvas的onReady事件侦听函数 onCanvasReady onCanvasReady() { // 建立canvas引用 my._createCanvas({ id: "canvas", success: (canvas) => { const systemInfo = my.getSystemInfoSync(); // 拿到当前设备像素密度 const dpr = systemInfo.pixelRatio; // 拿到当前设备的宽高 const windowWidth = systemInfo.windowWidth; const windowHeight = systemInfo.windowHeight; // 为canvas设定宽高（需要设备宽高* 像素密度）; canvas.width = windowWidth * dpr; canvas.height = windowHeight * dpr; this.pixiCanvas = canvas; //为pixi引擎注册当前的canvas registerCanvas(canvas); //初始化PIXI.Application //计算application的宽高 const size = { width: canvas.width / devicePixelRatio, height: canvas.height / devicePixelRatio, }; const context = canvas.getContext('2d'); // canvas.getContext('webgl') const application = new PIXI.Application({ width: size.width, height: size.height, view: canvas, context: context, transparent: true, // 强制使用2d上下文进行渲染，如果为flase,则默认使用webgl渲染 forceCanvas: true, // 设置resolution 为像素密度 resolution: devicePixelRatio, }); }, }); }, // 监听小程序canvas的touch事件，并触发pixi内部事件 onTouchHandle(event) { if (this.pixiCanvas && event.changedTouches && event.changedTouches.length) { this.pixiCanvas.dispatchEvent(event); } } });
1. 目前 Canvas 渲染模式要求手淘版本 > 9.7.0，项目中需要进行判断版本，不支持的版本需要提示用户降级。
2. 目前 WebGL 渲染模式要求手淘版本 > 9.9.0，项目中需要进行判断版本，不支持的版本需要提示用户降级。
3. 目前小程序IDE只支持”真机调试“和“预览”方式进行项目debug和预览，为保证构建速度，建议使用1.13.4版本以上IDE。
4. 小程序IDE模拟器中暂时无法预览和调试。
