uni-app 使用 webview运行到小程序,打开萤石云视频

news2024/11/27 20:34:33

由于微信小程序特殊性,导致APP和h5适应的它都适应不了,因此,不得不对小程序做一些特殊的处理。

问题一:微信小程序无法打开web-view 的URL

相对于APP和H5而言,微信小程序比较严格,对于打开外链这种功能,必须要在微信开发者平台中配置业务域名才能打开,这种限制跟request请求时必须配置request域名相同,二者都是在添加白名单,安全机制更高一点。配置完成后可以在项目配置->业务域名中查看。

问题二:微信小程序无法打开萤石云视频

  1. 上述说了小程序若要打开外链,则必须设置白名单,而在设置白名单时,微信官方需要校验, 即把校验文件放置域名的根目录下,若要打开萤石云视频,萤石云的链接域名是https://open.ys7.com,此时,则要联系萤石云客服,将校验文件放置到他们的域名目录下。
  2. 同时,也可以使用萤石云官方提供的小程序方式加载。主要依靠ezuikit.js文件,可联系萤石云客服索要demo。
  3. 半屏展示,半屏的意思是指在你开发的小程序内部,再打开另外一个小程序,此时,只要给萤石云小程序传入相关参数,再在微信开发者平台添加萤石云的AppID,以通过萤石云调用小程序提供服务,这种方式是最省心也最有效的,不过就是萤石云方需要收取相应费用,具体操作见萤石云官方:https://open.ys7.com/help/452

问题三:小程序中web-view强制全屏,无法增加文本问题

在APP中或h5中,按钮可以增加到导航栏中,但是在小程序中,导航栏右边被默认配置占用了,无法将按钮配置到导航栏中, 而小程序是对web-view组件强制全屏的,无法通过z-index样式设置,这一点,uni-app 官网也给出了说明。
在这里插入图片描述
不过,我们可以通过cover-view组件,将按钮放置于web-view上层,具体操作如下.

在template中,将cover-view组件放置在web-view 内层。

这里的cover-view组件不支持套入任何元素,除了cover-image
在这里插入图片描述
使用如下

<web-view v-if="src" :src="src" update-title="false">
	<!-- #ifdef MP-WEIXIN -->
	<cover-view class="switchTD" @click="fabClick">切换通道</cover-view>
	<!-- #endif -->
</web-view>

若要修改按钮/文本的位置,则在style中修改即可。

/*改为自己的样式*/
.switchTD {
		position: absolute;
		bottom: -50upx;
		left: 50upx;
		z-index: 999999;
		color: #FFFFFF;
		font-size: 26upx;
}

该功能只在真机上有效,模拟机不支持!!!

在webview层中弹出抽屉Drawer

由于小程序对webview比较严格,无法对其进行各种操作,再加上强制全屏,因此若要弹出抽屉,则按照正常操作方式是无法打开的,因此,需要对web-view 先隐藏,然后再弹出抽屉,操作完成后再关闭抽屉,打开视频。刚开始用v-show时,发现无法对web-view 组件隐藏,后来对 web-view 的URL置空,并且给web-view加上v-if="src" (上述代码已有,不再重复,只显示动态修改URL代码)。

//#ifdef MP-WEIXIN
fabClick() {
	//隐藏视频
	this.src = "";
	//打开抽屉
	this.$refs.showRight.open();
},
// #endif

具体操作完后,再重新给src 赋值,并关闭抽屉即可。

附加问题:小程序导航栏返回按钮重新指定页面

onBackPress对APP和H5有效,对小程序无效,当小程序需要自定义返回页面时,需要使用onUnload函数(监听页面卸载)

/**
 * 生命周期函数--监听页面卸载
 */
