uniapp 打包APP 使用 Galacean Effects 的特效

访问 Galacean Editor

新建test1文件夹,将导出的内容复制进去

新建test2.vue文件

复制代码
<template>
	<view v-html="html">
		
	</view>
	<view v-show="false" :data="url" :change:data="requestModule.realRequest"></view>
</template>

<script setup>
	import { onMounted } from 'vue'
	import { ref } from 'vue'
	
	
	const html = ref('<div id="container" style="width: 100vw; height: 100vh;"></div>')

	const url = ref('')
	
	onMounted(() => {
	  //let container = document.getElementById('container');
		
	  
	  //console.log(12232262323);
	  //console.log(container);
	  
	  url.value = './static/test1/game.json';
	})
</script>


<script module="requestModule" lang="renderjs">
	import { Player } from '@galacean/effects';
	export default {
		methods: {
			realRequest(newValue, oldValue) {
				console.log(4111);
				console.log(newValue);
				//console.log(oldValue);
				
				if(newValue != null && newValue != ''){
					let container = document.getElementById('container');
					console.log(container);
					
					// 1. 实例化一个播放器
					const player = new Player({
					  container: container,
					  // 初始化 Player 或 loadScene 时遇到的异常
					  onError: (err, ...args) => {
					    // 降级逻辑,以下仅供参考
					    container.style.backgroundImage = 'url("替换为降级图路径/链接")';
					  },
					});
					
					// 2. 加载并播放动效资源
					void player.loadScene(newValue);
				}
			}
		}
	};
</script>

<style>
	       
</style>

修改 url.value = './static/test1/game.json'; 为你复制进test1目录下的.json文件的路径,即可看到特效

相关推荐
郑州光合科技余经理8 小时前
同城小程序开发:同一笔单在用户端和商家端各显示到哪
android·java·开发语言·前端·后端·uni-app·php
普通人69 小时前
uniapp模版JS
开发语言·javascript·小程序·uni-app·1024程序员节
wiseyao12199 小时前
uniapp scroll-view滚动到最后
前端·javascript·uni-app
红红谈说12 小时前
同一套产品两个技术栈,双版本前端工程差异怎么收敛?
前端·uni-app·vue3·前后端分离·双版本维护·接口约定
hudie7651 天前
LikeShop 二开最常改的 5 个文件(附改前改后对比)
前端·uni-app·php·个人开发
梅雅达编程笔记2 天前
Day 17 | uni-app 小程序:前端从零搭建
微信小程序·typescript·uni-app·vue3·pinia·前端开发·全栈
一渊之隔2 天前
uniapp BLE 开发踩坑:小米手机数据接收截断问题排查全记录
智能手机·uni-app
阿俊-全栈开发2 天前
LikeShop 单商户标准版 UniApp 端二开:页面组件复用与自定义主题适配
uni-app·likeshop开源商城·likeshop单商户标准版·多商户源码
半生过往3 天前
uni-app多端项目工作笔记
笔记·uni-app
00后程序员张3 天前
无需 Mac 的 iOS App 上架工具,开心上架Appuploader 负责哪些环节
android·ios·小程序·https·uni-app·iphone·webview