当前位置: 首页 > 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 - 全球开发者的开源社区,开源代码托管平台

相关文章:

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

概览 uniapp打包的Android项目实现本地swf格式文件的展示&#xff0c;并且能够进行交互 需求分析 1、因为是打包的Android项目展示本地的swf文件&#xff0c;首先需要拿到这个本地的swf文件路径 2、如何在uniapp的vue页面中展示swf&#xff0c;因为没有直接展示swf文件的标…...

ZYNQ:流水灯实验

实验目的 PL_LED0 和 PL_LED1 连接到 ZYNQ 的 PL 端&#xff0c;PL_LED0 和 PL_LED1循环往复产生流水灯的效果&#xff0c;流水间隔时间为 0.5s。 原理图 程序设计 本次实验是需要实现两个LED的循环熄灭点亮&#xff0c;时间间隔是0.5S,对时间间隔的控制使用计数器来完成。本…...

StratoVirt中vCPU拓扑(SMP)配置与实现的深度解析

tratoVirt作为计算产业中面向云数据中心的企业级虚拟化平台&#xff0c;通过一套统一的架构支持虚拟机、容器和Serverless三种场景。它不仅在轻量低噪、软硬协同和Rust语言级安全等方面具备关键技术竞争优势&#xff0c;还预留了接口和设计来支持更多特性&#xff0c;并向着标准…...

Xml 相关注解使用

XmlRootElement XmlAccessorType(XmlAccessType.FIELD) 在 Java 中&#xff0c;XmlRootElement 和 XmlAccessorType 是用于 JAXB&#xff08;Java Architecture for XML Binding&#xff09;库的注解。它们帮助开发人员将 Java 对象映射到 XML 格式&#xff0c;反之亦然。下面对…...

本地时间与时区时间转化(以Helpdesk和BPI Challenge 2012为例)

数据集&#xff1a;Helpdesk 数据来源&#xff1a;https://data.4tu.nl/datasets/94ee26c8-78f6-4387-b32b-f028f2103a2c/1 描述问题&#xff1a;此数据三列属性皆为object&#xff0c;此为本地时间&#xff0c;只需关注时间格式的变化。 经过格式转化&#xff0c; 数据集&am…...

Golang | Leetcode Golang题解之第482题秘钥格式化

题目&#xff1a; 题解&#xff1a; func licenseKeyFormatting(s string, k int) string {ans : []byte{}for i, cnt : len(s)-1, 0; i > 0; i-- {if s[i] ! - {ans append(ans, byte(unicode.ToUpper(rune(s[i]))))cntif cnt%k 0 {ans append(ans, -)}}}if len(ans) &…...

代码随想录 -- 贪心 -- 无重叠区间

435. 无重叠区间 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;与上一题十分相似。 依然按照左边界从小到大对数组排序&#xff0c;初始化删除的区间数为0&#xff1b; 从1遍历数组&#xff1a;如果当前区间的左边界小于上一个区间的右边界&#xff0c;说明这两…...

sql server xml

参考SQL Server XML学习笔记 - 缥缈的尘埃 - 博客园...

WPF中MVVM的应用举例

WPF&#xff08;Windows Presentation Foundation&#xff09;是微软开发的用于创建用户界面的框架&#xff0c;而MVVM&#xff08;Model-View-ViewModel&#xff09;模式是一种分离前端UI逻辑与后台业务逻辑的方法。在WPF中使用MVVM模式可以提高代码的可维护性、可测试性和可扩…...

编程题 7-24 约分最简分式【PAT】

文章目录 题目输入格式输出格式输入样例输出样例 题解解题思路完整代码 编程练习题目集目录 题目 分数可以表示为分子/分母的形式。编写一个程序&#xff0c;要求用户输入一个分数&#xff0c;然后将其约分为最简分式。最简分式是指分子和分母不具有可以约分的成分了。如 6 /…...

尚硅谷大数据Flink1.17实战教程-笔记04【Flink DataStream API】

