您现在的位置是:首页 > 其他

李清波 2022-10-25 其他 2519 复制当前网址

微信JSSDK使用

最近接手公众号方面的开发,今天简单测试JSSDK使用


https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html



1.设置js接口安全域名:


19338751-7ec06bdffd2deac4.webp.jpg


设置js接口


1》这个域名可以填写到自己项目的文件夹,例如我的域名www.juming.website/test



2》下载修改页面中的txt文件放到我们刚才写的域名的文件夹下:


19338751-6b771f91bb6c2907.webp.jpg


txt文件下载


2.引入js文件,在我们要编写的html文件中像普通的js引入一样引入微信js:


<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

3.书写config配置:


wx.config({
debug: true,                                         //是否开启调试模式
appId: 'wx5e821bcd97fe****',            //你的公众号的appid
timestamp: 1578294325,                   //时间戳,用于生成凭证,这个可以随意生成
nonceStr: 'juming',                            //生成签名用的随机字符串,这个可以随意定义
signature: 'f74c46ca05d486e790066090d7527c6e81fc****',    //签名
jsApiList: ['chooseImage']                //接口列表
});




4signature的生成:




1》首先要使用你的appid和screct生成access_token




https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid&secret=你的secret   




2》用你的access_token 获取jsapi_ticket:




https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi




3》url为你引用微信jssdk那个文件的路径,例如我的路径是:




url=http://www.juming.website/test/index.html




4》文档中需要拼接字符串一共四个参数,timestamp、noncestr为你在wx.config中填写的参数




5》文档中说要对参数按照字段名的ASCII 码从小到大排序,排序后的参数顺序为:


jsapi_ticket
noncestr
timestamp
url



6》拼接完字符串之后,我们需要对它进行sha1运算,我们新建一个php文件,代码如下:


$signature = sha1('jsapi_ticket='.$ticket.'&noncestr='.$noncestr.'&timestamp='.$timestamp.'&url='.$url);



生成结果:cb4f23846c7f0ec20449e1281836d49cfd78e3c2




7》将生成的signature填写到config中


$data = [
    'jsapi_ticket' => $ticket,
    'noncestr' => $noncestr,
    'timestamp' => time(),
    'signature' => sha1($signature),
    'url' => $url
];

echo json_encode($data);

后面的代码就交给前端了


5.至此配置文件就完成了,按照官方的接口列表,我们就可以使用微信的sdk了:


19338751-89a5555a830faa6d.webp.jpg

文章来源:https://liqingbo.com/blog-1807.html

评论