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页面
<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的具体代码
<!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传递消息
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 - 全球开发者的开源社区,开源代码托管平台