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


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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
使用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
如何做到多笔资料的同步
2006/10/09 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
python 项目目录结构设置
2020/02/14 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
Python Django搭建网站流程图解
2020/06/13 Python
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
C#中的验证控件有几种
2014/03/08 面试题
2015年保险公司工作总结
2015/04/24 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
python opencv通过4坐标剪裁图片
2021/06/05 Python
vue elementUI表格控制对应列
2022/04/13 Vue.js
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL