PIXI.container is not a constructor
问题遇到的现象和发生背景
我是想从https://github.com/wechat-miniprogram/minigame-demo%E9%87%8C%E7%9A%84%E5%AF%B9%E5%B1%80%E5%8C%B9%E9%85%8D%E5%8A%9F%E8%83%BD%E5%8A%A0%E5%85%A5%E5%88%B0%E6%88%91%E7%9A%84%E5%BE%AE%E4%BF%A1%E5%B0%8F%E6%B8%B8%E6%88%8F%E9%87%8C%E9%9D%A2 ，但不知道为什么会有这个错误 PIXI.container is not a constructor
用代码块功能插入代码，请勿粘贴截图
doublebattle.js
const screenWidth = window.innerWidth
const screenHeight = window.innerHeight
const ReturnHome = new Image()
const DoubleWindBackground = new Image()
const Choosing = new Image()
ReturnHome.src = 'images/returnhome.png'
DoubleWindBackground.src = 'images/background0.jpg'
Choosing.src = 'images/rj.png'
export default class MessageWindow{
renderDouble(ctx) {
ctx.drawImage(DoubleWindBackground,
0,
0,
1080,
1920,
0,
0,
screenWidth,
screenHeight)
ctx.drawImage(ReturnHome,
screenWidth*170/390,
screenHeight*640/850,
60*screenWidth/390,
60*screenHeight/850)
this.ReturnArea = {
startX: screenWidth*170/390,
startY: screenHeight*640/850,
endX: screenWidth*230/390,
endY: screenHeight*700/850
}
this.ChoosingAArea = {
startX: screenWidth*60/390,
startY: screenHeight*182/850,
endX: screenWidth*320/390,
endY: screenHeight*248/850
}
this.ChoosingBArea = {
startX: screenWidth*60/390,
startY: screenHeight*296/850,
endX: screenWidth*320/390,
endY: screenHeight*360/850
}
this.ChoosingCArea = {
startX: screenWidth*60/390,
startY: screenHeight*410/850,
endX: screenWidth*320/390,
endY: screenHeight*474/850
}
this.ChoosingDArea = {
startX: screenWidth*60/390,
startY: screenHeight*528/850,
endX: screenWidth*320/390,
endY: screenHeight*580/850
}
}
}
import view from './view';
module.exports = function (PIXI,app, obj) {
const gameServer = wx.getGameServerManager(),
matchId = {
'1v1': 'npvL4nYFZCEJuKT6jQwiWGO2FKMB6gIYN9svnB6C8PI',
'3v3': 'rgisvVgmGZz0p3C61zIUexIgDibx0DNzbNTn4QcHZEc',
};
let recordFunc, isOncelogin;
return view(PIXI, app, obj, (data) => {
let { status, pattern, drawFn } = data;
switch (status) {
case 'startMatch':
gameServer.startMatch({ match_id: matchId[pattern] }); // 开始匹配
wx.showLoading({ title: '匹配中...' });
drawFn(); // 更新UI
gameServer.onMatch(
(recordFunc = function (res) {
// 匹配成功
wx.hideLoading();
drawFn(res.groupInfoList); // 更新UI
gameServer.offMatch(recordFunc);
recordFunc = null;
})
);
break;
case 'cancelMatch':
// 取消匹配
if (recordFunc) wx.hideLoading(), gameServer.offMatch(recordFunc), (recordFunc = null);
gameServer.cancelMatch({ match_id: matchId[pattern] });
drawFn(); // 更新UI
break;
case 'login':
// 登录游戏服务
if (!isOncelogin) {
gameServer.login();
gameServer.onLogout(gameServer.login);
isOncelogin = true;
}
break;
case 'logout':
// 登出游戏服务
if (!recordFunc) {
gameServer.offLogout(gameServer.login);
gameServer.logout();
isOncelogin = false;
}
break;
}
});
};
view.js
import { p_button, p_text, p_box, p_img, p_scroll } from '../libs/component/index';
import fixedTemplate from '../libs/template/fixed';
import compareVersion from '../libs/compareVersion';
module.exports = function (PIXI, app, obj, callBack) {
if (compareVersion(wx.getSystemInfoSync().SDKVersion, '2.14.4') < 0) throw '基础库版本过低';
let container = new PIXI.container(),
{ goBack, title, api_name, underline, logo, logoName } = fixedTemplate(PIXI, {
obj,
title: '对局匹配',
api_name: 'startMatch',
}),
box = p_box(PIXI, {
height: 372 * PIXI.ratio,
y: underline.height + underline.y + 24 * PIXI.ratio,
}),
peopleCounting = p_text(PIXI, {
content: '当前已成功匹配到的总人数：0',
fontSize: 26 * PIXI.ratio,
fill: 0x9f9f9f,
x: 30 * PIXI.ratio,
y: box.height + box.y + 38 * PIXI.ratio,
relative_middle: { point: obj.width / 2 },
}),
scroll = p_scroll(PIXI, {
width: box.width,
height: box.height,
}),
solo = p_button(PIXI, {
width: 580 * PIXI.ratio,
y: peopleCounting.height + peopleCounting.y + 38 * PIXI.ratio,
}),
multiUser = p_button(PIXI, {
width: 580 * PIXI.ratio,
y: solo.height + solo.y + 20 * PIXI.ratio,
}),
cancelMatch = p_button(PIXI, {
width: 576 * PIXI.ratio,
height: 90 * PIXI.ratio,
border: { width: 2 * PIXI.ratio, color: 0xd1d1d1 },
alpha: 0,
y: logoName.y - 150 * PIXI.ratio,
});
let matchList = [],
pattern;
function generateList(groupInfoList) {
for (let i = 0; i < groupInfoList.length; i++) {
let info = groupInfoList[i].memberInfoList[0];
matchList[i] = p_box(PIXI, {
height: 100 * PIXI.ratio,
border: {
width: PIXI.ratio | 0,
color: 0xe5e5e5,
},
y: i && matchList[i - 1].height + matchList[i - 1].y - (PIXI.ratio | 0),
});
matchList[i].addChild(
p_text(PIXI, {
content: `${i + 1}`,
fontSize: 46 * PIXI.ratio,
x: 30 * PIXI.ratio,
relative_middle: { containerHeight: matchList[i].height },
}),
p_img(PIXI, {
width: 75 * PIXI.ratio,
x: 100 * PIXI.ratio,
src: info.avatarUrl,
relative_middle: { containerHeight: matchList[i].height },
}),
p_text(PIXI, {
content: info.nickName,
fontSize: 42 * PIXI.ratio,
x: 225 * PIXI.ratio,
relative_middle: { containerHeight: matchList[i].height },
})
);
}
peopleCounting.turnText(`当前已成功匹配到的总人数：${matchList.length}`);
return matchList;
}
function destroyList() {
if (!matchList.length) return;
scroll.myRemoveChildrenFn(0, matchList.length);
for (let i = 0; i < matchList.length; i++) matchList[i].destroy(true);
matchList = [];
peopleCounting.turnText(`当前已成功匹配到的总人数：${matchList.length}`);
}
box.addChild(scroll);
// 点击匹配 (1 V 1) start
solo.myAddChildFn(
p_text(PIXI, {
content: `点击匹配 (1 V 1)`,
fontSize: 36 * PIXI.ratio,
fill: 0xffffff,
relative_middle: { containerWidth: solo.width, containerHeight: solo.height },
})
);
solo.onClickFn(() => {
destroyList();
callBack({
status: 'startMatch',
pattern: (pattern = '1v1'),
drawFn(groupInfoList) {
if (groupInfoList) {
scroll.myAddChildFn(...generateList(groupInfoList));
btnReversalDisplay();
return;
}
solo.hideFn();
multiUser.hideFn();
cancelMatch.showFn();
},
});
});
// 点击匹配 (1 V 1) end
// 点击匹配 (3 V 3) start
multiUser.myAddChildFn(
p_text(PIXI, {
content: `点击匹配 (3 V 3)`,
fontSize: 36 * PIXI.ratio,
fill: 0xffffff,
relative_middle: { containerWidth: multiUser.width, containerHeight: multiUser.height },
})
);
multiUser.onClickFn(() => {
destroyList();
callBack({
status: 'startMatch',
pattern: (pattern = '3v3'),
drawFn(groupInfoList) {
if (groupInfoList) {
scroll.myAddChildFn(...generateList(groupInfoList));
btnReversalDisplay();
return;
}
solo.hideFn();
multiUser.hideFn();
cancelMatch.showFn();
},
});
});
// 点击匹配 (3 V 3) end
// 取消匹配 start
cancelMatch.hideFn();
cancelMatch.myAddChildFn(
p_text(PIXI, {
content: '取消匹配',
fontSize: 36 * PIXI.ratio,
fill: 0x53535f,
relative_middle: {
containerWidth: cancelMatch.width,
containerHeight: cancelMatch.height,
},
})
);
cancelMatch.onClickFn(() => {
callBack({
status: 'cancelMatch',
pattern,
drawFn: btnReversalDisplay,
});
});
// 取消匹配 end
function btnReversalDisplay() {
solo.showFn();
multiUser.showFn();
cancelMatch.hideFn();
}
window.router.getNowPage((page) => {
page.reload = function () {
logo.reloadImg({ src: 'images/logo.png' });
callBack({ status: 'login' });
};
});
goBack.callBack = callBack.bind(null, { status: 'logout' });
callBack({ status: 'login' });
container.addChild(goBack, title, api_name, underline, box, peopleCounting, solo, multiUser, cancelMatch, logo, logoName);
app.stage.addChild(container);
return container;
};
import './js/libs/weapp-adapter'
import './js/libs/symbol'
import Main from './js/main'
import * as PIXI from './js/libs/pixi.min';
import './js/libs/weapp-adapter';
import pmgressBar from './js/libs/pmgressBar';
import share from './js/libs/share';
new Main()
wx.cloud.init({ env: 'example-69d3b' });
wx.updateShareMenu({
withShareTicket: true,
});
const { pixelRatio, windowWidth, windowHeight } = wx.getSystemInfoSync();
// 初始化canvas
let app = new PIXI.Application({
width: windowWidth * pixelRatio,
height: windowHeight * pixelRatio,
view: canvas,
backgroundColor: 0xf6f6f6,
preserveDrawingBuffer: true,
antialias: true,
resolution: 1,
});
// 因为在微信小游戏里canvas肯定是全屏的，所以映射起来就很简单暴力
PIXI.interaction.InteractionManager.prototype.mapPositionToPoint = (point, x, y) => {
point.x = x * pixelRatio;
point.y = y * pixelRatio;
};
PIXI.ratio = (windowWidth * pixelRatio) / 750;
let loadingFn = pmgressBar(PIXI, app, {
width: windowWidth * pixelRatio,
height: windowHeight * pixelRatio,
});
PIXI.loader
.add([
'images/official.png',
'images/APIicon.png',
'images/storage-fileSystem.png',
'images/rendering.png',
'images/network.png',
'images/media.png',
'images/worker.png',
'images/star.png',
'images/customerService.png',
'images/facility.png',
'images/right.png',
'images/abilityOpen.png',
'images/interface.png',
'images/AD.png',
'images/recommend.png',
])
.load(() => {
wx.loadSubpackage({
name: 'api',
success() {
let router = require('./js/api/game'),
options = wx.getLaunchOptionsSync(),
query = options.query;
router(PIXI, app, {
width: windowWidth * pixelRatio,
height: windowHeight * pixelRatio,
pixelRatio,
});
share(); //全局分享
if (Object.keys(query).length && query.pathName) {
window.router.navigateTo(query.pathName, query, options);
}
wx.onShow((res) => {
let query = Object.assign(window.query || {}, res.query),
noNavigateToRequired = !['VoIPChat'].includes(query.pathName);
if (Object.keys(query).length && query.pathName) {
noNavigateToRequired && window.router.navigateBack();
!window.query && !noNavigateToRequired && window.router.navigateTo(query.pathName, query, res);
noNavigateToRequired && window.router.navigateTo(query.pathName, query, res);
}
noNavigateToRequired && (window.query = null);
});
loadingFn(100);
},
}).onProgressUpdate((res) => {
loadingFn(res.progress);
});
});
应该是你没引用对哦，按他里面的去使用呗