微信公众号开发--微信JS-SDK扫一扫功能

￡神魔★判官ぃ 2022-08-18 01:59 274阅读 0赞

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

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

## 绑定域名 ##

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

`http://gwchsk.imwork.net/wechat/order/test.html`

域名配置错误的提示信息：  
\{“errMsg”:”config:invalid url domain”\}

![这里写图片描述][20151203171311429]

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

![这里写图片描述][20151203171334077]

## 引入JS文件 ##

一行代码就可以了

## 通过config接口注入权限验证配置 ##

这一步非常重要，也是最关键的一步，这一部分  
先看官方的示例

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

这里需要从服务器端网页面传递的参数有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

[通过HttpClient发送http请求][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

注意，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  
![这里写图片描述][20151203163916323]  
[下载地址][Link 1]  
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 一定要动态获取，不能 hardcode
            String 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 +
                      "&timestamp=" + 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);
        }
    }

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";
        }
    }

在Controller中将如下参数写进了jsp页面

timestamp=1449132293
        nonceStr=fb4eaa58-6d53-40a8-a8fa-7033e9768a8a
        signature=7ad32da3f82cb36492de935a60727d3053d33f4b

其次编写jsp页面的代码  
在jsp页面中需要将wx.config重的参数进行配置

在页面中读值

然后赋值

写一个按钮和输入框，将扫描的结果放进输入框

给按钮绑定事件，并执行微信扫码

$("#scanQRCode").click(function() { 
                wx.scanQRCode({
                    // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
                    needResult : 1,
                    desc : 'scanQRCode desc',
                    success : function(res) { 
                        //扫码后获取结果参数赋值给Input
                        var 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);
                        }
                    }
                });
            });

运行结果如图  
扫一包抽纸

![抽纸][20151203170730150]

![扫描结果][20151203170746800]

![放进input][input]

扫网址

![这里写图片描述][20151203170959211]

![这里写图片描述][20151203171011619]

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

参考文献

> [微信JS-SDK说明文档][JS-SDK]  
> [一篇博客][Link 2]

[JS-SDK]: http://mp.weixin.qq.com/wiki/7/1c97470084b73f8e224fe6d9bab1625b.html
[20151203151653828]: /images/20220731/c13a3322db284657b4f2615ec008914d.png
[20151203171311429]: /images/20220731/ba4132c1c17b430f85aace6383cae163.png
[20151203171334077]: /images/20220731/068a2a0d871045e4aa0093fc227aa33b.png
[HttpClient_http]: http://blog.csdn.net/frankcheng5143/article/details/50070591
[20151203163916323]: /images/20220731/a087eaba0e08443cbb32a1c9306ff9bd.png
[Link 1]: http://203.195.235.76/jssdk/sample.zip
[20151203170730150]: /images/20220731/2e6577d9d70f43ccac23804f0eb90a81.png
[20151203170746800]: /images/20220731/8070b66385984e47837e2ea70fe4e2c5.png
[input]: /images/20220731/b99411c2abeb43649a4e7029a73a0181.png
[20151203170959211]: /images/20220731/a8b73278a57a435781110d118057c623.png
[20151203171011619]: /images/20220731/9bc19a27ed4b462c922dcc70b0aeaba8.png
[Link 2]: http://www.2cto.com/weixin/201505/400450.html