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

微信扫一扫功能在我们日常生活中很常见,那么微信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=#>
    <!-- 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',
 

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。

mysql操作指令 - 2016-09-19 18:09:09

一、连接mysql   进入 mysql 的安装目录;   $ bin/mysql -p [host IP 如果是登录本地的mysql 可以不写 -p 直接 -u] -u [userName] -p   输入密码,回车,接连; 二、权限操作[如果你很了解mysql数据库后,你可以直接去修改系统表,然后用 mysql flush privileges; 指令让权限生效] 1、赋权   mysqlGRANT ALL[权限名,all 表示所有权限] PRIVILEGES ON [dataBaseName *.*
ws-http.java 好久没有敲过java代码了,今天我家妹纸问我怎么写http post,第一想起来的就是 httpclient,找了下写个简单的东西搞个这么大的库,顺顺觉得杀鸡用牛刀了,记得以前jdk里面是自带httpclient的 sun.net.www.http.HttpClient ,jdk8里面好像移除了,没办法,整个简单的吧,够用就行. 仓库地址:  https://github.com/toohamster/ws-http.java Response httpResponse = ne

XML - JAXP技术 - DOM解析 - 2016-09-19 18:09:12

中秋节刚过去,龙哥布置的几个任务还没做完。唉,又开始学XML了。   DOM解析的基本思路: 1、将整个XML文件一次性读入内存 2、将整个XML看做一棵树 3、XML中的每一个标签,属性,文本都看做是树上的一个结点 4、然后可以对结点进行增删改查的操作   话不多说,上代码。 1、首先我在D:\ABC中新建了一个文本文件,重命名为stus.xml,以下是文件中的内容 ?xml version = "1.0" encoding = "GBK" ? stus class = "S160401A" stu n

java新手入门 - 2016-09-19 17:09:16

java新手入门 Java总有它的千般好处使你选择它,但这些随便翻翻书或在网上逛一圈就能找到答案。在本文中,笔者把自己学习Java的一些切身体会和过程写出来,供Java培训初学者做个参考。 我在学习Java的过程中主要围绕以下几个方面来学习: 1.时刻提醒自己Java是一种OOP语言工具,而不仅仅是编码,只有这样才能总体把握和运用Java。 2.在学习的过程中,最好能够了解Java的底层机制,而不是仅仅停留在表层,不是抄书上的例子运行出结果就可以。要注意,即便对一个简单的例子也要有耐心去琢磨、调试、改动。

自动id生成器类 - 2016-09-19 17:09:13

import java.util.concurrent.atomic.AtomicInteger;AtomicInteger idCreate = new AtomicInteger();idCreate.incrementAndGet();//返回int类型 //获取当前的值 public final int get() //取当前的值,并设置新的值 public final int getAndSet(int newValue) //获取当前的值,并自增 public final int getAnd
[size=medium]    在JSP里,获取客户端的IP地址的方法是:request.getRemoteAddr(),这种方法在大部分情况下都是有效的。但是在通过了Apache,Squid,nginx等反向代理软件就不能获取到客户端的真实IP地址了。 如果使用了反向代理软件,将http://192.168.1.110:2046/ 的URL反向代理为 http://www.jb51.net / 的URL时,用request.getRemoteAddr()方法获取的IP地址是:127.0.0.1 或 19

JAVA 常量池与String - 2016-09-19 14:09:50

  提到常量池,一般是指运行时常量池,是方法区的一部分。方法区就是通常说的永久代。那么常量池中会存储那些数据呢?   ①编译期生成的各种字面量和符号引用   ②也有可能将运行期间的常量放入常量池   先看第一种: 编译期生成的各种字面量和符号引用,这部分数据经过编译后存在.class文件的‘常量池’中,注意这个所谓的‘常量池’是‘静态常量池’,静态常量池的数据会在类加载后放入运行时常量池。举个例子   测试一 public class ConstantPoolAndStrTest { String str

btrace跟踪组数创建 - 2016-09-19 14:09:44

之前有人问我怎么用btrace跟踪数组的创建,这里记录一下。 需要靠Kind.NEWARRAY,比如要跟踪int数组的创建可以这么写 @BTracepublic class BtraceCreateArray { @OnMethod(clazz = "/.*/", method = "/.*/", location = @Location(value = Kind.NEWARRAY, clazz = "int") ) public static void findCreateIntArray() { pri

操作json - 2016-09-19 14:09:07

总是记不住一些零碎的知识点,这次开个专栏来记录,不定期更新: 1:json格式互转 1.1 :model转换json JSONObject jsonObject = JSONObject.fromObject(model);

解析数据存储MySQL - 2016-09-18 14:09:05

为了适应不同项目对不同感兴趣属性的解析存储,数据存储结构采用纵向的属性列表方式,即一个url页面多个属性存储多条记录方式,并且按照text,html,data,num几大典型类型分别对应存储。 创建UTF-8字符集的nutch数据库,并执行表初始化脚本,参考DDL: CREATE TABLE `crawl_data` ( `url` varchar(255) NOT NULL, `code` varchar(255) NOT NULL, `name` varchar(255) DEFAULT NULL,