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

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+"×tamp="+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();
 }
}