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


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 bind事件使用详解
May 05 Javascript
jquery 插件学习(一)
Aug 06 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 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 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
JS使用数组实现的队列功能示例
2019/03/04 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
python网络编程实例简析
2014/09/26 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
Python itertools.product方法代码实例
2020/03/27 Python
区分python中的进程与线程
2020/08/13 Python
python打包生成so文件的实现
2020/10/30 Python
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
教师师德教育的自我评价
2013/10/31 职场文书
四年大学生活的个人自我评价
2013/12/11 职场文书
美发活动策划书
2014/01/14 职场文书
初中同学聚会感言
2014/02/11 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
校庆活动策划方案
2014/06/05 职场文书
班级活动总结格式
2014/08/30 职场文书
贷款承诺书
2015/01/20 职场文书
单位推荐信范文
2015/03/27 职场文书
营运督导岗位职责
2015/04/10 职场文书