尚硅谷大数据技术-教程-学习路线-笔记汇总表【课程资料下载】视频地址&#xff1a;尚硅谷大数据Flink1.17实战教程从入门到精通_哔哩哔哩_bilibili 尚硅谷大数据Flink1.17实战教程-笔记01【Flink 概述、Flink 快速上手】尚硅谷大数据Flink1.17实战教程-笔记02【Flink 部署】尚硅…...

MySQL常见优化策略

MySQL 是一种广泛使用的开源数据库管理系统&#xff0c;性能的优化对于应用程序的效率至关重要。以下是一些常见的 MySQL 优化策略&#xff0c;帮助提高数据库性能和响应速度。&#x1f680; 1. 合理的索引设计 使用索引&#xff1a;确保在常用的查询条件&#xff08;如 WHER…...

gyp ERR stack Error: Command failed: D:\python\python.EXE -c import sys; print

文章目录 ​​1、问题描述​​ ​​2、解决方案​​ 1、问题描述 网上clone的开源项目在执行​​npm install​​的时候报错如下&#xff1a; 2、解决方案 经过多方查证&#xff0c;后来发现是python的版本太高了&#xff0c;我重新配置了个python2.7的环境变量就好了。 …...

代码随想录day6| 242.有效的字母异位词 、349. 两个数组的交集、 202. 快乐数 、 1. 两数之和

代码随想录day6| 242.有效的字母异位词 、349. 两个数组的交集、 202. 快乐数 、 1. 两数之和 242.有效的字母异位词思路步骤 349. 两个数组的交集思路步骤 202. 快乐数思路步骤 1. 两数之和思路步骤 242.有效的字母异位词 思路 使用暴力解法时间复杂度为O(n^2)这道题需要判断…...

《IDE 巧用法宝:使用技巧全解析与优质插件推荐》

在日常撸代码的时候&#xff0c;相信兄弟们在IDEA 中用到不少插件&#xff0c;利用插件&#xff0c;不仅可以提高工具效率&#xff0c;撸起代码来&#xff0c;也格外的娃哈哈…… 一、IntelliJ IDEA 作为一个资深 Java 程序员&#xff0c;除了 IDEA 中默认的插件&#xff0c;我…...

安全见闻---清风

注&#xff1a;本文章源于泷羽SEC&#xff0c;如有侵权请联系我&#xff0c;违规必删 安全见闻1 泷哥语录&#xff1a;安全领域什么都有&#xff0c;不要被表象所迷惑&#xff0c;无论技术也好还是其他方面也好&#xff0c;就是说学习之前&#xff0c;你得理解你要学的是什么…...

Python爬虫:urllib_post请求百度翻译(06)

#post的请求 import urllib.request import urllib.parse import jsonurl https://fanyi.baidu.com/sugheaders {user-agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36}data {kw : spider }#post请…...

GPIO输入和输出

参考视频&#xff1a;2.1 [GPIO]4种输出模式_哔哩哔哩_bilibili 输出&#xff1a;通过写0或者写1&#xff0c;控制引脚输出低电压或高电压。 输入&#xff1a;通过读取引脚是0还是1&#xff0c;判断引脚输入的是高电压还是低电压。 输出 推挽开漏通用通用输出推挽通用输出开漏…...

时序动作定位 | DDG-Net:弱监督时间动作定位的判别驱动图网络(ICCV 2023)

"><DDG-Net: Discriminability-Driven Graph Network for Weakly-supervised Temporal Action Localization> 代码:https://github.com/XiaojunTang22/ICCV2023-DDGNet 这篇论文探讨了弱监督时间动作定位(WTAL)任务,指出现有方法在特征提取时依赖于在其他数…...

mapbox没有token/token失效,地图闪烁后变空白,报错Error: A valid Mapbox access token is required to use Mapbox GL JS.

目录 mapbox没有token/token失效&#xff0c;地图闪烁后空白&#xff0c;报错Error: A valid Mapbox access token is required to use Mapbox GL JS. 一、问题描述 二、mapbox去除token验证 1、找到mapbox-gl文件夹 2、找到mapbox-gl.js文件 3、找到对应位置并修改 4、清…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...