微信开发日记-引入微信JS-SDK

微信开放文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
一，HTML文件

1.新建HTML文件引入js文件

<script type="text/javascript" src='http://res.wx.qq.com/open/js/jweixin-1.6.0.js'></script>

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

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

3.通过ready接口处理成功验证

<script>
 wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId, // 必填，公众号的唯一标识
        timestamp:timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature,// 必填，签名
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
    });
//检查是否引入成功
wx.checkJsApi({
  jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
  success: function(res) {
  // 以键值对的形式返回，可用的api值true，不可用为false
  // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
  }
});
</script>

1601288992(1).jpg

4，进入该网页的域名，分享连接的域名，生成signature的URI的域名必须保持一致与该公众号的“公众号设置”的“功能设置”里填写“JS接口安全域名”保持一致。

二，PHP文件
PHP文件主要用来生成wx.config的参数
1，timestamp：时间戳 此时间戳与生成Signature时的时间戳保持一致
2，nonceStr：随机字符串（abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789）随机16位
3，signature：签名

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
noncestr=Wm3WZYTPz0wzccnW //随机字符串
timestamp=1414587457 //时间戳
url=http://mp.weixin.qq.com?params=value //当前页面的连接 

url 为当前页面的连接，不可以写死 必须动态获取

 $protocol    = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        $url         = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

jsapi_ticket获取通过access_token 在此https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi 获取
注意jsapi_ticket过期时间为7200 秒 它与token为对应关系。

将以上四个参数按字典值排序（首字母ASCII码倒排）拼接

$url = 'jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value';
$signature = sha1($url);加密后