您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

总结分享有关微信JS SDK接入的几点注意事项

2025/3/7 8:20:30发布20次查看
微信js sdk接入,主要可以先参考官网说明文档,总结起来有几个步骤:
1.绑定域名:
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“js接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
2.引入js文件:在需要调用js接口的页面引入如下js文件,(支持https):,
备注:支持使用 amd/cmd 标准模块加载方法加载,这里补充引入jquery.cookie.js,sha1.js,后面需要用
3.获取access_token,再获取jsapi_ticket,由于不能频繁调用获取jsapi_ticket的函数,可以保存一份全局的jsapi_ticket,存放在cookie中,如果过时了再重新获取;另外,这两个获取操作建议放到服务端确保安全性;
4.拼接noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的url,不包含#及其后面部分),对所有待签名参数按照字段名的ascii 码从小到大排序(字典序)后,使用url键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。
5.sha1加密生成签名signature;
6.配置wx.config,wx.ready,wx.error等方法,其中wx.ready是配置成功之后的回调,建议其他方法如微信分享wx.onmenusharetimeline,wx.onmenushareappmessage之类都放到ready里面,以达到同步执行的目的;
服务端接口:
//access_token是公众号的全局唯一票据     public function gettokenforjs() {         $appid = 不告诉你;         $secret = 不告诉你;         $url = https://api.weixin.qq.com/cgi-bin/token?appid=.$appid.&secret=.$secret.&grant_type=client_credential;         $result = http_request($url);         echo $result;exit;     }          //获取ticket     public function getticket(){         $access_token = i(get.access_token);         $url = https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=.$access_token.&type=jsapi;         //$this->ajaxjson($url);         $result = http_request($url);         echo $result;exit;     }          function http_request($url, $data = null)     {         $curl = curl_init();         curl_setopt($curl, curlopt_url, $url);         curl_setopt($curl, curlopt_ssl_verifypeer, false);         curl_setopt($curl, curlopt_ssl_verifyhost, false);         if (!empty($data)) {             curl_setopt($curl, curlopt_post, 1);             curl_setopt($curl, curlopt_postfields, $data);         }         curl_setopt($curl, curlopt_returntransfer, 1);         $info = curl_exec($curl);         curl_close($curl);         return $info;     }
前端js:
function setwechatjs() {     // var temp = jsapi_ticket=kgt8on7yvitdhtdwci0qerukvrgb1qlafzccybh4a_vmg6rgb4ohdsd4o2ruri0oupg5vfpklyywxcyeechbbw&noncestr=4df32e3jy6yneepnfgfs×tamp=1498120656&url=;     // alert( hex_sha1(temp)); return false;     //生成随机字符串     var randomstring = function(len) {         len = len || 32;         var $chars = 'abcdefghjkmnpqrstwxyzabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符ooll,9gq,vv,uu,i1****/         var maxpos = $chars.length;         var pwd = '';         for (var i = 0; i < len; i++) { pwd += $chars.charat(math.floor(math.random() * maxpos)); } return pwd; }; var showsharesetting = function () { console.log("title="+title+",description="+description+",link="+url+",imgurl="+imgurl); }; //wx配置参数 var jsapi_ticket = $.cookie('jsapi_ticket'); var hello2 = 'hello222'; console.log("jsapi_ticket="+jsapi_ticket); var wxconfig = function () { //alert('ddd='+jsapi_ticket); //获取当前url,不含#以及之后的部分 var timestamp = new date().gettime(); //生成签名的时间戳(当前时间) var noncestr = randomstring(20); var signature = ''; //签名 var url = window.location.href; var index = url.indexof('#'); if(index !== -1 ) { url = url.slice(0,index); } var temp = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url; signature = hex_sha1(temp); console.log("signature="+signature); wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appid: 'wx0875a197e0e5bcd7', // 必填,公众号的唯一标识 timestamp: timestamp, // 必填,生成签名的时间戳 noncestr: noncestr, // 必填,生成签名的随机串 signature: signature,// 必填,签名,见附录1 jsapilist: [ 'checkjsapi', 'onmenusharetimeline', 'onmenushareappmessage', 'onmenushareqq', 'onmenushareweibo', 'onmenushareqzone' ] // 必填,需要使用的js接口列表,所有js接口列表见附录2 }); wx.ready(function () { //配置成功之后回调 console.log("微信js sdk配置成功!"); //实例化title\imgurl title = $('title').html(); //默认取title description = $("meta[name='description']").attr('content'); //判断当前页面类型取缩略图 $("body img").each(function(index,element){ var width = $(element).width(); var height = $(element).height(); var src = $(element).attr("src"); if(width>200 && height>200){//去页面中第一张宽高都大于200的图片                     imgurl = src;                     //console.log(src);                     return false;                 }else{//未在页面中取到合适的图片就选取银河的logo图                     imgurl = mypic+/h5/img/icon.png;                 }             });             showsharesetting();             //分享到朋友圈             wx.onmenusharetimeline({                 title: title, // 分享标题                 link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号js安全域名一致                 imgurl: imgurl, // 分享图标                 success: function () {                     // 用户确认分享后执行的回调函数                     showsharesetting();                 },                 cancel: function () {                     // 用户取消分享后执行的回调函数                 }             });             //分享给朋友             wx.onmenushareappmessage({                 title: title, // 分享标题                 desc: description, // 分享描述                 link: url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号js安全域名一致                 imgurl: imgurl, // 分享图标                 type: '', // 分享类型,music、video或link,不填默认为link                 dataurl: '', // 如果type是music或video,则要提供数据链接,默认为空                 success: function () {                     // 用户确认分享后执行的回调函数                     showsharesetting();                 },                 cancel: function () {                     // 用户取消分享后执行的回调函数                 }             });             //分享到qq             wx.onmenushareqq({                 title: title, // 分享标题                 desc: description, // 分享描述                 link: url, // 分享链接                 imgurl: imgurl, // 分享图标                 success: function () {                     // 用户确认分享后执行的回调函数                     showsharesetting();                 },                 cancel: function () {                     // 用户取消分享后执行的回调函数                 }             });             //分享到qq空间             wx.onmenushareqzone({                 title: title, // 分享标题                 desc: description, // 分享描述                 link: url, // 分享链接                 imgurl: imgurl, // 分享图标                 success: function () {                     // 用户确认分享后执行的回调函数                     showsharesetting();                 },                 cancel: function () {                     // 用户取消分享后执行的回调函数                 }             });         });         wx.error(function(res){             console.log(微信js sdk配置错误!);             // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于spa可以在这里更新签名。         });     };     //待分享生成的标题、链接、缩略图     var title,url,imgurl,description;     //本地cookie查找不到缓存再去请求网络     if(typeof (jsapi_ticket) == 'undefined' || jsapi_ticket == ''){         //alert('aaa='+jsapi_ticket);         //以下步骤分别获取全局access_token、jsapi_ticket、signature         $.get(myurl+gettokenforjs,function (data) {             var access_token = data['access_token'];             //获取全局access_token,以及7200秒之后刷新的问题             //先出cookie中取,如果没有,             $.get(myurl+getticket?access_token=+access_token,function(data){                 jsapi_ticket = data['ticket'];                 //保存当前jsapi_ticket                 var date = new date();                 date.settime(date.gettime()+7200*1000);//只能这么写,10表示10秒钟                 //?替换成分钟数如果为60分钟则为 60 * 60 *1000                 $.cookie('jsapi_ticket',jsapi_ticket,{expires:date,path:'/'}); //有效期7200秒                 console.log(jsapi_ticket=+jsapi_ticket);                 //alert('ccc='+jsapi_ticket);                 wxconfig();             },'json');         },'json');     }else {         //alert('bbb='+jsapi_ticket);         wxconfig();     } }
以上就是总结分享有关微信js sdk接入的几点注意事项的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product