微信jsapi获取网络状态接口开发(第七课)

最新推荐文章于 2023-12-14 01:03:19 发布
最新推荐文章于 2023-12-14 01:03:19 发布
阅读量585 收藏
点赞数

根据微信官方文档说明，获取手机或其它移动设备的网络状态接口，网络状态的类型目前分为2g，3g，4g，wifi。接口调用说明如下：

wx.getNetworkType({
     success:  function  (res) {
         var  networkType = res.networkType;  // 返回网络类型2g，3g，4g，wifi
     }
});

1,界面引入js库

<script src= "http://res.wx.qq.com/open/js/jweixin-1.1.0.js" > </script> 
<script src= "http://libs.baidu.com/jquery/2.0.0/jquery.js" ></script>

由于用到了jquery，所以引用的网络的lib库

2，<body></body>之间的代码

1
2
  <span class= "desc"  style= "color: red" >获取网络状态接口</span><br>
<button class= "btn btn_primary"  id= "getNetworkType" >getNetworkType</button><br>

新建了一个按钮，并且按钮的id为getNetworkType

3，jQuery代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
wx.ready( function (){ 
// 6 设备信息接口
   // 6.1 获取当前网络状态
   document.querySelector( '#getNetworkType' ).onclick =  function  () {
     wx.getNetworkType({
       success:  function  (res) {
         alert(res.networkType);
       },
       fail:  function  (res) {
         alert(JSON.stringify(res));
       }
     });
   };
   //网络接口结束
  
});

当点击id为getNetworkType按钮的时候，会触发以上js代码并实现网络接口类型。

4，初始化jsapi库中添加引用getNetworkType接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
wx.config({  
     debug:  true ,  // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
     appId:  '${appId}' ,  // 必填，公众号的唯一标识  
     timestamp:  '${ timestamp}'  ,  // 必填，生成签名的时间戳  
     nonceStr:  '${ nonceStr}' ,  // 必填，生成签名的随机串  
     signature:  '${ signature}' , // 必填，签名，见附录1  
     jsApiList: [ 'checkJsApi' ,
                 'chooseImage' ,
                 'previewImage' ,
                  'uploadImage' ,
                  'downloadImage' ,
                   'getNetworkType' //网络状态接口
                ]  // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
});

jsApiList最后一条就是引入的网络状态js接口

5，完整jsp页面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< html >
   < head >
     < base  href="<%=basePath%>">
     
     < title >微信jsapi测试-V型知识库</ title >
     < meta  name = "viewport"  content = "width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >
    < script  src = "http://res.wx.qq.com/open/js/jweixin-1.1.0.js" > </ script > 
