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


Posted in Javascript onJune 23, 2017

微信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=".$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=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+"×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();
  }
}

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

Javascript 相关文章推荐
JavaScript的9个陷阱及评点分析
May 16 Javascript
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 #jQuery
详解vuejs之v-for列表渲染
Jun 22 #Javascript
vue.js实现条件渲染的实例代码
Jun 22 #Javascript
vue.js 上传图片实例代码
Jun 22 #Javascript
详解Angular 开发环境搭建
Jun 22 #Javascript
详解Angular2组件之间如何通信
Jun 22 #Javascript
Angular2 父子组件数据通信实例
Jun 22 #Javascript
You might like
mysql总结之explain
2012/02/27 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python中随机函数random用法实例
2015/04/30 Python
python生成随机图形验证码详解
2017/11/08 Python
python实现简单http服务器功能
2018/09/17 Python
python 解压pkl文件的方法
2018/10/25 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
python 实现控制鼠标键盘
2020/11/27 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
新闻系毕业生推荐信
2013/11/16 职场文书
环境卫生倡议书
2014/08/29 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
发票退票证明
2015/06/24 职场文书