微信jsapi扫一扫接口实现(4)

2024-03-16 14:48
文章标签 实现 接口 微信 jsapi 扫一扫

本文主要是介绍微信jsapi扫一扫接口实现(4)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

转自：http://linfanhehe-163-com.iteye.com/blog/2325435

微信扫一扫功能在我们日常生活中很常见，那么微信jsapi是如何实现扫一扫功能的呢，接来下给大家详细介绍，并附有代码实现。

微信扫一扫 @V型知识库 原创

调起微信扫一扫接口

1
2
3
4
5
6
7
wx.scanQRCode({
     needResult: 0,  // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
     scanType: [ "qrCode" , "barCode" ],  // 可以指定扫二维码还是一维码，默认二者都有
     success:  function  (res) {
     var  result = res.resultStr;  // 当needResult 为 1 时，扫码返回的结果
}
});

 

第一、新建jsp页面，并引入js库

1
2
<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>

jweixin-1.1.0.js是调用微信jsapi的库，所以必须引入，第二行是本案例使用了jquery，所以引入的是jquery库

第二、引入界面样式，由于几节界面案例样式太难看，所以这次案例美化了一下界面。

1
<link rel= "stylesheet"  href= "http://203.195.235.76/jssdk/css/style.css" />

第三、<body></body>之间的html代码

1
2
3
4
5
6
7
8
< center >< h3 >欢迎来到微信jsapi测试界面-V型知识库</ h3 ></ center >
     < div  class = "lbox_close wxapi_form" >
      < h3  id = "menu-scan" >微信扫一扫</ h3 >
       < span  class = "desc" >调起微信扫一扫接口</ span >
       < button  class = "btn btn_primary"  id = "scanQRCode0" >scanQRCode(微信处理结果)</ button >
       < button  class = "btn btn_primary"  id = "scanQRCode1" >scanQRCode(直接返回结果)</ button >
      
      </ div >

第四、<script></script>之间初始化微信jsapi库添加接口函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//V型知识库 www.vxzsk.com

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' , //网络状态接口
                   'openLocation' , //使用微信内置地图查看地理位置接口
                   'getLocation' ,  //获取地理位置接口
                   'hideOptionMenu' , //界面操作接口1
                   'showOptionMenu' , //界面操作接口2
                   'closeWindow'  ,   界面操作接口3
                   'hideMenuItems' , 界面操作接口4
                   'showMenuItems' , 界面操作接口5
                   'hideAllNonBaseMenuItem' , 界面操作接口6
                   'showAllNonBaseMenuItem' , 界面操作接口7
                   'scanQRCode' // 微信扫一扫接口
                ]  // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
});

jsApiList数组中，最后一项就是我们调用微信扫一扫接口的函数，此函数必须在jsapi库中初始化，否则微信扫一扫功能无法调起。

第五、调用第三步button按钮的功能js代码，在wx.ready中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 9 微信原生接口 开始---------------------
   // 9.1.1 扫描二维码并返回结果
   document.querySelector( '#scanQRCode0' ).onclick =  function  () {
     wx.scanQRCode();
   };
   // 9.1.2 扫描二维码并返回结果
   document.querySelector( '#scanQRCode1' ).onclick =  function  () {
     wx.scanQRCode({
       needResult: 1,
       desc:  'scanQRCode desc' ,
       success:  function  (res) {
         alert(JSON.stringify(res));
       }
     });
   };
  // 9 微信原生接口 结束---------------------

