在微信内部浏览器接口weixinJSBridgeReady

在微信中使用audio播放音频和视频

需要监听weixinJSBridgeReady事件, 在回调函数里执行play()命令

function audioAutoPlay(id){
    var audio = document.getElementById(id);

    var play = function() {
        document.removeEventListener("WeixinJSBridgeReady", play);
        document.removeEventListener("YixinJSBridgeReady", play);

        audio.play();
        audio.pause();
        // document.removeEventListener("touchstart", play, false);
    };
    
    audio.play();
    audio.pause();

    //weixin
    document.addEventListener("WeixinJSBridgeReady", play, false);
    //yixin
    document.addEventListener('YixinJSBridgeReady', play, false);

    // document.addEventListener("touchstart", play, false);
}
audioAutoPlay('audio1');

weixinJSBridge接口的其他应用

之前写了一篇关于这个WeixinJSBridge API的文章，文章地址

，于是有很多网友都在过来咨询这个API的使用，在这里有必要跟大家再说一下：这个API在以前公布的部分接口被官方和谐掉很久了， 比如一键关注、分享给好友、分享到朋友圈等。

当然，你可能会发现微信官方推送的一些文章还能使用这些功能，粗略估计，官方是对这个API增加了白名单控制，判断Referer，如果是微信官方的地址、或者是有合作的商家地址，则允许调用，否则，返回“access denied”！

截止目前，笔者还没用发现还有什么办法能继续使用它！不过，官方和谐掉这个API其实也是说得过去的，因为在整个WebView的右上角，官方做了一个Navtive的按钮，点开以后，包括分享给好友、分享到朋友圈这样的功能都有，所以，官方也是在做一些引导。

当然，WeixinJSBridge这个API也并不是所有功能都被和谐掉了，相反，有好几个功能还是相当有用的，可以正常使用，比如：

1、

隐藏微信网页右上角的按钮

（...按钮）：开发者可以用这个功能来禁止当前页面被分享

2、

隐藏微信网页底部的导航栏

（比如前进后退和刷新）：这个导航栏会占用一定的区域，开发者可以认为用户不会用到它，将其隐藏掉

3、

在微信网页中获取用户的网络状态

：开发者可以利用这个API获得用户的网络状态，并提供不同的服务，比如视频类，在wifi下提供高清视频流，在2g网络下提供普通清晰视频流等等

下面分别通过简单的几行代码，说明这几个API的用法：

1、隐藏微信网页右上角的按钮

document.addEventListener('WeixinJSBridgeReady',function onBridgeReady() {`
// 通过下面这个API隐藏右上角按钮`
WeixinJSBridge.call('hideOptionMenu');

});
document.addEventListener('WeixinJSBridgeReady',function onBridgeReady() {

// 通过下面这个API显示右上角按钮`

WeixinJSBridge.call('showOptionMenu');

});

2、隐藏微信网页底部的导航栏

document.addEventListener('WeixinJSBridgeReady',function onBridgeReady() {`

// 通过下面这个API隐藏底部导航栏

WeixinJSBridge.call('hideToolbar');

});

document.addEventListener('WeixinJSBridgeReady',function onBridgeReady() {

// 通过下面这个API显示底部导航栏

WeixinJSBridge.call('showToolbar');

});

3、在微信网页中获取用户的网络状态

WeixinJSBridge.invoke('getNetworkType',{},function (e){`

// 在这里拿到e.err_msg，这里面就包含了所有的网络类型

alert(e.err_msg);

});

e.err_msg的取值如下所示：

network_type:wifi         wifi网络
network_type:edge      非wifi,包含3G/2G
network_type:fail         网络断开连接
network_type:wwan     2g或者3g</pre>

可以戳这个链接测试一下：http://www.baidufe.com/demo/wxjsapi2.html

或者直接用微信扫描下面这个二维码：

[图片上传失败...(image-311d4b-1514437384692)]

以上！分享给需要用到的网友。

作者：胖太_91bf
链接：https://www.jianshu.com/p/d7f5f5131783
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。