uniapp展示本地swf格式文件,实现交互

概览

uniapp打包的Android项目实现本地swf格式文件的展示,并且能够进行交互

需求分析

1、因为是打包的Android项目展示本地的swf文件,首先需要拿到这个本地的swf文件路径

2、如何在uniapp的vue页面中展示swf,因为没有直接展示swf文件的标签/组件,考虑使用web-view组件来进行展示swf文件

3、直接使用web-view组件无法展示swf,使用html先展示swf,然后把html链接放到web-view中进行展示

4、html中如何展示swf,把swf转为html来进行展示这个swf文件(使用开源的js实现,下载地址:https://download.csdn.net/download/ahualong1/89900202

具体实现

1、flashPage.vue页面

javascript 复制代码
<template>
	<view :style="{height: screenHeight + 'px'}">
		<!-- <titleViewVue :titleName="titleName" class="VideoTitleViewClass"></titleViewVue> -->
		<web-view :src="url" @message="handlePostMessage"></web-view>
	</view>
</template>

<script>
	import titleViewVue from '../../components/titleView/titleView.vue'
	import {uploadStudyTime} from '@/api/api.js'
	export default {
		components: {
			titleViewVue
		},
		data() {
			return {
				titleName: '',//标题
				SubjectId: '',
				videoSrc: '',//视频资源本地地址
				videoHeight: '',
				videoWidth: '100%',
				screenHeight: '',
				
				startTime: 0,
				fileUrl: '',
				url: ''
			}
		},
		onLoad(option) {
			this.startTime = Date.now()
			this.screenHeight = getApp().globalData.screenHeight;
			// 定义视频URL
			this.titleName = option.titleName?option.titleName:''
			this.SubjectId = option.SubjectId + ''
			this.fileUrl = option.url
			this.url = '/static/flash.html?filePath=' + plus.io.convertLocalFileSystemURL(this.fileUrl) + '&titleName=' + this.titleName
		},
		onUnload() {
			if(!getApp().globalData.isGuest){
				this.uploadSduyTimePage()
			} 
		},
		methods: {
			uploadSduyTimePage(){
				var upLoadTime = {
					"subject_id": this.SubjectId,
					"date": this.$utils.formatDateTime(),
					"time": Date.now() / 1000 - this.startTime / 1000
				}
				this.startTime = 0
				const arryUpload = []
				arryUpload[0] = upLoadTime
				uploadStudyTime({"data": arryUpload}).then(res=>{
					if(res.data.code == 200 && res.data.status == 'success'){
						
					}else{
						if(uni.getStorageSync('uploadTime')){
							arryUpload = []
							arryUpload = uni.getStorageSync('uploadTime')
							arryUpload.push(upLoadTime)
							uni.setStorageSync('uploadTime',arryUpload)
						}else{
							arryUpload = []
							arryUpload.push(upLoadTime)
							uni.setStorageSync('uploadTime',arryUpload)
						}
					}
				})
			},
			handlePostMessage(){
				uni.navigateBack()
			}
		}
	}
</script>

<style>

</style>

码中fileUrl 为uni.saveFile()保存到本地的路径,直接打开是无法展示的,需要使用plus的api:plus.io.convertLocalFileSystemURL(this.fileUrl) 将本地文件系统的URL转换为跨域可以访问的URL

2、flash.html的具体代码

javascript 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>SWFObject 2 dynamic publishing example page</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="swf2js.js"></script>

	</head>
	<body>
		<div style="width: 100%;height: auto;display: flex;align-items: center;justify-content: space-between;flex-direction: row;padding: 8px;background-color: #87B5F9;">
			<img src="leftarrow.png" style="height: 20px;" id="backClickId" />
			<div style="flex: 1;display: flex;align-items: center;justify-content: center;">
				<div id="titleNameId" style="color: #FFFFFF;font-size: 20px;"></div>
			</div>
		</div>
	</body>
	<!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 -->
	<!-- <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
	<!-- uni 的 SDK,必须引用。 -->
	<script type="text/javascript" src="../hybrid/html/web/uni.webview.js">

	</script>
	<script type="text/javascript">
		document.getElementById('backClickId').addEventListener('click', function() {
			uni.postMessage({
				data: {
					"back": true
				}
			});
		});
		window.onload = function() {
			if(location.href.includes('filePath')){
				swf2js.load(getParameterByName('filePath', ''))
			}
			if (location.href.includes('titleName')) {
				document.getElementById('titleNameId').textContent = getParameterByName('titleName', '');
			} else {
				document.getElementById('titleNameId').textContent = '模拟训练';
			}
		};

		function getParameterByName(name, url) {
			if (!url) url = location.href;
			name = name.replace(/[\[\]]/g, '\\$&');
			var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
				results = regex.exec(url);
			if (!results) return null;
			if (!results[2]) return '';
			return decodeURIComponent(results[2].replace(/\+/g, ' '));
		}
	</script>
</html>

其中uni.postMessage 是web-view向uniapp.vue传递消息

javascript 复制代码
document.getElementById('backClickId').addEventListener('click', function() {
			uni.postMessage({
				data: {
					"back": true
				}
			});
		});

swf2js.load(getParameterByName('filePath', ''))为加载本地swf格式的资源代码

需要引入<script type="text/javascript" src="swf2js.js"></script>

方法getParameterByName 是获取打开的链接获取参数的方法

运行项目到模拟器或真机进行展示swf,就OK了。

可以查看项目中 pages-> flashPage->flashPage.vue页面

项目地址:https://download.csdn.net/download/ahualong1/89900184

参考开源项目:GitCode - 全球开发者的开源社区,开源代码托管平台

相关推荐
前端小小王35 分钟前
React Hooks
前端·javascript·react.js
C4rpeDime41 分钟前
自建MD5解密平台-续
android
迷途小码农零零发44 分钟前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀1 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
鲤籽鲲2 小时前
C# Random 随机数 全面解析
android·java·c#
ekskef_sef3 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6414 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻4 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云4 小时前
npm淘宝镜像
前端·npm·node.js