做一个需求,在文章详情页面有一个新闻短视频,当在流量环境下时因为要加载视频,导致下面的内容也加载不出来,所以我需要判断是否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>
</block>
js:
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环境,就自动播放视频,如果不是,就先加载缩略图,点击播放按钮才加载视频并播放