uniapp引入使用pixi.js遇到的坑

sakura~~

已于 2023-05-24 11:03:00 修改

阅读量946

点赞数 2

文章标签： javascript uni-app 前端

于 2023-05-24 10:58:37 首次发布

本文链接：https://blog.csdn.net/weixin_57286220/article/details/130842581

版权

如果没有package.json的话，就先初始化一下 npm init -y
然后npm下载

 npm install --save pixi.js

检查一下是什么版本

 npm ls pixi.js

我最开始是7.2.4，但是会报错exports is not defined，所以我降到了4.8.9版本
在这里插入图片描述
页面上会出现一个黑色的正方形，就表示引入成功啦

<template>
	<view>
		<view id='pixi'></view>
	</view>
</template>

<script>
	import * as PIXI from "pixi.js"
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.initPixi()
		},
		methods: {
			initPixi() {
				const PIXI = require('pixi.js')
				console.log(PIXI);
				let type = "WebGL"
				if (!PIXI.utils.isWebGLSupported()) {
					type = "canvas"
				}

				PIXI.utils.sayHello(type)
				this.app = new PIXI.Application({
					width: 456, // default: 800
					height: 456, // default: 600
				})
				document.getElementById("pixi").appendChild(this.app.view);
			}
		}
	}
</script>