微信JS SDK接入的几点注意事项(必看篇)

微信JS SDK接入，主要可以先参考官网说明文档，总结起来有几个步骤：

1.绑定域名：

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看对应的接口权限。

2.引入JS文件

：在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js,

备注：支持使用 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里面，以达到同步执行的目的；

服务端接口：

//获取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：

生成随机字符串 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){//去<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>中第一张宽高都大于200的<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>
      imgUrl = Src;
      //console.log(Src);
      return false;
    }else{//未在<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>中取到合适的<a href="/tag/tupian/" target="_blank" class="keywords">图片</a>就选取银河的<a href="/tag/logo/" target="_blank" class="keywords">logo</a>图
      imgUrl = MyPic+"/H5/img/icon.png";
    }
  });
  showShareSetting();
  //<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>到朋友圈
  wx.onMenuShareTimeline({
    title: title,// <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>
    link: url,// <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/lianjie/" target="_blank" class="keywords">链接</a>，该<a href="/tag/lianjie/" target="_blank" class="keywords">链接</a>域名或路径必须与<a href="/tag/dangqianyemian/" target="_blank" class="keywords">当前页面</a>对应的公众号JS安全域名一致
    imgUrl: imgUrl,// <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>图标
    success: function () {
      // <a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>确认<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
      showShareSetting();
    },cancel: function () {
      // <a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>取消<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
    }
  });
  //<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>给朋友
  wx.onMenuShareAppMessage({
    title: title,// <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>
    desc: description,// <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>描述
    link: url,// <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>图标
    type: '',// <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>类型,music、video或link，不填默认为link
    dataUrl: '',// 如果type是music或video，则要提供数据<a href="/tag/lianjie/" target="_blank" class="keywords">链接</a>，默认为空
    success: function () {
      // <a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>确认<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
      showShareSetting();
    },cancel: function () {
      // <a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>取消<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
    }
  });
  //<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>到QQ
  wx.onMenuShareQQ({
    title: title,// <a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/lianjie/" target="_blank" class="keywords">链接</a>
    imgUrl: imgUrl,cancel: function () {
      // <a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>取消<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
    }
  });

  //<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a>到QQ空间
  wx.onMenuShareQZone({
    title: title,cancel: function () {
      // <a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>取消<a href="/tag/fenxiang/" target="_blank" class="keywords">分享</a><a href="/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
    }
  });
});
wx.error(function(res){
  console.log("微信JS SDK配置<a href="/tag/cuowu/" target="_blank" class="keywords">错误</a>！");
  // config信息验证失败会执行error<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>，如签名过期导致验证失败，具体<a href="/tag/cuowu/" target="_blank" class="keywords">错误</a>信息可以打开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()+72001000);//只能这么写，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接入的几点注意事项(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。