小程序根据是否wifi环境自动播放视频

 

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