本篇文章适合小白，一开始使用JSSDK调用微信接口的时候需要在config接口注入权限验证配置。这一步中最难的是签名的生成。

首先我来简述一下签名是怎么生成的

1.根据公众号的APPID 和 APPSECRET生成Access Tocken。

2.根据access tocken 生成 jsapi_ticket。（access tocken和jsapi_ticket他们都具有时效性，是7200秒）

3.根据jsapi_ticket、noncestr（随机生成数）、timestamp（时间戳）、url（当前网页地址）生成字符串string1,在对String1进行sha1的加密  生成了 签名

\"\"
 

下面在说一下前端是怎么使用js在config接口注入权限验证配置的：

一、静态的注入

静态注入很简单就想微信开发文档中的一样，给固定值即可。但是这边

\"\"

二、动态注入

后台去负责编写模块，前端通过ajax去获取这几个值具体写法如下：

<!doctype html>
<html lang=\"en\">
<head>
    <  charset=\"UTF-8\">
    <  name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">
    <  http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">
    < >签名</ >
    <button id=\"searchButton\">查询</button>
</head>
<body>
<  src=\"../../plugins/jquery/jquery-1.10.2.min.js\"></ >
<  src=\"../../js/url.js\"></ >
<  src=\"../../js/tools/weiixn.js\"></ >
< >
    var siteUrl = window.location.href;
    console.log(siteUrl);
    var times;
    var nonceStr;
    var signature;
    $(document).ready(function () {
        $.ajax({
            async:\'false\',
            type:\'GET\',
            url:testService+\"/api/Index/GetOauthTicket?url=\"+siteUrl,
            dataType:\"JSON\",
            success:function(res) {
                console.log(res)
                times = res.timestamp;
                nonceStr = res.noncestr;
                signature = res.signature;
                wx.config({
                    debug: true,
                    appId:\'wx51642718e0f550b6\',
                    timestamp:times,
                    nonceStr:nonceStr,
                    signature:signature,
                    jsApiList : [ \'checkJsApi\', \'scanQRCode\',\'translateVoice\' ]
                });//end_config
            },
        })
    })
   
    wx.error(function(res) {
        alert(\"出错了：\" + res.errMsg);
    });

    wx.ready(function() {
        wx.checkJsApi({
            jsApiList : [\'scanQRCode\'],
            success : function(res) {
                console.log(res)
            }
        });

        //扫描二维码
        $(document).on(\'click\',function () {
            wx.scanQRCode({
                needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType : [ \"qrCode\", \"barCode\" ], // 可以指定扫二维码还是一维码，默认二者都有
                success : function(res) {
                    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                    document.getElementById(\"wm_id\").value = result;//将扫描的结果赋予到jsp对应值上
                    alert(\"扫描成功::扫描码=\" + result);
                }
            });
        })
    });//end_ready
</ >
</body>
</html>

 

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章