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

站长资源 2024/11/9 佚名

55 1538 55

相思资源网 Design By www.200059.com

微信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里面，以达到同步执行的目的；

服务端接口：

//access_token是公众号的全局唯一票据
  public function getTokenForJS() {
    $appid = "不告诉你";
    $secret = "不告诉你";
    $url = "https://api.weixin.qq.com/cgi-bin/token".$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."&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&timestamp=1498120656&url=http://m.galaxy-immi.com/country/";
  // 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,function(data){
        jsapi_ticket = data['ticket'];
        //保存当前jsapi_ticket
        var date = new Date();
        date.setTime(date.getTime()+7200*1000);//只能这么写，10表示10秒钟
        //"jsapi_ticket="+jsapi_ticket);
        //alert('ccc='+jsapi_ticket);
        wxConfig();
      },'json');

    },'json');
  }else {
    //alert('bbb='+jsapi_ticket);
    wxConfig();
  }
}

以上这篇微信JS SDK接入的几点注意事项(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

微信JS,SDK接入

标签：

微信JS,SDK接入

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

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

暂无微信JS SDK接入的几点注意事项(必看篇)的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

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

微信JS,SDK接入

小发现之浅谈location.search与location.hash的问题

简单谈谈require模块化jquery和angular的问题

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

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

微信JS,SDK接入

小发现之浅谈location.search与location.hash的问题

简单谈谈require模块化jquery和angular的问题

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存