微信公眾號掃一掃開發

本文轉載自查看原文 2018-03-27 18:29 1136 微信公眾號

步驟

根據微信JS-JDK文檔說明，實現掃一掃主要有以下幾大步驟：

綁定域名
引入JS文件
通過config接口注入權限驗證配置
通過ready接口處理成功驗證
通過error接口處理失敗驗證

綁定域名

在JS接口安全域名填入域名，注意不帶http，如圖：

引入JS文件

1 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

通過config接口注入權限驗證配置

 1 $.ajax({
 2         url: "${pageContext.request.contextPath}/wechat/jsapisign",
 3         type: "post",
 4         data: {
 5             url: location.href.split('#')[0]
 6         },
 7         contentType: 'application/x-www-form-urlencoded;charset=utf-8',
 8         async: true,
 9         success: function (data) {
10             wx.config({
11                 debug: false,
12                 appId: data.appid, // 必填，公眾號的唯一標識
13                 timestamp: data.timestamp, // 必填，生成簽名的時間戳
14                 nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
15                 signature: data.signature,// 必填，簽名，見附錄1
16                 jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
17             });
18         }
19     });

微信jsapi驗簽

 1 public Map<String, String> jsApiSign(String url) {
 2         Map<String, String> ret = new HashMap<String, String>(16);
 3         String nonce_str = CheckUtil.create_nonce_str();
 4         String timestamp = CheckUtil.create_timestamp();
 5         String string1;
 6         String signature = "";
 7 
 8         String jsapi_ticket = wechatAccessTokenService.getJsApiTicket();
 9         //注意這里參數名必須全部小寫，且必須有序
10         string1 = "jsapi_ticket=" + jsapi_ticket +
11                 "&noncestr=" + nonce_str +
12                 "&timestamp=" + timestamp +
13                 "&url=" + url;
14         logger.info("jsApiSign===" + string1);
15 
16         try {
17             MessageDigest crypt = MessageDigest.getInstance("SHA-1");
18             crypt.reset();
19             crypt.update(string1.getBytes("UTF-8"));
20             signature = CheckUtil.byteToHex(crypt.digest());
21         } catch (NoSuchAlgorithmException | UnsupportedEncodingException e) {
22             e.printStackTrace();
23         }
24 
25         ret.put("appid", appid);
26         ret.put("url", url);
27         ret.put("jsapi_ticket", jsapi_ticket);
28         ret.put("nonceStr", nonce_str);
29         ret.put("timestamp", timestamp);
30         ret.put("signature", signature);
31         logger.info("jsApiSign===url=" + url + "==jsapi_ticket" + jsapi_ticket + "==nonce_str" + nonce_str + "==timestamp" + timestamp + "==signature" + signature);
32         return ret;
33     }

 1 public String getJsApiTicket() {
 2         AugeWechatAccessToken wechatAccesstoken = augeWechatAccessTokenMapper.selectByPrimaryKey(jsApiTicketId);
 3         logger.info("getJsApiTicket===" + wechatAccesstoken.getAccessToken());
 4         if (Strings.isNullOrEmpty(wechatAccesstoken.getAccessToken()) || wechatAccesstoken.getExpiresIn() - 100 * 1000 < System.currentTimeMillis()) {
 5             //空或者過期，刷新
 6             return refreshJsApiTicket();
 7         } else {
 8             return wechatAccesstoken.getAccessToken();
 9         }
10     }

Controller層代碼

1 @RequestMapping(value = "/jsapisign", method = {RequestMethod.GET, RequestMethod.POST}, produces = MEDIATYPE_CHARSET_JSON_UTF8)
2     @ResponseBody
3     public String jsApiSign(String url) {
4         //添加微信js簽名信息
5         Map<String, String> signMap = wechatService.jsApiSign(url);
6 
7         return JSON.toJSONString(signMap);
8     }

前台JSP頁面完整代碼

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-CN">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<head>
    <base href="<%=basePath%>">
    <title>掃碼還書</title>
    <link rel="stylesheet" href="http://203.195.235.76/jssdk/css/style.css"/>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../resources/css/bookdetail.css">

</head>

<body>
<div class="wrap" style="width: 100% ;height: 100%">
    <img src="../../../resources/images/borrow/return.png" alt="" style="width: 100% ;height: 75%">
    <div style="text-align: center; background-color: #f5f5f5; ">
        <img src="../../../resources/images/borrow/scanReturn.png" alt="" style="width: 40% ;height: 25%;" id="scanQRCode1">
    </div>

</div>

<script type="text/javascript">
    $.ajax({
        url: "${pageContext.request.contextPath}/wechat/jsapisign",
        type: "post",
        data: {
            url: location.href.split('#')[0]
        },
        contentType: 'application/x-www-form-urlencoded;charset=utf-8',
        async: true,
        success: function (data) {
            wx.config({
                debug: false,
                appId: data.appid, // 必填，公眾號的唯一標識
                timestamp: data.timestamp, // 必填，生成簽名的時間戳
                nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
                signature: data.signature,// 必填，簽名，見附錄1
                jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表
            });
        }
    });
    wx.ready(function () {
        // 9.1.2 掃描二維碼並返回結果
        document.querySelector('#scanQRCode1').onclick = function () {
            wx.scanQRCode({
                needResult: 1,
                desc: 'scanQRCode desc',
                success: function (res) {
                    //掃碼后獲取結果參數賦值給Input
                    var url = res.resultStr;
                    //商品條形碼，取","后面的
                    if (url.indexOf(",") >= 0) {
                        var tempArray = url.split(',');
                        var barCode = tempArray[1];
                        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx96668744efc2b2de&redirect_uri=http://cx.ngrok.xiaomiqiu.cn/wechat/toReturnDetail?barCode=" + barCode + "&response_type=code&scope=snsapi_base&state=BINDFACE#wechat_redirect";

                    } else {
                        alert("請對准條形碼掃碼!");
                    }
                }
            });
        };
    });
    //初始化jsapi接口 狀態
    wx.error(function (res) {
        alert("調用微信jsapi返回的狀態:" + res.errMsg);
    });

</script>
</body>
</html>

注：開發中容易出現的有signature驗簽錯誤，我們可以透過前后端url一致性來判斷。其次就是注意有時候的錯誤是由於accessToken沒有刷新的緣故，需要重新刷新。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 php實現微信公眾號掃一掃開發微信公眾號網頁調用微信js-sdk(掃一掃，語音) 微信公眾號開發調用微信第三方接口（掃一掃為例）微信公眾號首頁掃一掃功能 .Net 調用微信公眾號掃一掃微信公眾號調用掃一掃微信公眾號H5頁面調用微信掃一掃功能關於公眾號內嵌H5調用微信掃一掃,IOS報錯（Vue框架）微信公眾號掃一掃后端簽名接口案例微信公眾平台：掃一掃demo