第六、完整的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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<%@ 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%>">
     <!-- www.vxzsk.com原创 -->
     < title >微信jsapi测试-V型知识库</ title >
     < meta  name = "viewport"  content = "width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >
     < link  rel = "stylesheet"  href = "http://203.195.235.76/jssdk/css/style.css" />
    < 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 >
     < style  type = "text/css" >
     .desc{
     color: red;
     }
     </ style >
   </ head >
   
   < body >
   < center >< h3 >欢迎来到微信jsapi测试界面-V型知识库</ h3 ></ center >
     < div  class = "lbox_close wxapi_form" >
      < h3  id = "menu-scan" >微信扫一扫</ h3 >
       < span  class = "desc" >调起微信扫一扫接口</ span >
       < button  class = "btn btn_primary"  id = "scanQRCode0" >scanQRCode(微信处理结果)</ button >
       < button  class = "btn btn_primary"  id = "scanQRCode1" >scanQRCode(直接返回结果)</ button >
      
      </ div >
       
      
      < div  style = "display: none;" > 
      < h3  id = "menu-webview" >界面操作接口</ h3 >< br >
       < span  class = "desc"   >隐藏右上角菜单接口</ span >< br >
       < button  class = "btn btn_primary"  id = "hideOptionMenu" >hideOptionMenu</ button >< br >
       < span  class = "desc" >显示右上角菜单接口</ span >< br >
       < button  class = "btn btn_primary"  id = "showOptionMenu" >showOptionMenu</ button >< br >
       < span  class = "desc" >关闭当前网页窗口接口</ span >< br >
       < button  class = "btn btn_primary"  id = "closeWindow" >closeWindow</ button >< br >
       < span  class = "desc" >批量隐藏功能按钮接口</ span >< br >
       < button  class = "btn btn_primary"  id = "hideMenuItems" >hideMenuItems</ button >< br >
       < span  class = "desc" >批量显示功能按钮接口</ span >< br >
       < button  class = "btn btn_primary"  id = "showMenuItems" >showMenuItems</ button >< br >
       < span  class = "desc" >隐藏所有非基础按钮接口</ span >< br >
       < button  class = "btn btn_primary"  id = "hideAllNonBaseMenuItem" >hideAllNonBaseMenuItem</ button >< br >
       < span  class = "desc" >显示所有功能按钮接口</ span >< br >
       < button  class = "btn btn_primary"  id = "showAllNonBaseMenuItem" >showAllNonBaseMenuItem</ button >< br >
       < 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 = "openLocation" >openLocation</ button >< br >
       < span  class = "desc"  style = "color: red" >地理位置接口-获取地理位置接口</ span >< br >
       < button  class = "btn btn_primary"  id = "getLocation" >getLocation</ button >< br >
      < span  class = "desc"  style = "color: red" >获取网络状态接口</ span >< br >
       < button  class = "btn btn_primary"  id = "getNetworkType" >getNetworkType</ button >< br >
       < 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',//网络状态接口
                   'openLocation',//使用微信内置地图查看地理位置接口
                   'getLocation', //获取地理位置接口
                   'hideOptionMenu',//界面操作接口1
                   'showOptionMenu',//界面操作接口2
                   'closeWindow' ,  界面操作接口3
                   'hideMenuItems',界面操作接口4
                   'showMenuItems',界面操作接口5
                   'hideAllNonBaseMenuItem',界面操作接口6
                   'showAllNonBaseMenuItem',界面操作接口7
                   'scanQRCode'// 微信扫一扫接口
                ] // 必填，需要使用的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));
       }
     });
   };
   //网络接口结束
   
   // 7 地理位置接口 开始
   // 7.1 查看地理位置
   document.querySelector('#openLocation').onclick = function () {
     wx.openLocation({
       latitude: 23.099994,
       longitude: 113.324520,
       name: 'TIT 创意园',
       address: '广州市海珠区新港中路 397 号',
       scale: 14,
       infoUrl: 'http://weixin.qq.com'
     });
   };
   // 7.2 获取当前地理位置
   document.querySelector('#getLocation').onclick = function () {
     wx.getLocation({
       success: function (res) {
         alert(JSON.stringify(res));
       },
       cancel: function (res) {
         alert('用户拒绝授权获取地理位置');
       }
     });
   };
   // 7 地理位置接口 结束 
   
   // 8 界面操作接口 开始-----------
   // 8.1 隐藏右上角菜单
   document.querySelector('#hideOptionMenu').onclick = function () {
     wx.hideOptionMenu();
   };
   // 8.2 显示右上角菜单
   document.querySelector('#showOptionMenu').onclick = function () {
     wx.showOptionMenu();
   };
   // 8.3 批量隐藏菜单项
   document.querySelector('#hideMenuItems').onclick = function () {
     wx.hideMenuItems({
       menuList: [
         'menuItem:readMode', // 阅读模式
         'menuItem:share:timeline', // 分享到朋友圈
         'menuItem:copyUrl' // 复制链接
       ],
       success: function (res) {
         alert('已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
       },
       fail: function (res) {
         alert(JSON.stringify(res));
       }
     });
   };
   // 8.4 批量显示菜单项
   document.querySelector('#showMenuItems').onclick = function () {
     wx.showMenuItems({
       menuList: [
         'menuItem:readMode', // 阅读模式
         'menuItem:share:timeline', // 分享到朋友圈
         'menuItem:copyUrl' // 复制链接
       ],
       success: function (res) {
         alert('已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
       },
       fail: function (res) {
         alert(JSON.stringify(res));
       }
     });
   };
   // 8.5 隐藏所有非基本菜单项
   document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
     wx.hideAllNonBaseMenuItem({
       success: function () {
         alert('已隐藏所有非基本菜单项');
       }
     });
   };
   // 8.6 显示所有被隐藏的非基本菜单项
   document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
     wx.showAllNonBaseMenuItem({
       success: function () {
         alert('已显示所有非基本菜单项');
       }
     });
   };
   // 8.7 关闭当前窗口
   document.querySelector('#closeWindow').onclick = function () {
     wx.closeWindow();
   };
  // 8 界面操作接口  结束------------------------------------------
  
  // 9 微信原生接口 开始---------------------
   // 9.1.1 扫描二维码并返回结果
   document.querySelector('#scanQRCode0').onclick = function () {
     wx.scanQRCode();
   };
   // 9.1.2 扫描二维码并返回结果
   document.querySelector('#scanQRCode1').onclick = function () {
     wx.scanQRCode({
       needResult: 1,
       desc: 'scanQRCode desc',
       success: function (res) {
         alert(JSON.stringify(res));
       }
     });
   };
  // 9 微信原生接口 结束---------------------
   
});  
  //初始化jsapi接口 状态
