专栏首页前端修炼之路小程序web-view关闭后,页面音频没有关闭

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

问题描l述:

本人微信公众号:前端修炼之路,欢迎关注

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

期待现象

期待关闭小程序之后,音频也停止。

通过查找文档,发现没有直接提供方法,网上找了一圈之后,尝试的方案也都无法实现。

所以我这里想到的思路是,当用户关闭小程序时,应该销毁掉web-view。可惜,目前没有这个接口。

所以我就利用了模拟的方式来实现,当前小程序页面onHide时,就将web-view的页面src属性清空。

后来经过测试发现,在ios平台下,需要制定一个url,在android平台下只需要清空。另外为了防止造成缓存,给url后面添加了一个随机的参数。

以下是代码片段。

<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 (wx.getSystemInfoSync().platform == "ios") {
                this.webUrl = 'https://demo.com/weixin/index.html?redirect=true';
            }else{
                // android系统下只能给空值
                this.webUrl = ';'
            }
        },
        onBackPress(){
        },
        methods: {

        }
    }
</script>

<style>
</style>

注意:

以上代码是通过uni-app开发的。如果在微信开发者工具中编辑,需要符合微信小程序的语法。


2019年6月2日 更新

经过测试,发现以上代码并不是最好的选择。因为当用户隐藏小程序后,在最近使用的小程序中,该小程序会继续在后台保留一段时间。如果是替换web-view的url,会造成音乐继续播放。

另外一个问题就是,我以上代码判断了ios和andorid两个平台。其实现在想来并不需要。

综上所述,以上代码参考意义并不大,请使用监听hashchange 方式来判断。代码如下:

小程序中代码

<view class="page-body">
  <view class="page-section page-section-gap">
    <web-view src="https://demo.com/weixin/index.html#show={{showed}}"></web-view>
  </view>
</view>

Page({
    data: {
        showed: false
    },
    // 小程序在前台
    onShow: function(){
        this.setData({
            showed: true
        });
    },
    // 小程序在后台
    onHide: function() {
        this.setData({
            showed: false
        });
    }
})

web-view中代码

window.addEventListener("hashchange", () => {
        var globalAudio = document.getElementById("player"); //获取audio HTMLDOM
        const hashData = parseURL(window.location.hash.slice(1));
        if (hashData.show) {
            const isShow = hashData.show === 'true';
            if (isShow) { //切到前台
                if (globalAudio.paused) {
                    globalAudio.play();
                }
            } else {  //切到后台
                if (globalAudio.play) {
                    globalAudio.pause();
                }
            }
        }
    }, false);


    function parseURL(e) {
        var t, n, r, i = e, s = {};
        t = i.split("&"),
        r = null,
        n = null;
        for (var o in t) {
            var u = t[o].indexOf("=");
            u !== -1 && (r = t[o].substr(0, u),
            n = t[o].substr(u + 1),
            s[r] = n)
        }
        return s
    }

总结

  • 通过onShowonHide设置属性showed的值,来判断用户的小程序是在前台还是后台。
  • 因为是给web-viewsrc动态修改hash值,所以不会造成页面刷新,相比直接修改src会更好。
  • 然后在web-view所在的页面中,监听hashchange事件,在事件中,判断hash属性showtrue false值,空值音乐的暂停与播放。

2019年6月6日 更新

本来以为监听hash值的变化,已经是能完美的解决这个问题了。但是经过测试之后,发现了严重的问题:安卓系统下,用户点击物理返回按键,会无法退出小程序

这个问题造成的原因是:每次修改hash值时候,都会添加一条历史浏览记录。而用户点击返回按钮时,就相当于点击浏览器的返回按钮。自然就是会返回多次才能回到第一页,然后才退出掉小程序。

这样的话,用户体验就非常不好。我首先想到的是,调用wx.miniProgram.navigateBack,直接返回。但是会报一个错误:

意思就是说,我当前的web-view是第一页,不能再返回了。

最后还是通过阅读微信文档,发现了onPageStateChange这个监听事件。可以判断微信小程序是否在前台。我最开始的时候,测试过这个接口,当时当时微信客户端没有升级,所以我一直以为这个接口是不能用的呢。

其实这个接口是完全可以用的。只不过需要微信版本在7.0.3

这样的话,就可以将代码优化得非常少了。

// wxml
<view>
    <web-view src="https://demo.com/weixin/index.html"></web-view>
</view>
// 微信中的js
Page({

})
// web-view页面中的js
wx.ready(function() {
        var globalAudio = document.getElementById("player"); //获取audio HTMLDOM
        WeixinJSBridge.on('onPageStateChange', function(res) {
            // 注意:res.active返回的是字符串类型的true和false
            if(res.active == 'true'){
                globalAudio.play();
            }else{
                globalAudio.pause();
            }
        });

});    

