首先请阅读微信JS-SDK说明文档，了解微信JS的相关说明。根据官方的使用步骤，关键的有以下几步

绑定域名（很关键）引入JS文件（很简单）通过config接口注入权限验证配置（很重要）通过ready接口处理成功验证（还没用到）通过error接口处理失败验证（还没用到）

步骤一：绑定域名

如果域名绑定有误，会出现如下错误提示错误的域名配置示例：

`http://gwchsk.imwork.net/wechat/order/test.html`域名配置错误的提示信息：{“errMsg”:”config:invalidurldomain”}

所以，域名配置的时候一定要注意1.域名不要以http:开头2.域名不要配置到具体的页面配置成功的提示如下

步骤二：引入JS文件一行代码就可以了

scriptsrc"http://res.wx.qq.com/open/js/jweixin-1.0.0.js"/script1步骤三：通过config接口注入权限验证配置这一步非常重要，也是最关键的一步，这一部分先看官方的示例

wx.config({debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId:'',//必填，公众号的唯一标识timestamp:,//必填，生成签名的时间戳nonceStr:'',//必填，生成签名的随机串signature:'',//必填，签名，见附录1jsApiList:[]//必填，需要使用的JS接口列表，所有JS接口列表见附录2});12345678这里需要从服务器端网页面传递的参数有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_typeclient_credentialappidAPPIDsecretAPPSECRET1通过HttpClient发送http请求就可以获取到access_token

得到access_token之后，采用httpGET方式请求获得jsapi_ticket

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_tokenACCESS_TOKENtypejsapi1注意，access_token和jsapi_ticket得有效期为7200秒，开发者必须在自己的服务全局缓存

获得jsapi_ticket之后，就可以生成JS-SDK权限验证的签名了。

签名算法

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）,有效的jsapi_ticket,timestamp（时间戳）,url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII码从小到大排序（字典序）后，使用URL键值对的格式（即key1value1key2value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL转义。

签名算法的实现最难的就是签名算法的实现部分，幸好微信给了demo，网上好多人都在找，这里我把签名算法的实现贴出来，代码来自微信demo下载地址java代码如下，做了一点点修改

packagecom.gwc.wechat.utils.wechat;importjava.io.UnsupportedEncodingException;importjava.security.MessageDigest;importjava.security.NoSuchAlgorithmException;importjava.util.Formatter;importjava.util.HashMap;importjava.util.Map;importjava.util.UUID;publicclassWxJSUtil{publicstaticvoidmain(String[]args){//注意URL一定要动态获取，不能hardcodeStringurl"http://gwchsk.imwork.net/wechat/order/test.html";MapString,Stringretsign(url);for(Map.Entryentry:ret.entrySet()){System.out.println(entry.getKey()+""+entry.getValue());}};publicstaticMapString,Stringsign(Stringurl){MapString,StringretnewHashMapString,String();//这里的jsapi_ticket是获取的jsapi_ticket。Stringjsapi_ticketJSAPITicketTool.getTicket();Stringnonce_strcreate_nonce_str();Stringtimestampcreate_timestamp();Stringstring1;Stringsignature"";//注意这里参数名必须全部小写，且必须有序string1"jsapi_ticket"+jsapi_ticket+"noncestr"+nonce_str+"timestamp"+timestamp+"url"+url;//System.out.println(string1);try{MessageDigestcryptMessageDigest.getInstance("SHA-1");crypt.reset();crypt.update(string1.getBytes("UTF-8"));signaturebyteToHex(crypt.digest());}catch(NoSuchAlgorithmExceptione){e.printStackTrace();}catch(UnsupportedEncodingExceptione){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);returnret;}privatestaticStringbyteToHex(finalbyte[]hash){FormatterformatternewFormatter();for(byteb:hash){formatter.format("%02x",b);}Stringresultformatter.toString();formatter.close();returnresult;}privatestaticStringcreate_nonce_str(){returnUUID.randomUUID().toString();}privatestaticStringcreate_timestamp(){returnLong.toString(System.currentTimeMillis()/1000);}}12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182Controller的代码

@Controller@RequestMapping(value"/order")publicclassOrderController{@RequestMapping(value"/test.html",methodRequestMethod.GET)publicStringtestPage(Modelmodel){StringurlConstant.AppURL+"/order/test.html";MapString,StringretWxJSUtil.sign(url);for(Map.Entryentry:ret.entrySet()){System.out.println(entry.getKey()+""+entry.getValue());model.addAttribute(entry.getKey().toString(),entry.getValue());}return"jqueryMobile";}}123456789101112131415在Controller中将如下参数写进了jsp页面

timestamp1449132293nonceStrfb4eaa58-6d53-40a8-a8fa-7033e9768a8asignature7ad32da3f82cb36492de935a60727d3053d33f4b123其次编写jsp页面的代码在jsp页面中需要将wx.config重的参数进行配置

wx.config({debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId:'',//必填，公众号的唯一标识timestamp:,//必填，生成签名的时间戳nonceStr:'',//必填，生成签名的随机串signature:'',//必填，签名，见附录1jsApiList:[]//必填，需要使用的JS接口列表，所有JS接口列表见附录2});12345678在页面中读值

inputid"timestamp"type"hidden"value"${timestamp}"/inputid"noncestr"type"hidden"value"${nonceStr}"/inputid"signature"type"hidden"value"${signature}"/123然后赋值

scripttype"text/javascript"$(function(){vartimestamp$("#timestamp").val();//时间戳varnonceStr$("#noncestr").val();//随机串varsignature$("#signature").val();//签名wx.config({debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId:'wx622ca8545e5c354b',//必填，公众号的唯一标识timestamp:timestamp,//必填，生成签名的时间戳nonceStr:nonceStr,//必填，生成签名的随机串signature:signature,//必填，签名，见附录1jsApiList:['scanQRCode']//必填，需要使用的JS接口列表，所有JS接口列表见附录2});});/script12345678910111213141516写一个按钮和输入框，将扫描的结果放进输入框

inputid"id_securityCode_input"buttonid"scanQRCode"扫码/button12给按钮绑定事件，并执行微信扫码

$("#scanQRCode").click(function(){wx.scanQRCode({//默认为0，扫描结果由微信处理，1则直接返回扫描结果needResult:1,desc:'scanQRCodedesc',success:function(res){//扫码后获取结果参数赋值给Inputvarurlres.resultStr;//商品条形码，取","后面的if(url.indexOf(",")0){vartempArrayurl.split(',');vartempNumtempArray[1];$("#id_securityCode_input").val(tempNum);}else{$("#id_securityCode_input").val(url);}}});});12345678910111213141516171819运行结果如图扫一包抽纸

扫网址

微信JS-SDK中的扫一扫就基本实现了。