微信小程序获取网络类型的方法示例 原创

原创  更新时间:2019年03月01日 09:14:56   原创 投稿:shichen2014  
这篇文章主要介绍了微信小程序获取网络类型的方法,结合完整实例形式分析了微信小程序通过wx.getNetworkType获取网络类型的相关操作技巧,需要的朋友可以参考下

本文实例讲述了微信小程序获取网络类型的方法。分享给大家供大家参考,具体如下:

这里主要演示通过wx.getNetworkType获取当前网络类型的操作方法。代码如下:

index.js:

Page({
 /**
  * 页面的初始数据
  */
 data: {
  netType:''
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function () {
  var that = this;
  try {
   wx.getNetworkType({
    success: function(res) {
     that.setData({
      netType:res.networkType
     })
    },
   })
  } catch (e) {
   // Do something when catch error
  }
 },
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {
  
 },
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {
 },
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {
 },
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {
 },
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {
 }
})

index.wxml:

<view class="table">
 <view class="tr bg-g">
  <view class="td">网络类型</view>
  <view class="td">{{netType}}</view>
 </view>
</view>

index.wxss:

/**index.wxss**/
.table {
 border: 0px solid darkgray;
}
.tr {
 display: flex;
 width: 100%;
 justify-content: center;
 height: 2.6rem;
 align-items: center;
}
.td {
  width:40%;
  justify-content: center;
  text-align: center;
}
.bg-g{
 background: #E6F3F9;
}

运行结果:

希望本文所述对大家微信小程序开发有所帮助。

相关文章

  • JS+CSS实现Li列表隔行换色效果的方法

    JS+CSS实现Li列表隔行换色效果的方法

    这篇文章主要介绍了JS+CSS实现Li列表隔行换色效果的方法,实例分析了js操作li节点的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • JavaScript实现excel文件导入导出

    JavaScript实现excel文件导入导出

    这篇文章主要介绍了JavaScript实现excel文件导入导出,文件的导入导出是非常常见的需求功能,excel文件的导入导出更为常见,实践中许多时候,是调用接口实现导入导出的,具体实现内容需要的小伙伴可以参考一下
    2022-06-06
  • 小程序实现点击动画效果

    小程序实现点击动画效果

    这篇文章主要为大家详细介绍了小程序实现点击动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Javascript实现滚动图片新闻的实例代码

    Javascript实现滚动图片新闻的实例代码

    这篇文章主要介绍了Javascript实现滚动图片新闻的实例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • JavaScript中Infinity(无穷数)的使用和注意事项

    JavaScript中Infinity(无穷数)的使用和注意事项

    Infinity(无穷大)在 JS 中是一个特殊的数字,它的特性是它比任何有限的数字都大,如果不知道 Infinity,我们在一些运算操作遇到时,就会觉得很有意思,下面这篇文章主要给大家介绍了关于JavaScript中Infinity(无穷数)的使用和注意事项,需要的朋友可以参考下
    2022-04-04
  • 微信小程序自定义多选事件的实现代码

    微信小程序自定义多选事件的实现代码

    本篇文章主要介绍了微信小程序自定义多选事件的实现代码,小程序和vue一样是没法操作dom的,所以要利用数组的下标和自定义属性来进行三元判断,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • Bootstrap modal只加载一次数据的解决办法(推荐)

    Bootstrap modal只加载一次数据的解决办法(推荐)

    这篇文章主要介绍了Bootstrap modal只加载一次数据的解决办法,以及bootstrap模态框的简单使用,需要的朋友可以参考下
    2017-11-11
  • 详解ES6 中的Object.assign()的用法实例代码

    详解ES6 中的Object.assign()的用法实例代码

    这篇文章主要介绍了ES6 Object.assign()的用法及用途,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • JavaScript删除对象的不必要的属性

    JavaScript删除对象的不必要的属性

    这篇文章主要给大家介绍了JavaScript删除对象的不必要的属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-10-10
  • js使用Promise实现简单的Ajax缓存

    js使用Promise实现简单的Ajax缓存

    这篇文章主要介绍了js使用Promise实现简单的Ajax缓存,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论