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

最新推荐文章于 2022-04-11 17:54:31 发布
最新推荐文章于 2022-04-11 17:54:31 发布
阅读量4.1k 收藏
点赞数
分类专栏： Java 微信开发

根据微信官方文档说明，获取手机或其它移动设备的网络状态接口，网络状态的类型目前分为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>之间的代码

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

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

3，jQuery代码

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接口

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页面代码

<%@ 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

dragonpeng2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsapi:微信jsapi接口
07-02
jsapi 微信jsapi接口 ###使用方法 引入库 [removed] 调用方法 分享到appmessage JSAPI.sendAppMessage(opt,callback); 分享到朋友圈 JSAPI.shareTimeline(opt,callback); 分享到腾讯微博 JSAPI.shareWeibo(opt,callback); 调用微信支付接口 JSAPI.pay(opt,callback); 获取收获地址 JSAPI.getLatest(opt,callback); 编辑收货地址 JSAPI.edit(opt,callback);
微信公众号开发-js获取客户端网络状态
liulei21的专栏
04-17 1148
微信网页中获取客户端网络状态 WeixinJSBridge.invoke('getNetworkType', function(e) { // 在这里拿到e.err_msg，这里面就包含了所有的网络类型 alert(e.err_msg); }); e.err_msg 值的意义 network_type:wifi wifi网络 network_typ...
移动端判断wifi
weixin_34402408的博客
03-06 594
用window.navigator.connection来检测，另外微信6.0版本以上，UA有个NetType，6.0版本以下，可以用微信私有接口WeixinJSBridge var wifi = true; var ua = window.navigator.userAgent; var con = window...
微信公众号开发9-公众号JSSDK开发-微信开发php
09-13
微信公众平台开发之公众号JSSDK开发是子恒老师《微信公众平台开发》视频教程的第9部。详细讲解了用php开发微信公众号，对微信公众平台中的JSSDK开发。内容包含用JSSDK获取网络状态，地理位置，分享到朋友圈，QQ，空间设置等等。欢迎反馈，微信/QQ：68183131
js-获取用户移动端网络类型：wifi、4g、3g、2g...
飞翔的熊blabla
11-06 2497
今天工作时间很宽裕， 忽然想起，自己做过的所有页面中，有些页面经常会面临用户在网络状态很差的时候打开页面，页面是挂了的状态，感觉很LOW~。 所以我决定在今后的页面中我需要先判断用户的网络状态， 若是很差的话，我首先会提醒他，当前网络状态不是很好，页面加载状态不是很好，提醒他最好切换网络状态； 尤其是可以用在播放视频的时候，若用户使用的是流量，可以清明的提醒用户“当前是在用流量播放视频”，好吧，也就我这么好的人才会提醒 以下是获取用户网络状态的代码： getNetworkType(..
js判断wifi_前端 JS 在网页里判断是否在 WIFI 环境 下
weixin_39875941的博客
12-29 2786
前端 JS 在网页里判断是否在 WIFI 环境 下 废话不多说直接上代码，有一点要注意的是 这里是重新进入页面, 而不是直接在当前页面切换到 某网络 然后刷新,不然不起作用！！！目前functionisWifi() {try {let wifi = truelet ua = window.navigator.userAgentlet con = window.navigator.connect...
2021年最新微信JS-SDK的使用
码蝗的博客
03-08 1364
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。 微信JS-SDK使用步骤如下: 步骤一：绑定域名 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。在设置安全域名时，根据注意事项的提示，将下载的文件上传到服务器的根目录下。 注意：如果需要支付功能，还要
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'...
tp5 微信支付 JSAPI支付接口 下载即用
12-15
封装好的微信JSAPI支付接口 下载放到项目里就能用
java微信支付DEMO, 微信JSAPI支付, 微信退款, 微信提现, 微信付款查询
08-03
微信native支付, 微信JSAPI支付, 微信退款, 微信提现, 微信付款查询, 所有方法都已经封装实现, main方法可直接调用体验, maven项目
微信JSAPI Ticket接口签名详解
12-10
本文实例为大家分享了微信JS接口签名的具体代码，供大家参考，具体内容如下 1、微信 JS 接口签名校验工具 2、具体开发 2.1 获取access_token，然后jsapi_ticket /** * 获取access_token，然后jsapi_ticket */ ...
微信获取jsapi_ticket详细接口代码
06-22
ignature 的值是用多个参数 sha1 加密的结果，详细...2， 根据 1 的access_token 来获取 jsapi_ticket 3， 生成一个随机字符串 nonceStr（16）位 4， 生成一当前时间缀 timestamp 5， 获取当前网页 URL（#号后不要）
微信JS接口汇总及使用详解，js接口汇总使用详解
凯
01-21 705
微信JS接口汇总及使用详解，js接口汇总使用详解 基本说明 使用说明 1.引入JS文件 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js 备注：支持使用 AMD/CMD 标准模块加载方法加载 2.注入配置config接口 所有需要使用JSSDK的页面必须先注
企业微信 之 网页鉴权
玄鱼殇
04-11 2580
企业微信 之 网页鉴权
微信小程序开发 安卓手机 调用 wx.startWifi API wx.getConnectedWifi API
qq_44757978的博客
03-23 921
获取 微信小程序 WiFi 信息 ```javascript mounted() { //初始化 Wi-Fi 模块。 wx.startWifi({ success(res) { console.log(res.errMsg, 'wifi初始化成功') }, fail: function(res){ console.log(res.errMsg, "wifi初始化失败")
在 Vue 中实现企业微信 JS-SDK 的调用
llxgdy的博客
11-03 5151
背景说明 最近有个项目要基于企业微信平台开发，并调用 JS-SDK 接口，因权限域名等问题，暂不能开始项目，所以我先自行注册了一个企业进行开发测试。 此项目是用 vue-cli3 搭建的 vue2.0 项目，在其中实现了企业微信 JS-SDK 简单的封装并调用成功。 项目的准备工作 1、注册一个企业微信，或有现有的企业微信并有管理员权限 2、注册一个域名（接口授权域名需用到） 3、能够部署项目的服务器（该项目是试用的腾讯云服务器，试用期一个月 2020-11-30 到期），并将域名解析到该服务器 IP 地址
微信JS接口说明
思科网络
07-16 3080
概述 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。 此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。 使用说明 在使用微信JS-
javascript如何获取设备连接网络类型，切换提示给用户
weixin_39531576的博客
08-16 3169
js有个navigator对象，有兴趣可自行在浏览器打印,如下图 具体方法如下 getTypeNet() { let strCode = navigator.userAgent; let stringNet= strCode .match(/NetType/\w+/) ? strCode .match(/NetType/\w+/)[0] : ‘NetType/other’; var netwo...
C#，数值计算，解微分方程的龙格-库塔二阶方法与源代码
最新发布
04-25
C#，数值计算，解微分方程的龙格-库塔二阶方法与源代码 微分方程 含有导数或微分的方程称为微分方程，未知函数为一元函数的微分方程称为常微分方程。 微分方程的阶数 微分方程中导数或微分的最高阶数称为微分方程的阶数。 微分方程的解 使得微分方程成立的函数称为微分方程的解。 微分方程的特解 微分方程的不含任意常数的解称为微分方程的特解。 微分方程的通解 所含相互独立的任意常数的个数与微分方程的阶数相等的微分方程的解称为微分方程的通解。
微信jsapi支付 openid
09-15
微信JSAPI支付是指在网页或移动应用中使用微信支付功能，通过获取用户的OpenID来进行支付。 首先，用户在网页或移动应用中选择使用微信支付，在支付过程中会调用微信JSAPI进行支付请求。 接下来，前端开发者需要通过微信开放平台提供的API获取用户的OpenID。在用户确认支付后，微信会将OpenID作为参数传递给开发者的服务器端。 开发者的服务器端通过调用微信开放平台提供的接口，使用预先设置的AppID和AppSecret来获取接口调用凭证access_token。 然后，开发者的服务器端可以通过OpenID和access_token进行相关操作，比如查询用户的基本信息、验证用户身份等。 最后，开发者的服务器端将支付相关信息和OpenID传递给微信支付接口，完成支付过程。 需要注意的是，为了保护用户的隐私，获取用户OpenID的过程需要进行身份验证。开发者需要在微信开放平台注册并获得AppID和AppSecret，在后台设置好接口的安全验证，确保支付过程的安全性。 总之，使用微信JSAPI支付需要获取用户的OpenID，通过微信开放平台提供的接口和密钥进行验证和支付操作，从而实现网页或移动应用中的微信支付功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值