主要就是,不再采用监听hash值的变化了,直接使用微信提供的接口。非常好用。

本文分享自微信公众号 - 前端修炼之路(siberiawolf0307),作者:siberiawolf

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • NOW 直播和微信小程序那些事

    微信小程序从发布开始,可谓赚足了眼球,一度引发了开发界“全民学JavaScript”的梗。为了跟上时代步伐,我们NOW直播团队也在发布后第一时间尝鲜,本文就来扒...

    腾讯IVWEB团队
  • uni-app: 引导页功能如何实现?

    1、Uni-App 启动页和引导页介绍 2、Uni-App 简单引导页示例 3、Uni-App 视频引导页示例

    Javanx
  • 实时音视频开发学习10 - 小程序端一

    小程序端双人通话、多人会议和语音聊天室三个功能。双人通话中实现1V1视频通话,在结合Web IM SDK可实现在线问诊或客服;语音聊天室能支持多人互动语音聊天,...

    金林学音视频
  • wx小程序--基础知识

    微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用,主要提供给企业、政府、媒体、其他组织或个人的开发者在微信平台上提供服务。

    eadela
  • uni-app 与 Vue H5 项目通讯

    可以内嵌在移动端,实现前端的混合式开发,大多数混合式开发框架都是基于WebView模式进行二次开发的。比如:APIcloud、uni-app等等的框架。

    游魂
  • uni-app 与 Vue H5 项目通讯

    可以内嵌在移动端,实现前端的混合式开发,大多数混合式开发框架都是基于WebView模式进行二次开发的。比如:APIcloud、uni-app等等的框架。

    游魂
  • 基于腾讯x5开源库,提高60%开发效率

    杨充
  • 解读小程序最新开发能力,官方只说了部分

    微信7月11日发布了一大堆小程序新特性,而官方发文只提了其中几个点,今天为大家详细解读一下,主要涵盖以下内容:(注.这不是热更新,这是需要更新微信到1.4.0版...

    花叔
  • 微信小程序 web-view 开发踩坑大全

    如果要在小程序中使用 web-view 组件,则首先需要开发者账号不仅是该小程序的开发者而且还有网页开发权限,这需要在该小程序关联的公众号里面绑定开发者账号为开...

    极乐君
  • 史上最全webview详解

    WebView在现在的项目中使用的频率应该还是非常高的。 我个人总觉得HTML5是一种趋势。找了一些东西,在此总结。 本篇最后有一个非常不错 的 Html5...

    xiangzhihong
  • 如何让视频会议在小程序上开起来

    |导语  使用企业微信跨组织间会议门槛较高,要求外部客户或合作伙伴先建立在企业微信的线上组织才可入会,通过引入小程序入会能力,降低跨组织会议的门槛; 为解决微...

    腾讯大讲堂
  • 送你一份微信小程序 web-view 开发踩坑大全

    对于开发者来说,如果 H5 页面能够直接嵌入到小程序那是再好不过了,而 web-view 组件正好就提供了这么个功能(个人类型与海外类型的小程序暂不支持使用)。...

    IMWeb前端团队
  • 微信小程序学习(原生)

    神葳
  • 前端必学必会-多媒体-本地存储-浏览器与服务器的交互-通信功能

    学习元素的知识点,涉及属性,方法,事件。在HTML5出现前,展示视频,音频,动画等,都是使用第三方自主开发,使用最多的工具是flash了。

    达达前端
  • 一起脱去小程序的外套和内衣:微信小程序架构解析

    微信小程序的公测掀起了学习小程序开发的浪潮,天生跨平台,即用即走、媲美原生体验、完善的文档、高效的开发框架,小程序给开发者带来了很多惊喜。通过这篇文章和大家一起...

    小时光
  • TRTC小程序本地关闭音视频,为什么远端收到了退房通知

    TRTC小程序会自动进行切换身份,如果本地没有音视频的上行,会自动切换成观众的身份(毕竟在大房间中不可能去维护一个几万人的userList,小程序里面做个循环都...

    sskingss
  • 浏览器事件

    常用浏览器事件与DOM事件,包括鼠标事件、键盘事件、框架/对象事件、表单事件、剪贴板事件、打印事件、拖动事件、多媒体事件、动画事件、过渡事件。

    WindrunnerMax
  • 「动图」SEO必知负面case网页广告说明

    黄伟SEO
  • 开发者选项详解

    然后不可免得去想,这个东西是什么,有什么用.这篇文章就是来解决这些个问题得.

    云深无际

扫码关注云+社区

领取腾讯云代金券