详解支付宝服务窗内的HTML5页面获取用户网络状态

最近用到了支付宝支付的相关技术，本文总结一些在支付宝服务窗中可能会用到的接口和 api。

要开发对接支付宝的相关功能，我们必须要到支付宝商家页面进行注册，开通相关的权限。关于这一部分不是本文关注的重点，我就不在总结了。有兴趣的可以到支付宝官网进行查看。

有时候基于应用的需求，我们可能需要判断用户的联网状态。甚至是连的 wifi 还是移动网络。比如在 WiFi 状态下，我们可以推荐一些视频内容；移动网络下，我们可以推荐一些文字性内容等。

基于各种各样的场景，嵌套在支付宝服务窗内的 HTML5 页面也需要获得用户的联网状态。本文正是基于这种情况下，来讨论通过 HTML5 和 js 获取当前手机的网络状态。

在支付宝内，获取用户的网络状态很简单，支付宝给我们提供了对应的 api。下面我们看看相关的 javascript 代码吧。

<!--引入jsAPI的功能js-->
<script src="https://as.alipayobjects.com/g/component/antbridge/1.1.1/antbridge.min.js"></script>
<!--获取用户网络状态功能8.0以上钱包支持，8.2支持更多特性-->
<script>
if(navigator.userAgent.indexOf("AlipayClient")===-1){
    alert('请在支付宝钱包内运行');
}else{
    if((Ali.alipayVersion).slice(0,3)>=8.0){
        Ali.network.getType({
            timeout: 5000
        }, function(result) {
            if(result.errorCode){
                //没有获取网络状态的情况
                //errorCode=5，调用超时
            }else{
                //成功获取网络状态的情况
                //result.isWifi	bool	是否在Wifi下使用
                //result.isOnline	bool	是否联网
                //result.type	string	网络类型'fail': 无网络，或网络断开
                //'wifi': wifi网络
                //'wwan': 移动网络	8.2
                //result.networkAvailable	bool	网络是否连网可用	8.2
            }
        });
    }else{
        Ali.alert({
            title: '亲',
            message: '请升级您的钱包到最新版',
            button: '确定'
        });
    }
}
</script>

getNetworkType (获取网络状态) 函数

相关接口如下：

AlipayJSBridge.call(‘getNetworkType’, function (result) {
console.log(result.networkType);
});

相关参数说明如下图所示：

获取支付宝网络状态返回参数说明

关于支付宝获取网络状态的更多资料，请查看官方 api 文档。

扫描下方二维码，关注业余草微信公众号，回复“FFmpeg”关键词，获取 FFmpeg 视频教程！