当前位置: 首页 > news >正文

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;// 定义视频URLthis.titleName = option.titleName?option.titleName:''this.SubjectId = option.SubjectId + ''this.fileUrl = option.urlthis.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 = 0const arryUpload = []arryUpload[0] = upLoadTimeuploadStudyTime({"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 - 全球开发者的开源社区,开源代码托管平台

http://www.lryc.cn/news/465861.html

相关文章:

  • ZYNQ:流水灯实验
  • StratoVirt中vCPU拓扑(SMP)配置与实现的深度解析
  • Xml 相关注解使用
  • 本地时间与时区时间转化(以Helpdesk和BPI Challenge 2012为例)
  • Golang | Leetcode Golang题解之第482题秘钥格式化
  • 代码随想录 -- 贪心 -- 无重叠区间
  • sql server xml
  • WPF中MVVM的应用举例
  • 编程题 7-24 约分最简分式【PAT】
  • 尚硅谷大数据Flink1.17实战教程-笔记04【Flink DataStream API】
  • MySQL常见优化策略
  • gyp ERR stack Error: Command failed: D:\python\python.EXE -c import sys; print
  • 代码随想录day6| 242.有效的字母异位词 、349. 两个数组的交集、 202. 快乐数 、 1. 两数之和
  • 《IDE 巧用法宝:使用技巧全解析与优质插件推荐》
  • 安全见闻---清风
  • Python爬虫:urllib_post请求百度翻译(06)
  • GPIO输入和输出
  • 时序动作定位 | DDG-Net:弱监督时间动作定位的判别驱动图网络(ICCV 2023)
  • mapbox没有token/token失效,地图闪烁后变空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.
  • C#运动控制
  • 监控易监测对象及指标之:Kafka中间件JMX监控指标解读
  • PDF文件为什么不能编辑是?是啥原因导致的,有何解决方法
  • 海螺AI在人类表情刻画中的应用:技术与创新
  • 【Python实战】几种打包python代码的方法!!!
  • (已开源-ECCV2024)BEV检测模型-LabelDistill,使用真值进行知识蒸馏
  • web前端第一次作业
  • CMake 开发者手册
  • Redis入门:在Java程序中高效使用Redis
  • 活着就好20241021
  • 阿里字节技术管理岗位面试要求