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


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 图片预加载 自动等比例缩放插件
Dec 25 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
基于jquery的direction图片渐变动画效果
May 24 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
Vue计算属性的使用
Aug 04 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
使用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简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 字符串定义
2009/09/25 Python
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
python实现简易动态时钟
2018/11/19 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
keras 读取多标签图像数据方式
2020/06/12 Python
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
关于奉献的演讲稿
2014/05/21 职场文书
保研推荐信格式
2015/03/25 职场文书
2015年党小组工作总结
2015/05/26 职场文书
教师节班会主持词
2015/07/06 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
Python借助with语句实现代码段只执行有限次
2022/03/23 Python
Java版 单机五子棋
2022/05/04 Java/Android