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


Posted in Javascript onMarch 01, 2019

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

这里主要演示通过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;
}

运行结果:

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

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

Javascript 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
复制js对象方法(详解)
Jul 08 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
使用JavaScript解析URL的方法示例
Mar 01 #Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 #Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 #Javascript
Javascript删除数组里的某个元素
Feb 28 #Javascript
vue强制刷新组件的方法示例
Feb 28 #Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 #Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 #jQuery
You might like
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
vue router demo详解
2017/10/13 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
python字符串string的内置方法实例详解
2018/05/14 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
Django发送邮件功能实例详解
2019/09/02 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
新驾驶员个人自我评价
2014/01/03 职场文书
单位委托书范本
2014/04/04 职场文书
信息员培训方案
2014/06/12 职场文书
班级读书活动总结
2014/06/30 职场文书
2014年社区工作总结
2014/11/18 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP