微信公众号开发--微信JS-SDK扫一扫功能
首先请阅读微信JS-SDK说明文档,了解微信JS的相关说明。
根据官方的使用步骤,关键的有以下几步
- 绑定域名(很关键)
- 引入JS文件(很简单)
- 通过config接口注入权限验证配置(很重要)
- 通过ready接口处理成功验证(还没用到)
- 通过error接口处理失败验证(还没用到)
步骤一:绑定域名
如果域名绑定有误,会出现如下错误提示
错误的域名配置示例:
`http://gwchsk.imwork.net/wechat/order/test.html`
域名配置错误的提示信息:
{“errMsg”:”config:invalid url domain”}
所以,域名配置的时候一定要注意
1. 域名不要以http:开头
2. 域名不要配置到具体的页面
配置成功的提示如下
步骤二:引入JS文件
一行代码就可以了
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
- 1
步骤三:通过config接口注入权限验证配置
这一步非常重要,也是最关键的一步,这一部分
先看官方的示例
wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: '', // 必填,公众号的唯一标识timestamp: , // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '',// 必填,签名,见附录1jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
这里需要从服务器端网页面传递的参数有timestamp、nonceStr和signature而appId和jsApiList都是固定的,这里直接写在页面中。
首先,编写服务器端代码,生成timestamp、nonceStr和signature。
在生成timestamp、nonceStr和signature的时候有两个参数需要获取
一个是access_token,另一个是jsapi_ticket。
access_token的获取需要AppId和AppSecret,获取地址如下,发送GET请求
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
- 1
通过HttpClient发送http请求就可以获取到access_token
得到access_token之后,采用http GET方式请求获得jsapi_ticket
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
- 1
注意,access_token和jsapi_ticket得有效期为7200秒,开发者必须在自己的服务全局缓存
获得jsapi_ticket之后,就可以生成JS-SDK权限验证的签名了。
签名算法
签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。
签名算法的实现
最难的就是签名算法的实现部分,幸好微信给了demo,网上好多人都在找,这里我把签名算法的实现贴出来,代码来自微信demo
下载地址
java代码如下,做了一点点修改
package com.gwc.wechat.utils.wechat;import java.io.UnsupportedEncodingException;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Formatter;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;public class WxJSUtil {public static void main(String[] args) {// 注意 URL 一定要动态获取,不能 hardcodeString url = "http://gwchsk.imwork.net/wechat/order/test.html";Map<String, String> ret = sign(url);for (Map.Entry entry : ret.entrySet()) {System.out.println(entry.getKey() + "=" + entry.getValue());}};public static Map<String, String> sign(String url) {Map<String, String> ret = new HashMap<String, String>();//这里的jsapi_ticket是获取的jsapi_ticket。String jsapi_ticket = JSAPITicketTool.getTicket();String nonce_str = create_nonce_str();String timestamp = create_timestamp();String string1;String signature = "";//注意这里参数名必须全部小写,且必须有序string1 = "jsapi_ticket=" + jsapi_ticket +"&noncestr=" + nonce_str +"×tamp=" + timestamp +"&url=" + url;// System.out.println(string1);try{MessageDigest crypt = MessageDigest.getInstance("SHA-1");crypt.reset();crypt.update(string1.getBytes("UTF-8"));signature = byteToHex(crypt.digest());}catch (NoSuchAlgorithmException e){e.printStackTrace();}catch (UnsupportedEncodingException e){e.printStackTrace();}ret.put("url", url);ret.put("jsapi_ticket", jsapi_ticket);ret.put("nonceStr", nonce_str);ret.put("timestamp", timestamp);ret.put("signature", signature);return ret;}private static String byteToHex(final byte[] hash) {Formatter formatter = new Formatter();for (byte b : hash){formatter.format("%02x", b);}String result = formatter.toString();formatter.close();return result;}private static String create_nonce_str() {return UUID.randomUUID().toString();}private static String create_timestamp() {return Long.toString(System.currentTimeMillis() / 1000);}
}
- 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
Controller的代码
@Controller
@RequestMapping(value = "/order")
public class OrderController {@RequestMapping(value = "/test.html", method = RequestMethod.GET)public String testPage(Model model) {String url = Constant.AppURL + "/order/test.html";Map<String, String> ret = WxJSUtil.sign(url);for (Map.Entry entry : ret.entrySet()) {System.out.println(entry.getKey() + "=" + entry.getValue());model.addAttribute(entry.getKey().toString(), entry.getValue());}return "jqueryMobile";}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
在Controller中将如下参数写进了jsp页面
timestamp=1449132293nonceStr=fb4eaa58-6d53-40a8-a8fa-7033e9768a8asignature=7ad32da3f82cb36492de935a60727d3053d33f4b
- 1
- 2
- 3
其次编写jsp页面的代码
在jsp页面中需要将wx.config重的参数进行配置
wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId: '', // 必填,公众号的唯一标识timestamp: , // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '',// 必填,签名,见附录1jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
在页面中读值
<input id="timestamp" type="hidden" value="${timestamp}" /><input id="noncestr" type="hidden" value="${nonceStr}" /><input id="signature" type="hidden" value="${signature}" />
- 1
- 2
- 3
然后赋值
<script type="text/javascript">$(function() {var timestamp = $("#timestamp").val();//时间戳var nonceStr = $("#noncestr").val();//随机串var signature = $("#signature").val();//签名wx.config({debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId : 'wx622ca8545e5c354b', // 必填,公众号的唯一标识timestamp : timestamp, // 必填,生成签名的时间戳nonceStr : nonceStr, // 必填,生成签名的随机串signature : signature,// 必填,签名,见附录1jsApiList : [ 'scanQRCode' ]// 必填,需要使用的JS接口列表,所有JS接口列表见附录2});});</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
写一个按钮和输入框,将扫描的结果放进输入框
<input id="id_securityCode_input">
<button id="scanQRCode">扫码</button>
- 1
- 2
给按钮绑定事件,并执行微信扫码
$("#scanQRCode").click(function() {wx.scanQRCode({// 默认为0,扫描结果由微信处理,1则直接返回扫描结果needResult : 1,desc : 'scanQRCode desc',success : function(res) {//扫码后获取结果参数赋值给Inputvar url = res.resultStr;//商品条形码,取","后面的if(url.indexOf(",")>=0){var tempArray = url.split(',');var tempNum = tempArray[1];$("#id_securityCode_input").val(tempNum);}else{$("#id_securityCode_input").val(url);}}});});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
运行结果如图
扫一包抽纸
扫网址
微信JS-SDK中的扫一扫就基本实现了。
微信公众号开发--微信JS-SDK扫一扫功能相关推荐
- 微信公众号开发--微信JS-SDK分享到朋友圈和分享给朋友
之前写过一篇使用微信JS-SDK来实现扫一扫功能的博客 微信公众号开发–微信JS-SDK扫一扫功能 在该博客里介绍了微信JS-SDK的基本用法,其中包括以下几个步骤 还详细介绍了通过config接口注 ...
- 视频教程-SpringBoot微信公众号开发-微信开发
SpringBoot微信公众号开发 就职于国内知名在线互联网旅游公司,10+互联网开发经验,精通前后端开发 刘志强 ¥149.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免 ...
- 视频教程-微信公众号开发-微信开发
微信公众号开发 云知梦创始人,国际架构师,11年互联网培训和开发经验,曾在港电讯盈科.北大青鸟集团.远大教育.北京易第优教育等公司任职曾获得美国红帽RHCA构架师和RHCDS数据中心讲师,在国内排名第 ...
- Java微信公众号开发微信网页授权之前端传递code方式获取用户信息
本片博客讲解的网页授权分为两步,前端先传递backUrl(回调地址)到后台网页授权接口,该接口拿到回调地址后组装授权连接,重定向到前端页面,前端页面截取Code,传入后端获取用户信息方法,获取用户信息 ...
- 微信公众号开发---微信开发学习路线(及供参考)
目录(?)[-] 1. 热门学习 1. 微信支付之H5页面WAP端接入 2. 微信支付开发系统开发流程及完整Demo展示 3. 微信公共服务平台开 ...
- c# sha1签名 微信_微信公众号开发——微信JSSDK使用(踩坑)
这段时间有个工作,是要在移动端给地图上加上导航功能,找了一圈,最后决定使用微信JSSDK的'打开地理位置接口'来开发,也是着实踩了下坑啊,分享一下 微信JSSDK介绍 因为微信公众号的开通对于大部分开 ...
- jssdk信息验证失败_微信公众号开发——微信JSSDK使用
微信JSSDK介绍 官方文档地址: 概述 | 微信开放文档links.jianshu.com 因为微信公众号的开通对于大部分开发人员来说还是一个稍高的门槛,所以,微信搞了一个微信测试号,开发人员使用 ...
- 微信公众号开发——微信获取、操作公众号文章
微信获取,操作公众号文章 项目地址:https://gitee.com/wrzhxy/wx_article 我以为微信支付和微信企业付款文档就够坑爹了,直到我遇到了微信获取公众号文章... 微信获取公 ...
- 微信公众号开发——微信支付踩坑小记
记录下需要注意的几个问题: 1.在每个需要调用微信支付的页面都要引入js.如果部署的服务器支持https,则应换成对应的https的js链接 2.微信公众号内填写域名,不带http://或者https ...
- 微信公众号开发-----微信模板消息接口-----发送模板消息
发送模板消息 接口调用请求说明 http请求方式: POST https://api.weixin.qq.com/cgi-bin/message/template/send?access_token= ...
最新文章
- 一个多功能蓝色漂亮的搜索条
- C\C++对文件的读写操作
- filter 中用spring StopWatch 监控请求执行时间
- JSON-RPC、XML-RPC、SOAP三者的关系
- element里面popover里面的高度_五斗柜的高度一般是多少 五斗柜放在什么位置好
- Java-Type简单分类
- android 博饼代码,中秋博饼游戏下载
- 背景建模之高斯混合模型
- sqlite编辑器 linux,SQLite3 ARM平台交叉编译
- ISCC2022wp
- word如何批量更改公式字体
- 国外问卷调查这个项目可以做吗?
- 图像去燥——TV Loss
- 【Rosalind】Rabbits and Recurrence Relations
- Oracle使用shutdown命令后长时间无反应
- 堆(大根堆、小根堆)
- SQL Anywhere(ASA) 数据库“File is shorter than expected -- transaction rolled back”错误修复...
- 涂书笔记-让读书笔记不再困难
- c语言 输入x, y=(x-5)^1/2+lgx,输出y,C题求解!!(带详细解说)帮帮忙!
- 看《史记-伯夷叔齐列传》