pixi-miniprogram 使用方法
本模板主要使用Pixi引擎作为基础,实现手淘Canvas绘制,我们对Pixi原有4.8.8引擎进行了改写,实现了对Canvas的兼容。项目开发非常接近web Pixi。
开发IDE:
注意:
- 目前Canvas要求手淘版本 > 9.7.0,项目中需要进行判断版本,进行降级抄底
- Canvas 2d: 要求手淘版本 > 9.7.0
- webGL : 要求手淘版本 > 9.9.0
1.开启使用Canvas:
app.json 增加配置项:
{
"pages": [
"pages/index/index"
],
"window": {
"defaultTitle": "My App",
"enableSkia": "true"
}
}
2.安装依赖
2.1:npm包安装
npm install @tbminiapp/pixi-miniprogram-canvas --by=yarn
npm install @tbminiapp/pixi-miniprogram-engine --by=yarn
npm install @types/pixi.js@4.7.5 --by=yarn
3.引用pixi-canvas组件
<pixi-canvas id="pixi-canvas" options={{appOptions}} destroyAppOnDidUnmount="true" onError="onPixiCanvasError" onDidUnmount="onPixiCanvasDidUnmount" onAppInit="onAppInit"></pixi-canvas>
{
"usingComponents":{
"pixi-canvas": "@tbminiapp/pixi-miniprogram-canvas/components/pixi-canvas/pixi-canvas"
}
}
4.在js中编写pixi-canvas的 事件监听
import { Texture, Sprite, Text } from "@tbminiapp/pixi-miniprogram-engine";
Page({
canvas: null,
context: null,
pixiApplication: null,
pixiOptions: null,
data: {
appOptions: {
width:750,
height:750,
backgroundColor: 0x00000,
forceCanvas: true
}
},
onLoad(query) {
console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
},
onPixiCanvasError(e){
console.log(e);
},
onPixiCanvasDidUnmount(e){
this.canvas = null;
this.context = null;
this.pixiApplication = null;
},
onAppInit(e) {
const { canvas, context, options, application } = e
this.canvas = canvas;
this.context = context;
this.pixiApplication = application;
this.pixiOptions = options;
const { stage } = application
const text = new Text('欢迎使用阿里小程序Pixi引擎', {
fontSize: 32,
fill: 0xFF0000
});
text.anchor.set(.5, 0);
const { width, height } = application.scrren;
stage.addChild(text);
text.position.set(width / 2, 200);
const sprite = new Sprite(Texture.from('/resources/logo.png'));
stage.addChild(sprite);
sprite.anchor.set(.5);
sprite.position.set(width / 2, height / 2);
},
onReady() {
},
onShow() {
},
onHide() {
},
onUnload() {
},
onTitleClick() {
},
onPullDownRefresh() {
},
onReachBottom() {
},
onShareAppMessage() {
return {
title: 'Demo-Application',
desc: 'Demo-Application',
path: 'pages/application/index',
};
},
});