微信开发文档 : https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#0
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
$.ajax({
url:"/wxconfig",
type:"get",
data:{"url": window.location.href},
success:function (res) {
if(res.code == 200){
wx.config({
debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature,// 必填,签名
jsApiList: ['hideAllNonBaseMenuItem'] // 必填,需要使用的 JS 接口列表
});
wx.ready(function () {
wx.hideAllNonBaseMenuItem(); //隐藏所有非基础按钮接口
});
wx.error(function(res){
console.log(res)
});
}
},
error:function () {
}
});
</script>
服务端生成签名
//获取jsapi_ticket
$jsapiTicket = '';
$timestamp = time(); //时间戳
$nonceStr = time().rand(1,9999); //随机数
//url 当前H5页面url
$param = 'jsapi_ticket='.jsapiTicket.'&noncestr='.$nonceStr.'×tamp='.$timestamp.'&url='.$url;
$signature = sha1($param);
$config = [
'appId'=>'微信公众号appid',
'timestamp'=>$timestamp,
'nonceStr'=>$nonceStr,
'signature'=>$signature,
];
return json_encode([
'code'=>200,
'msg'=>'SUCCESS',
'data'=>$config
]);
jsapi_ticket
生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信 JS 接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的 api 调用次数非常有限,频繁刷新jsapi_ticket会导致 api 调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。
-
参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
-
用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi