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


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 相关文章推荐
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
js实现数组和对象的深浅拷贝
Sep 30 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 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
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[48:35]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 TNC vs Optic
2018/04/03 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Linux下python3.7.0安装教程
2018/07/30 Python
python实现函数极小值
2019/07/10 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
PyQt 如何创建自定义QWidget
2021/03/24 Python
企业办公室岗位职责
2014/03/12 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
城南旧事观后感
2015/06/11 职场文书
python如何做代码性能分析
2021/04/26 Python
python如何将mat文件转为png
2022/07/15 Python