做一个需求,在文章详情页面有一个新闻短视频,当在流量环境下时因为要加载视频,导致下面的内容也加载不出来,所以我需要判断是否wifi环境,从而选择是否自动播放视频
wx.getNetworkType(OBJECT)
获取网络类型。
OBJECT参数说明:
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| success | Function | 是 | 接口调用成功,返回网络类型 networkType |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success返回参数说明:
| 参数 | 说明 |
|---|---|
| networkType | 网络类型 |
wx.getNetworkType({ success: function(res) { // 返回网络类型, 有效值: // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络) var networkType = res.networkType }})
networkType 有效值:
| 值 | 说明 |
|---|---|
| wifi | wifi 网络 |
| 2g | 2g 网络 |
| 3g | 3g 网络 |
| 4g | 4g 网络 |
| none | 无网络 |
| unknown | Android下不常见的网络类型 |
wxss:
.show { display: block;}.hide { display: none;}显示与隐藏,小程序不能操作view,只好通过变量显示与隐藏view
wxml:
block wx:if="{{ isWifi == true }}" video src="{{ video_url }}" controls autoplay='true' /video /block block wx:else image src="{{ util.getImageSrc(article.image.key) }}" class="{{ coverImageClass }}" cover-view class="play" bindtap="play" cover-image class="img" bindtap='showVideo' src="https://www.jxcat.com/client/images/mobile/icons/play1.png" / /cover-view /image video src="{{ coverVideoSrc }}" id="showVideoBox" controls class="{{ videoClass }}"/video /blockjs:
data: { article: '', avatar: '', nick_name: '', video_url: '', coverImageClass: 'show', videoClass: 'hide', coverVideoSrc: '', videoContext : '', isWifi: false }, onLoad: function (options) { this.getWifiEnv() }, onReady: function () { this.videoContext = wx.createVideoContext('showVideoBox') }, // 加载视频 showVideo: function (event) { var that = this that.setData({ coverImageClass: 'hide', videoClass: 'show', coverVideoSrc: that.data.video_url }, function() { that.videoContext.play() }) }, getWifiEnv: function () { var that = this wx.getNetworkType({ success: function (res) { if (res.networkType == 'wifi') { that.setData({ isWifi: true }) } } }) }如果是wifi环境,就自动播放视频,如果不是,就先加载缩略图,点击播放按钮才加载视频并播放













