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


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 Easyui实现左右布局
Jan 26 Javascript
js实现密码强度检验
Jan 15 Javascript
常用的js方法合集
Mar 10 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
JavaScript高级程序设计之变量与作用域
Nov 17 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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
浅谈ThinkPHP的URL重写
2014/11/25 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
详解Python绘图Turtle库
2019/10/12 Python
Python如何实现FTP功能
2020/05/28 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
校长就职演讲稿
2014/01/06 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
2014年党员整改措施
2014/10/24 职场文书
2014年纪委工作总结
2014/12/05 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
apache ftpserver搭建ftp服务器
2022/05/20 Servers