wx.error(function (res) {
   alert("调用微信jsapi返回的状态:"+res.errMsg);
});
   
  </ script >
    
   </ body >
</ html >

上述jsp代码中有四个参数，这四个参数是成功调用微信jsapi的凭证，分别为appId(必填，公众号的唯一标识),timestamp(必填，生成签名的时间戳), nonceStr(必填，生成签名的随机串) ,signature(必填，签名)，关于如何生成这四个参数，如果不知道的读者，请查看本页面左上角的菜单，里面有详细介绍，在这里不在累述。 

第六、上述代码运行后，效果如下

 

最后一张效果图是扫描二维码后返回的结果数据


这篇关于微信jsapi扫一扫接口实现(4)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/815803。

相关文章

python使用watchdog实现文件资源监控

python使用watchdog实现文件资源监控

《python使用watchdog实现文件资源监控》watchdog支持跨平台文件资源监控,可以检测指定文件夹下文件及文件夹变动,下面我们来看看Python如何使用watchdog实现文件资源监控吧... python文件监控库watchdogs简介随着Python在各种应用领域中的广泛使用，其生态环境也
阅读更多...
el-select下拉选择缓存的实现

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景：问题描述解决方案：项目场景：从左侧列表中选取字段填入右侧下拉多选框，用户可以对右侧
阅读更多...
Python pyinstaller实现图形化打包工具

Python pyinstaller实现图形化打包工具

《Pythonpyinstaller实现图形化打包工具》：本文主要介绍一个使用PythonPYQT5制作的关于pyinstaller打包工具,代替传统的cmd黑窗口模式打包页面,实现更快捷方便的... 目录1.简介2.运行效果3.相关源码1.简介一个使用python PYQT5制作的关于pyinstall
阅读更多...
使用Python实现大文件切片上传及断点续传的方法

使用Python实现大文件切片上传及断点续传的方法

《使用Python实现大文件切片上传及断点续传的方法》本文介绍了使用Python实现大文件切片上传及断点续传的方法,包括功能模块划分（获取上传文件接口状态、临时文件夹状态信息、切片上传、切片合并）、整... 目录概要整体架构流程技术细节获取上传文件状态接口获取临时文件夹状态信息接口切片上传功能文件合并功能小
阅读更多...
python实现自动登录12306自动抢票功能

python实现自动登录12306自动抢票功能

《python实现自动登录12306自动抢票功能》随着互联网技术的发展,越来越多的人选择通过网络平台购票,特别是在中国,12306作为官方火车票预订平台,承担了巨大的访问量,对于热门线路或者节假日出行... 目录一、遇到的问题？二、改进三、进阶–展望总结一、遇到的问题？1.url-正确的表头：就是首先ur
阅读更多...
C#实现文件读写到SQLite数据库

C#实现文件读写到SQLite数据库

《C#实现文件读写到SQLite数据库》这篇文章主要为大家详细介绍了使用C#将文件读写到SQLite数据库的几种方法,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下... 目录1. 使用 BLOB 存储文件2. 存储文件路径3. 分块存储文件《文件读写到SQLite数据库China编程的方法》博客中，介绍了文
阅读更多...
Redis主从复制实现原理分析

Redis主从复制实现原理分析

《Redis主从复制实现原理分析》Redis主从复制通过Sync和CommandPropagate阶段实现数据同步,2.8版本后引入Psync指令,根据复制偏移量进行全量或部分同步,优化了数据传输效率... 目录Redis主DodMIK从复制实现原理实现原理Psync: 2.8版本后总结Redis主从复制实
阅读更多...
JAVA利用顺序表实现“杨辉三角”的思路及代码示例

JAVA利用顺序表实现“杨辉三角”的思路及代码示例

《JAVA利用顺序表实现“杨辉三角”的思路及代码示例》杨辉三角形是中国古代数学的杰出研究成果之一,是我国北宋数学家贾宪于1050年首先发现并使用的,：本文主要介绍JAVA利用顺序表实现杨辉三角的思... 目录一：“杨辉三角”题目链接二：题解代码：三：题解思路：总结一：“杨辉三角”题目链接题目链接：点击这里
阅读更多...
基于Python实现PDF动画翻页效果的阅读器

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主
阅读更多...
SpringBoot实现基于URL和IP的访问频率限制

SpringBoot实现基于URL和IP的访问频率限制

《SpringBoot实现基于URL和IP的访问频率限制》在现代Web应用中,接口被恶意刷新或暴力请求是一种常见的攻击手段,为了保护系统资源,需要对接口的访问频率进行限制,下面我们就来看看如何使用... 目录1. 引言2. 项目依赖3. 配置 Redis4. 创建拦截器5. 注册拦截器6. 创建控制器8.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2