小程序技术分享| 小程序集成 pixi 渲染引擎

开发小程序时一些特殊场景需要使用canvas,但canvas渲染一些特效时太过耗费性能造成页面卡顿并且展示效果也不好(拖动卡顿不连贯等)，因此使用渲染引擎来满足需求。本文在小程序中使用 pixi 渲染引擎。

引入改造后的 pixi

pixi与小程序不是很匹配，需要进行对应改造才可在小程序中使用。
本文中使用spine、animate等，可保存至同一文件夹下

下载地址 gitee 仓库

• pixi-animate.js

• pixi-spine.js

• pixi.miniprogram.js

• unsafeEval.js(必备，牵连到一些事件转换)

使用

页面中添加 canvas

   <canvas type="webgl" id="croplandCanvas" class="cropland_canvas" bindtouchstart="touchEvent" bindtouchmove="touchEvent" bindtouchend="touchEvent" bindtouchcancel="touchEvent"></canvas>
   <canvas type="2d" id="canvas2d" class="canvas_test"></canvas>
   <canvas type="2d" id="canvas2dText" class="canvas_test"></canvas>

特效实现

初始定义

/** pixi 相关 */
import {
   
   
    createPIXI
} from "../libs/pixi.miniprogram";
const unsafeEval = require("../libs/unsafeEval")