基本流程

  1. 配置js安全域名

  2. 后台接口生成 config 数据

  3. 前端页面获取接口数据，调用 微信js-sdk 获取相应权限

配置js安全域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

后台接口生成 config 数据

  1. 获取access_token

  2. 通过access_token获取jsapi_ticket

  3. 通过jsapi_ticket生成签名

  4. 通过签名生成 config 数据

1
2
3
4
5

       <dependency>
           <groupId>com.github.liyiorg</groupId>
           <artifactId>weixin-popular</artifactId>
           <version>2.8.26</version>
       </dependency>

  • 后台接口(ActionResult 是我自定义的接口返回格式实体类，根据实际情况修改即可)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    /**
     * 微信授权签名
     *
     * @return
     * */
    @RequestMapping(value = "/wxOAuthSign")
    public ActionResult wxOAuthSign(String url) {
        try{
            Token token = TokenAPI.token(appid, appsecret);
            if(token == null || StringUtils.isEmpty(token.getAccess_token())){
                return ActionResult.fail();
            }
            Ticket ticket = TicketAPI.ticketGetticket(token.getAccess_token());
            if(ticket == null || StringUtils.isEmpty(ticket.getTicket())){
                return ActionResult.fail();
            }
            JSONObject data = JSONObject.parseObject(JsUtil.generateConfigJson(ticket.getTicket(), false, appid, URLDecoder.decode(url, "UTF-8"), null));
            return ActionResult.success(data);
        }catch(Exception ex){
            ex.printStackTrace();
            return ActionResult.exception();
        }
    }

前端页面获取接口数据，调用 微信 js-sdk 获取相应权限 

 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

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
        //点击按钮扫描二维码
        $("#scanQRCode").click(function(){
            $.ajax({
                url: 'wxOAuthSign',
                type: 'POST',
                data:{url: encodeURIComponent(location.href.split('#')[0])},
                dataType: "json",
                sync: false,
                success : function(data) {
                    if(data.code == 200){
                        if(!config.isEmptyObject(data.data)){
                            wx.config(data.data);
                            wx.ready(function() {
                                wx.scanQRCode({
                                    needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果
                                    scanType : [ "qrCode"],
                                    success : function(res) {
				        alert(res.resultStr);
                                    }
                                });
                            });
                        }
                    }
                },
                error: function () {
                    layer.closeAll();
                }
            });
        });
</script>