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


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 load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 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
PHP设计模式之注册树模式分析
2018/01/26 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
Node.js的特点详解
2017/02/03 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
Python tkinter label 更新方法
2018/10/11 Python
python使用PyQt5的简单方法
2019/02/27 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
前处理组长岗位职责
2014/03/01 职场文书
高级工程师英文求职信
2014/03/19 职场文书
分家协议书
2014/04/21 职场文书
财务会计专业求职信
2014/06/09 职场文书
2014年共青团工作总结
2014/12/10 职场文书
入党政审材料范文
2014/12/24 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
2016年母亲节寄语
2015/12/04 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python