根据微信官方文档说明，获取手机或其它移动设备的网络状态接口，网络状态的类型目前分为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开发频道中的其它章节(本页面左上角)，在这里不在累述，望见谅。
扫描二维码关注公众号，回复：
3064079 查看本文章
6，上述代码运行效果如下：
wifi下效果
3g下效果
此文章本站原创，地址
http://www.vxzsk.com/114.html 转载请注明出处！谢谢！