< script  src = "http://libs.baidu.com/jquery/2.0.0/jquery.js" ></ script >
     
   </ head >
   
   < body >
   < center >< h3 >欢迎来到微信jsapi测试界面-V型知识库</ h3 ></ center >
      < p >基础接口之判断当前客户端是否支持指定的js接口</ p >   
      < input  type = "button"  value = "checkJSAPI"  id = "checkJsApi" >< br >
      
       < span  class = "desc"  style = "color: red" >获取网络状态接口</ span >< br >
       < button  class = "btn btn_primary"  id = "getNetworkType" >getNetworkType</ button >< br >
      
      < div  style = "display: none;" > 
       < h3  id = "menu-image" >图像接口</ h3 >
       < span  class = "desc" >拍照或从手机相册中选图接口</ span >< br >
       < button  class = "btn btn_primary"  id = "chooseImage" >chooseImage</ button >< br >
       < span  class = "desc" >预览图片接口</ span >< br >
       < button  class = "btn btn_primary"  id = "previewImage" >previewImage</ button >< br >
       < span  class = "desc" >上传图片接口</ span >< br >
       < button  class = "btn btn_primary"  id = "uploadImage" >uploadImage</ button >< br >
       < span  class = "desc" >下载图片接口</ span >< br >
       < button  class = "btn btn_primary"  id = "downloadImage" >downloadImage</ button >< br >
     
   < br >
   显示图片< img  alt = ""  src = ""  id = "faceImg" >
   </ div >
   
   
   < script  type = "text/javascript" >
   wx.config({  
     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
     appId: '${appId}', // 必填，公众号的唯一标识  
     timestamp: '${ timestamp}' , // 必填，生成签名的时间戳  
     nonceStr: '${ nonceStr}', // 必填，生成签名的随机串  
     signature: '${ signature}',// 必填，签名，见附录1  
     jsApiList: ['checkJsApi',
                 'chooseImage',
                 'previewImage',
                  'uploadImage',
                  'downloadImage',
                   'getNetworkType'//网络状态接口
                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
});  
   
wx.ready(function(){  
     // 5 图片接口
   // 5.1 拍照、本地选图
   var images = {
     localId: [],
     serverId: []
   };
   document.querySelector('#chooseImage').onclick = function () {
     wx.chooseImage({
       success: function (res) {
         images.localId = res.localIds;
         alert('已选择 ' + res.localIds.length + ' 张图片');
          $("#faceImg").attr("src", res.localIds[0]);//显示图片到页面上
       }
     });
   };
 
   // 5.2 图片预览
   document.querySelector('#previewImage').onclick = function () {
     wx.previewImage({
       current: 'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
       urls: [
         'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
         'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
         'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg'
       ]
     });
   };
 
   // 5.3 上传图片
   document.querySelector('#uploadImage').onclick = function () {
     if (images.localId.length == 0) {
       alert('请先使用 chooseImage 接口选择图片');
       return;
     }
     var i = 0, length = images.localId.length;
     images.serverId = [];
     function upload() {
       wx.uploadImage({
         localId: images.localId[i],
         success: function (res) {
           i++;
           //alert('已上传：' + i + '/' + length);
           images.serverId.push(res.serverId);
           if (i < length) {
             upload();
           }
         },
         fail: function (res) {
           alert(JSON.stringify(res));
         }
       });
     }
     upload();
   };
 
   // 5.4 下载图片
   document.querySelector('#downloadImage').onclick = function () {
     if (images.serverId.length === 0) {
       alert('请先使用 uploadImage 上传图片');
       return;
     }
     var i = 0, length = images.serverId.length;
     images.localId = [];
     function download() {
       wx.downloadImage({
         serverId: images.serverId[i],
         success: function (res) {
           i++;
           alert('已下载：' + i + '/' + length);
           images.localId.push(res.localId);
           if (i < length) {
             download();
           }
         }
       });
     }
     download();
   };
   
   // 6 设备信息接口
   // 6.1 获取当前网络状态
   document.querySelector('#getNetworkType').onclick = function () {
     wx.getNetworkType({
       success: function (res) {
         alert(res.networkType);
       },
       fail: function (res) {
         alert(JSON.stringify(res));
       }
     });
   };
   //网络接口结束
   
});  
  //初始化jsapi接口 状态
wx.error(function (res) {
   alert("调用微信jsapi返回的状态:"+res.errMsg);
});
   
  </ script >
    
   </ body >
</ html >

完整的jsp代码用户可以复制到工程里直接运行，但是在初始化微信jsapi库的时候需要四个参数，这四个参数具体怎么来的，请读者参考我们的微信jsapi开发频道中的其它章节(本页面左上角)，在这里不在累述，望见谅。

6，上述代码运行效果如下：

wifi下效果

3g下效果

此文章本站原创，地址  http://www.vxzsk.com/114.html   转载请注明出处！谢谢！
一顆苹果
关注
微信jsapi支付获取code_微信支付 第一篇 JSAPI 支付配置与获取 OpenID
weixin_28909779的博客
12-23 901
开通微信支付支付产品首先要在微信支付申请成为 微信支付商户。选择开通具体的支付产品成为微信支付商户后在管理后台选择微信支付中的具体支付产品并申请开通如 JSAPI 。将支付商户与公众号关联这一步是可选的，是由具体的支付产品是否需要与公众号交互决定，如本例中的JSAPI就需要公众号的支持。拥有支付功能的商户需要与某公众号关联，才能互相获取相应权限和数据，如JSAPI就需要通过关联的公众号获取用户 o...
微信支付 第一篇 JSAPI 支付配置与获取 OpenID
dianyoulian8756的博客
10-08 4872
开通微信支付支付产品 首先要在微信支付申请成为 微信支付商户。 选择开通具体的支付产品 成为微信支付商户后在管理后台选择微信支付中的具体支付产品并申请开通如 JSAPI 。 将支付商户与公众号关联 这一步是可选的，是由具体的支付产品是否需要与公众号交互决定，如本例中的JSAPI就需要公众号的支持。拥有支付功能的商户需要与某公众号关联，才能互相获取相应权限和数据，如JSAPI就需要通...
用JavaScript获取网卡的Mac地址
11-05
只能在IE下运行. 正文： var MACAddr='' ; var IPAddr='' ; var DomainAddr=''; var sDNSName=''; function GetAdapterInfo() { var locator = new ActiveXObject ("WbemScripting.SWbemLocator"); ......
微信支付中的jsapi返回提示信息
weixin_34163553的博客
08-24 1075
jsapi中跳转到微信支付中触发的方法是js中的getBrandWCPayRequest方法。 改方法中的返回结果msg提示信息如下： err_msg:get_brand_wcpay_request:ok  支付成功             get_brand_wcpay_request:cancel 支付过程中用户取消             get_brand_wcpay_reque...
js-获取用户移动端网络类型：wifi、4g、3g、2g...
飞翔的熊blabla
11-06 2815
今天工作时间很宽裕， 忽然想起，自己做过的所有页面中，有些页面经常会面临用户在网络状态很差的时候打开页面，页面是挂了的状态，感觉很LOW~。 所以我决定在今后的页面中我需要先判断用户的网络状态， 若是很差的话，我首先会提醒他，当前网络状态不是很好，页面加载状态不是很好，提醒他最好切换网络状态； 尤其是可以用在播放视频的时候，若用户使用的是流量，可以清明的提醒用户“当前是在用流量播放视频”，好吧，也就我这么好的人才会提醒 以下是获取用户网络状态的代码： getNetworkType(..
js判断wifi_前端 JS 在网页里判断是否在 WIFI 环境 下
weixin_39875941的博客
12-29 2909
前端 JS 在网页里判断是否在 WIFI 环境 下 废话不多说直接上代码，有一点要注意的是 这里是重新进入页面, 而不是直接在当前页面切换到 某网络 然后刷新,不然不起作用！！！目前functionisWifi() {try {let wifi = truelet ua = window.navigator.userAgentlet con = window.navigator.connect...
微信JSAPI支付操作需要注意的细节
10-20
在微信JSAPI支付的过程中，开发者需要注意一系列细节以确保支付流程的顺利进行。本文将深入探讨这些关键点，帮助你避免常见的“坑”。 首先，要使用微信JSAPI支付，你需要集成微信支付的SDK，如文中提到的`weixin....
2022-php-服务商支付demo-jsapi-微信支付
03-23
JSAPI（JavaScript API）是微信支付的一种方式，它允许在网页中调用微信支付接口，用户无须跳转到微信应用，即可完成支付流程。 3. **服务商模式**：在微信支付中，服务商模式是指为其他商家提供支付接入服务的第三...
微信支付H5和JSAPI
最新发布
weixin_45472548的博客
12-14 3374
s： 证书序列号，在 账户中心 ▶ API安全 ▶ 管理证书 中可以看见，如果有多个证书，找到自己正在使用的证书序列号。-f： 微信商户API私钥文件目录，也就是第二步申请商户证书里面生成的 apiclient_key.pem 路径。原著：https://www.cnblogs.com/tinygeeker/p/17620498.html。平台证书跟上面申请的商户证书不是同一个东西，在后期请求中，平台证书和商户证书都要带上。-k： apiv3 秘钥，上面自己设置的32位数的密钥。
js判断当前使用的是wifi还是流量
热门推荐
baozisss的博客
09-20 1万+
&lt;script type="text/javascript"&gt;  var connection = navigator.connection||navigator.mozConnection||navigator.webkitConnection||{tyep:'unknown'}; var type_text = ['unknown','ethernet','wifi'...
微信小程序开发 安卓手机 调用 wx.startWifi API wx.getConnectedWifi API
qq_44757978的博客
03-23 1012
获取 微信小程序 WiFi 信息 ```javascript mounted() { //初始化 Wi-Fi 模块。 wx.startWifi({ success(res) { console.log(res.errMsg, 'wifi初始化成功') }, fail: function(res){ console.log(res.errMsg, "wifi初始化失败")
微信JS接口说明
思科网络
07-16 3692
概述 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。 此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。 使用说明 在使用微信JS-
企业微信 之 网页鉴权
玄鱼殇
04-11 3603
企业微信 之 网页鉴权
微信JSAPI模式与浏览器类型安全访问
博文视点（北京）官方博客
03-16 322
引言：微信浏览器是在微信安装时内置在微信中的，针对浏览器的类型我们可以设置相应的安全策略——仅允许在微信内置浏览器中打开。 本文选自《微信企业号开发完全自学手册》。 1 JSAPI模式介绍　　在介绍JSAPI模式之前，首先需要介绍一下微信内置浏览器。可能很多人注意到了，在打开微信“朋友圈”链接的时候会出现进度条，如图5.1所示，这实际上就是微信内置浏览器访问页面的进度。也就是说，“朋...
javascript如何获取设备连接网络类型，切换提示给用户
weixin_39531576的博客
08-16 3299
js有个navigator对象，有兴趣可自行在浏览器打印,如下图 具体方法如下 getTypeNet() { let strCode = navigator.userAgent; let stringNet= strCode .match(/NetType/\w+/) ? strCode .match(/NetType/\w+/)[0] : ‘NetType/other’; var netwo...
js获取当前移动网络连接类型以及连接网络信息
qq_26889291的博客
11-05 1036
适用于手机兼容性需要自己验证一下 navigator.connection.type (pc端没有这个type属性) 详细文档关于获取当前网络信息 https://wicg.github.io/netinfo/#dom-effectiveconnectiontype
微信开发 Weixin JS接口 网页获取用户网络状态
开放源码的微信应用系统 微微信.NET 研究
04-21 3603
为了方便开发者根据用户的网络状态来提供不同质量的服务，公众号可以在公众号内部的网页中使用JavaScript代码调用来获取网络状态。 接口调用代码（JavaScript） 返回说明 获取用户网络状态的返回值如下： network_type:wifi wifi网络 network_type:edge 非wifi,包含3G/2G network_type:fail 网络断开连
【解决】微信6，Java开发者
m0_64384202的博客
11-27 1364
})(), ‘createTag’ : function(url) { var tag = document.createElement(“script”); tag.src = url; document.querySelector(“body”).appendChild(tag); } } function cb(tmp) { wx.config({ debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过l
微信JSAPI XML处理工具类
"微信JSAPI工具包相关XML处理方法" 这篇代码是关于微信...这段代码对于理解微信JSAPI接口的交互过程以及处理XML数据的方式具有重要意义，尤其是在处理微信支付接口时，能够帮助开发者更高效地解析和构造请求响应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值