uniapp nvue中使用svga动画文件

1. 下载插件  https://ext.dcloud.net.cn/plugin?id=1711

2.代码可以用网络的或者本地的  

关键代码 var iconPath = plus.io.convertLocalFileSystemURL(item)

<template>
	<view class="">
		{{filePath}}
		<tx-svga ref="maxTxAnimation"
					class="maxTxAnimation" 
					@statechange="onProgress"
					:style="{height:windowHeight}"
				
		>
		</tx-svga>
		<view class="foot">
			<view class="circleBoxAll">
				<view class="circleBox" @click="playAnimation()">
					<text class="circleIco phone"></text>
					<text class="hint">播放动画</text>
				</view>
				<view class="circleBox" @click="pauseAnimation()">
					<text class="circleIco phone"></text>
					<text class="hint">暂停动画</text>
				</view>
				<view class="circleBox" @click="resumeAnimation()">
					<text class="circleIco phone"></text>
					<text class="hint">继续动画</text>
				</view>
			</view>
		</view>
	</view>
	

</template>

<script>

	const svgaModel = uni.requireNativePlugin('tx-svgamodel')
	export default {
		data() {
			return {
				filePath:""
			}
		},
		onLoad(params) {
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			var str='/static/angel.svga'
			this.filePath = plus.io.convertLocalFileSystemURL(str)
		
		},
		onReady() {
			 var me = this;
			 this.play();
		},
	
		onNavigationBarButtonTap() {
			this.$refs.maxTxAnimation.cancelAnimation();
			uni.navigateBack({
			    delta: 1,
			    animationType: 'pop-out',
			    animationDuration: 200
			});
		},
		
		methods: {
			play(){

			},
			
			onPush(e){
				var msg = JSON.stringify(e);
				
			},
			playAnimation(){
				// var vArray = ['http://pgzxip.aiteds.com/data/upload/upload/nanwu.svga','http://www.biggold.net.cn/kingset.svga','http://www.biggold.net.cn/angel.svga','http://www.biggold.net.cn/loading-1.svga','http://www.biggold.net.cn/loading.svga','http://www.biggold.net.cn/show.svga','http://www.biggold.net.cn/story.svga','http://www.biggold.net.cn/TwitterHeart.svga'];
				var vArray = ['/static/angel.svga','/static/kingset.svga'];
				var item = vArray[Math.floor(Math.random()*vArray.length)];
				console.log(item);
				var iconPath = plus.io.convertLocalFileSystemURL(item)
				this.$refs.maxTxAnimation.playAnimation({"filePath":iconPath});
				// svgaModel.downloadUrls(item,result=>{
				// 	console.log(result);
				// 	this.$refs.maxTxAnimation.playAnimation({"filePath":result.filePath});
				// });
				
				
			},
			
			pauseAnimation(){
				this.$refs.maxTxAnimation.pauseAnimation();
			
			},
			resumeAnimation(){
				this.$refs.maxTxAnimation.resumeAnimation();
			},
			onProgress(e) {
				var result = e.detail;
				console.log(result);
			}
		}
	}
</script>

<style>
	
.maxTxPusher{
	width:750upx;
	background-color:#111111;
	position: fixed;
	top: 0;
	right: 0;
}
.foot{
	width: 710upx;
	position: fixed;
	bottom:0;
	left: 0;
	margin:20upx;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-direction: column;
}

.circleBoxAll{
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.circleBox{
	width: 200upx;
	padding:30upx 0;
	margin:10upx;
	align-items: center;
	flex-direction: column;
}

.circleIco{
	font-size:30upx;
	width:100upx;
	height:100upx;
	line-height:100upx;
	border-radius: 500px;
	border-style: solid;
	border-width: 1px; 
	border-color:#FFFFFF;
	text-align: center;
	font-family:iconfont;
	color: #FFFFFF;
	font-size:50upx;
}
.phone{
	background-color:#c5433a;
	border-style: solid;
	border-width: 1px; 
	border-color:#c5433a;
}
.hint{
	font-size:30upx;
	color: #FF0000;
	padding-top:20upx;
}

</style>