微信公众号开发之JS-SDK
<h2>一、微信公众号后台的设置</h2><p>1.设置IP白名单</p>
<ul>
<li>作用：为了提高公众平台开发者接口调用的安全性，避免一旦开发者ID和密码泄露后给帐号造成损失。我们对调用“获取access_token”接口（下文有详细介绍）增加IP白名单校验：只有将IP地址设置为公众号的IP白名单，才能成功调用该接口。</li>
<li>流程：开发--------基本配置--------公众号开发信息--------IP白名单</li>
</ul>
<p> 2.设置开发者密码（AppSecret）</p>
<ul>
<li>作用：后期获取access_token（下文有介绍）需要作为参数</li>
<li>流程：开发--------基本配置--------公众号开发信息--------开发者密码（AppSecret）</li>
<li>注意点：平台查看不了，如果忘记就只能重新设置，所以最好要自己保存起来。</li>
<li><img src="https://img2020.cnblogs.com/blog/1401061/202101/1401061-20210107140948639-1350609043.png" alt="" loading="lazy"></li>
</ul>
<h2> </h2>
<h2>二、后端的书写</h2>
<p>1.概念：</p>
<p> （1）jsapi_ticket：是公众号用于调用微信JS接口的临时票据。要通过access_token来获取。有效期7200秒，调用次数有限，最好<span style="background-color: rgba(255, 255, 0, 1)">缓存</span>在服务器。</p>
<p> （2）access_token：是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。（我很重要，除非你不需要使用微信接口~~）长度：至少512个字符；有效期：7200秒 （注意点：需要定时刷新，重复获取将导致上次获取的access_token失效。为保证平滑过渡，<span style="background-color: rgba(255, 255, 0, 1)">5分钟内</span>，新旧access_token都可以使用）</p>
<p> （3）signature：JS-SDK权限验证的签名，前端调取微信接口需使用。</p>
<p>2.思路：</p>
<p> 先获取access_token，再获取jsapi_ticket，再生成signature</p>
<p>3.过程：</p>
<p> （1）获取access_token：</p>
<p> https请求方式: GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET</p>
<p> 参数： appid 和 secret</p>
<div class="cnblogs_Highlighter">
<pre class="brush:php;gutter:true;"> function get_access_token(){
$url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$this->appId.'&secret='.$this->appSecret.'';
$result = json_decode(file_get_contents($url),true);
if(!isset($result['access_token'])){
return '';
}
return $result['access_token'];
}</pre>
</div>
<p> （2）获取jsapi_ticket：</p>
<p> https请求方式: GET https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi</p>
<p> 参数： access_token</p>
<div class="cnblogs_Highlighter">
<pre class="brush:php;gutter:true;"> function get_jsapi_ticket(){
$this->access_token = $this->get_access_token();
$url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$this->access_token.'&type=jsapi';
$result = json_decode(file_get_contents($url),true);
if(!isset($result['ticket'])){
return '';
}
return $result['ticket'];
}</pre>
</div>
<p> （3）先排序，后签名：</p>
<p> ASCII 码排序：jsapi_ticket=JSAPI_TICKET&noncestr=NONCESTR&timestamp=TIMESTAMP&url=URL</p>
<p> 签名：sha1(String)</p>
<p> 参数：jsapi_ticket、noncestr（随机字符串）、timestamp（时间戳） 和 url（需要调用接口的前端页面的路径）</p>
<div class="cnblogs_Highlighter">
<pre class="brush:php;gutter:true;"> function get_signature($ticket,$noncestr,$timestamp,$url){
$url = explode('#',$url);
$str = 'jsapi_ticket='.$ticket.'&noncestr='.$noncestr.'&timestamp='.$timestamp.'&url='.$url;
return sha1($str);
}</pre>
</div>
<p> （4）要缓存access_token，定期进行刷新</p>
<h2> </h2>
<h2>三、前端的书写</h2>
<p>1.引入JS文件</p>
<p> 在需要调用JS接口的地方添加：<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script></p>
<p>2.注入配置信息</p>
<p><strong style="font-size: 1em"> </strong> 通过config接口注入权限验证配置</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});</pre>
</div>
<p>前几个参数由后端传过来，最后一个的配置查 JS接口列表</p>
<p>3.通过ready接口处理成功验证和自定义接口</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})<br>........<br>
});
</pre>
</div>
<p> 这里调用的各种接口，需要在上面的配置信息中的 jsApiList 进行配置，并不是所有的公众号都能调用所有的接口的。比如我现在使用的公众号是个人公众号，很多接口都没有权限，分享什么的都不行。</p>
<h2> </h2>
<h2>四、源码</h2>
<p>点击下载</p>
<h2> </h2>
<h2>五、参考资料</h2>
<p> 1.微信开放文档</p><br><br>
来源：https://www.cnblogs.com/zxn-114477/p/14226508.html
頁:
[1]