微信公众号扫描功能实现
自定义菜单
微信公众号是一个很好的业务展现工具,快速与客户拉近距离,简单的微信公众号的维护和宣传,非接口实现可以通过微信公众号管理页面实现,但是设计到一个数据和用户交互行为,需要开发人员实现相应的微信公众号提供的接口,完成相关的功能。
配置微信公众号数据交互服务器
填写服务器配置
验证消息的确来自微信服务器
if (httpMethod.equals(HttpMethod.Http_Get))
{
if(null != operator && operator.equals("verifyToken")){
// 微信加密签名(token、timestamp、nonce。)
String signature = httpServletRequest.getParameter("signature");
String timestamp = httpServletRequest.getParameter("timestamp");// 时间戳
String nonce = httpServletRequest.getParameter("nonce");// 随机数
String echostr = httpServletRequest.getParameter("echostr");// 随机字符串
verifyTokenSer(signature,timestamp,nonce,echostr,TOKEN);
}else
{
System.out.println("请求不合法,不支持HTTP方法");
}
}
public void verifyTokenSer(String signature, String timestamp, String nonce, String echostr, String token)
{
try
{
HttpServletResponse response = ServletActionContext.getResponse();
// 将token、timestamp、nonce三个参数进行字典序排序
String[] params = new String[]{token, timestamp, nonce};
Arrays.sort(params);
// 将三个参数字符串拼接成一个字符串进行sha1加密
String clearText = params[0] + params[1] + params[2];
String algorithm = "SHA-1";
String sign = new String(Hex.encodeHex(MessageDigest.getInstance(algorithm).digest((clearText).getBytes()), true));
// 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信
if (signature.equals(sign))
{
response.getWriter().print(echostr);
}
} catch (Exception e)
{
e.printStackTrace();
}
}
TOKEN 为你设置的令牌,此接口为服务器地址设置的校验接口,在微信公众号平台校验接口是否调通,如调通,用户的扫描,关注公众号等操作都会回调到该服务器。
获取接口调用认证参数access_token
1 根据微信公众号平台提供的开发者ID(AppID)和开发者密码获取access_token
2 调用相关微信公众号接口获取access_token
注:1. 根据微信公众号接口提示access_token 一天获取次数有限制,而且一定时间需要重新获取,或者会失效,access_token的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的access_token失效,这里不再描述。
2. 调用接口时,请登录“微信公众平台-开发-基本配置”提前将服务器IP地址添加到IP白名单中,点击查看设置方法,否则将无法调用成功。
关闭自定义菜单
创建自定义菜单
此时我们的公众号菜单就会显示我们设置的菜单项
移动端设计
FrozenUI移动端使用—这里不再赘述,自行学习
点击扫描按钮,完成扫描设备二维码及条形码操作
微信JS-SDK的使用
想要在自己的服务器端,尤其是移动端使用微信扫描功能,通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
步骤三:通过config接口注入权限验证配置
var ajaxParam = {
url: "http://889f29c4.ngrok.io/dcms/devActivate_data?operator=getConfig",
type: 'get',
async: true,
timeout: "",
dataType: 'json',
cache:false,
success: function (data, textStatus, jqXHR) {
if(data.code ==0){
var timestamp = data.data.timestamp;
var nonceStr = data.data.nonceStr;
var signature = data.data.signature;
// alert("signature:"+signature+"timestamp:"+timestamp+"nonceStr:"+nonceStr);
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp:timestamp , // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature,// 必填,签名
jsApiList: ["scanQRCode"] // 必填,需要使用的JS接口列表
});
}
},
error: function (xhr, textStatus, error) {
},
};
$.ajax(ajaxParam);
通过事件启动扫描操作
wx.scanQRCode({
needResult : 1,
scanType : [ "qrCode", "barCode" ],
success : function(res) {
var resultStr = res.resultStr;
var errMsg = res.errMsg;
if(errMsg == "scanQRCode:ok"){
$("#scanQr").find("input").val(resultStr);
// alert(JSON.stringify(res));
}
},
fail : function(res) {
console.log(res)
// alert(JSON.stringify(res));
}
});