onUnload: function() {
	uni.navigateTo({
		url: './basedataSupplier'
	})
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/49740.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

综述向:强化学习方法梳理(持续更新)

最近组内需要做强化学习相关研究&#xff0c;因为面对的是新项目&#xff0c;同事们对强化学习的原理都不太了解&#xff0c;我们就计划轮流在组内做一些不定期分享&#xff0c;补充相关的基础知识。于是我对强化学习的一些经典算法进行了梳理&#xff0c;并在此进行记录&#…

Observability:从零开始创建 Java 微服务并监控它 (一)

在本教程中&#xff0c;你将学习如何使用 Elastic 可观察性监控 Java 应用程序&#xff1a;日志、基础设施指标、APM 和正常运行时间。通过本教程&#xff0c;你将学到&#xff1a; 创建示例 Java 应用程序。使用 Filebeat 提取日志并在 Kibana 中查看你的日志。使用 Metricbe…

DPPE-PEG-Fucoidan 岩藻多糖-聚乙二醇-二棕榈酰基磷脂酰乙醇胺

DPPE-PEG-Fucoidan 岩藻多糖-聚乙二醇-二棕榈酰基磷脂酰乙醇胺 中文名称&#xff1a;岩藻多糖-二棕榈酰基磷脂酰乙醇胺 英文名称&#xff1a;Fucoidan-DPPE 别称&#xff1a;DPPE修饰岩藻多糖&#xff0c;DPPE-岩藻多糖 存储条件&#xff1a;-20C&#xff0c;避光&#xff…

Java - 缓冲输入输出流 (BufferedInputStream、BufferedOutputStream)

缓冲 Buffer 它是内存空间的一部分&#xff0c;在内存空间中预留了一定的存储空间&#xff0c;这些存储空间用来缓冲输入或输出的数据&#xff0c;这部分空间就叫做缓冲区&#xff0c;缓冲区是具有一定大小的。 数据传输速度和数据处理的速度存在不平衡&#xff0c;例如每秒要写…

SwiftUI教程之如何在 Xcode 14 中创建曲线导航栏动画

让我们开始打开 ​​Xcode 14。我们将在 ContentView 中执行所有代码。首先,我要添加一些资产。 现在我们可以转到 ContentView 并开始编码了!💯 我们将要实现@Environment 协议、GeometryReader 和路径。 SwiftUI 中的@Environment 协议是什么? 使用Environment属性包…

用Python制造雪景图,体验 “ 人工下雪 ” 得快乐~

前言 大家早好、午好、晚好吖 ❤ ~ 今天起床&#xff0c;一看温度&#xff0c;赶忙穿上我的秋裤 一到外面&#xff0c;那风呼啦呼拉拉得吹&#xff0c;感觉我魂都跑了 别的地方已经下雪&#xff0c;而我才刚降温&#xff0c;而且还是骤降 都开始学习Python了&#xff0c;是时候…

计算机组成原理习题课第四章-2(唐朔飞)

计算机组成原理习题课第四章-2&#xff08;唐朔飞&#xff09; ✨欢迎关注&#x1f5b1;点赞&#x1f380;收藏⭐留言✒ &#x1f52e;本文由京与旧铺原创&#xff0c;csdn首发&#xff01; &#x1f618;系列专栏&#xff1a;java学习 &#x1f4bb;首发时间&#xff1a;&…

WRKY转录因子通过促进GhMKK2介导的类黄酮生物合成调节棉花对尖孢镰刀菌的抗性

文章信息 题目&#xff1a;Group IIc WRKY transcription factors regulate cotton resistance to Fusarium oxysporum by promoting GhMKK2-mediated flavonoid biosynthesis 刊名&#xff1a;New Phytologist 作者&#xff1a;Lijun Wang&#xff0c;Chen Wang,Xingqi Guo…

利用FinalShell访问虚拟机

一、安装FinalShell 下载路径&#xff1a;https://pan.baidu.com/s/1uDIxLBnhrAQl_UqSHtD2Vw 提取码&#xff1a;fiaa 二、启动FinalShell 三、创建SSH连接 三、设置虚拟机主机名 1、查看虚拟机的主机名 命令&#xff1a;hostname 命令&#xff1a;cat /etc/hostname …

「Redis」01 NoSQL及Redis概述

笔记整理自【尚硅谷】Redis 6 入门到精通 超详细 教程 Redis——NoSQL及Redis概述 技术的分类 解决功能性的问题&#xff1a;Java、Jsp、RDBMS、Tomcat、HTML、Linux、JDBC、SVN解决扩展性的问题&#xff1a;Struts、Spring、SpringMVC、Hibernate、Mybatis解决性能的问题&am…

大客车玻璃擦净器设计

目 录 摘 要 I ABSTRACT II 1 绪论 1 1.1选题背景及意义 1 1.2发展现状 2 1.3发展趋势 3 1.4研究主要内容 4 2 大客车玻璃擦净器总体方案设计 5 2.1 大客车玻璃擦净器设计思想 5 2.2功能分析 5 2.3工作原理分析 6 2.4功能分解 6 2.4.2传动系统 6 2.4.3真空吸盘 7 2.4.4 清洁刷 …

devtools安装

文章目录一、devtools安装二、参考、推荐、补充一、devtools安装 vue官网上找到vue-devtools的GitHub项目 https://github.com/vuejs/devtools 我选择放在E盘中新建的devtools文件中&#xff0c;解压 进入解压好的devtools-main文件夹中 这里默认已经下载了node 然后在命…

CML、LVPECL和LVDS

1、Current-mode drivers VS Voltage-mode drivers 2、CML&#xff08;Current Mode Logic&#xff09; CML drivers that are built from an open-drain differential pair and a voltage-controlled current source using NMOS transistors. The outputs (Output and Outp…

02_openstack私有云部署

目录 一、环境准备 1、准备服务器 2、主机名与域名配置 3、yum仓库配置 4、配置时间同步 二、安装Openstack与Nova依赖环境 1、Nova依赖软件包安装 2、Openstack依赖软件包安装 三、搭建私有云 1、环境检查 2、配置应答文件answer.ini 一、环境准备 1、准备服务器 …

NHS-PEG-Biotin,Biotin-PEG-NHS,活性酯peg生物素生物素PEG衍生物

Biotin-PEG-NHS&#xff08;NHS-PEG-Biotin&#xff09;是生物素PEG衍生物的一种&#xff0c;该化学试剂其中文名为活性酯-聚乙二醇-生物素&#xff0c;它所属分类为Biotin PEG NHS ester PEG。 peg试剂的分子量均可定制&#xff0c;有&#xff1a;活性酯-聚乙二醇2-生物素&am…

[附源码]计算机毕业设计springboot基于VUE的网上订餐系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

RabbitMQ交换机

假设工作队列背后&#xff0c;每个任务都恰好交付给一个消费者(工作进程)。而将消息传达给多个消费者&#xff0c;这种模式称为“发布/订阅”。 例&#xff1a;构建一个简单的日志系统。它将由两个程序组成&#xff1a;第一个程序将发出日志消息&#xff0c;第二个程序是消费者…

Educational Codeforces Round 108 (Rated for Div. 2) C. Berland Regional

翻译&#xff1a; Polycarp是伯兰ICPC区域活动的组织者。伯兰有&#x1d45b;所大学&#xff0c;编号从1到&#x1d45b;。波利卡普认识这个地区所有有竞争力的程序员。有&#x1d45b;学生:&#x1d456;-th学生在大学注册&#x1d462;&#x1d456;&#xff0c;有编程技能&…

PW2330原厂规格书12V转5V,3.3V稳压电源芯片,1A-3安

一般说明 PW2330 开发了一种高效率的同步降压 DC-DC 变换器 3A 输出电流。 PW2330 在 4.5V 到 30V 的宽输入电压范围内工作集成主开关和同步开关&#xff0c;具有非常低的 RDS&#xff08; ON&#xff09;以最小化传导 损失。 PW2330 采用专有的瞬时 PWM 结构&#xff0c;实现快…

jsp195ssm饭店餐饮管理系统hsg6034AHA5

目 录 第一章 绪论 1 1.1 研究的背景和意义 1 1.1.1网站的研究背景 1 1.1.2 网站研究的意义 1 1.2 研究现状 2 1.3 论文的主要内容 2 1.4 论文主体结构 3 第二章 开发工具和相关技术介绍 4 2.1 平台开发工具 4 2.2 平台开发相关技术 4 2.2.1…