小程序web-view关闭后,页面音频没有关闭

时间: 2019-06-01阅读: 1306标签: 小程序

问题描述:

在web-view的src中,引入了一个html5页面,这个页面有个自动播放的音频。在小程序中,点击右上角关闭小程序后,web-view页面中的音频依然会播放。


期待现象

期待关闭小程序之后,音频也停止。通过查找文档,发现没有直接提供方法,网上找了一圈之后,尝试的方案也都无法实现。

所以我这里想到的思路是,当用户关闭小程序时,应该销毁掉web-view。可惜,目前没有这个接口。 所以我就利用了模拟的方式来实现,当前小程序页面onHide时,就将web-view的页面src属性清空。后来经过测试发现,在ios平台下,需要制定一个url,在android平台下只需要清空。另外为了防止造成缓存,给url后面添加了一个随机的参数。

以下是代码片段。

html' } }, onLoad() { }, onHide(){ // webview关闭后,刷新url。否则会造成音乐在后台继续播放的bug if (uni.getSystemInfoSync().platform == "ios") { this.webUrl = 'https://demo.com/weixin/index.html?redirect=true'; }else{ // android系统下只能给空值 this.webUrl = ';' } }, onBackPress(){ }, methods: { } } " title="" data-original-title="复制">
<template>
    <view>
         <web-view :src="webUrl"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                webUrl: 'https://demo.com/weixin/index.html'
            }
        },
        onLoad() {
        },
        onHide(){
            // webview关闭后,刷新url。否则会造成音乐在后台继续播放的bug
            if (uni.getSystemInfoSync().platform == "ios") {
                this.webUrl = 'https://demo.com/weixin/index.html?redirect=true';
            }else{
                // android系统下只能给空值
                this.webUrl = ';'
            }
        },
        onBackPress(){
        },
        methods: {
            
        }
    }
</script>

<style>
</style>
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/3502

微信小程序连接蓝牙硬件的实现

项目需要使用小程序的蓝牙功能与硬件设备进行连接相互传送数据指令 ,整个流程就这样,因为开启了onBLECharacteristicValueChange,所以你在写入数据(writeBLECharacteristicValue)的时候,设备应答的数据就被监测到了

微信小程序视图层处理增强之WXS

WXS算是专供WXML调用的有独立作用域的JS模块(不是全功能的JS,感觉有所限制)。举个例子,在这之前,我们是没有办法在WXML的数据绑定括号{{}}中调用JS函数的,所以在WXML层面就缺少了进一步做数据处理的能力。

小程序分享海报的实现

小程序分享到朋友圈只能使用小程序码海报来实现,生成小程序码的方式有两种,一种是使用后端方式,一种是使用小程序自带的canvas生成;后端的方式开发难度大,由于生成图片耗用内存比较大对服务端也是不小的压力;

优雅解决微信小程序授权登录需要button触发

聊一聊最近的一个项目,这个项目是一个收书、售书的小程序,有商城、专栏、信息发布论坛等功能。虽然不是面向所有用户,但要求无论用户是否授权都皆可使用,但同时也要求部分功能对不授权的用户限制开放。

web view内嵌的h5页面与小程序直接相互跳转的实现

在小程序中使用web-view组件嵌套的H5页面,如何实现和小程序页面之间的相互跳转呢?下面就简单介绍下如何实现的,希望能帮助到您

小程序开发实践总结

从微信发布小程序以来,各大公司纷纷跟进都想从微信这个流量池里捞一杯羹。前前后后也开发了四五个小程序了。总觉得要留下点什么,既是记录那些年我们踩过的坑,也是希望大家别再掉坑。

微信小程序_实现动画旋转的多种方式

三种办法实现小程序的动画效果: 每帧setData()、使用Animation实现旋转效果、使用keyfreams。在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多

微信小程序跳转小程序

以前小程序跳小程序直接通过api调用跳转即可,但在2018.11.1下午微信公众平台通知需做navigateToMiniProgramAppIdList配置,否则无法提交审核,配置要跳转的微信小程序id ,最多不能超过10个。

支付宝小程序个人开发者,但暂未开放支付接口

支付宝小程序今日正式面向个人开发者开放公测。这是继微信之后,业内第2家面向个人开发者开放的小程序平台。有开发能力的个人用户可访问支付宝小程序平台,扫码验证个人身份以后即可开始支付宝小程序账号申请并进行代码开发。

如何探测小程序返回到webview页面?

项目是小程序(wepy), 部分页面使用webview(vue). 经常会遇见一个场景: 当小程序navigateTo到一些页面对用户的收藏状态,做了修改后, 用户点击返回按钮回到上一个页面

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!