微信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实现自己的DOM选择器原理及代码
Mar 04 Javascript
js浮动图片的动态效果
Jul 10 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
原生js轮播特效
May 18 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
antd table按表格里的日期去排序操作
Nov 17 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
PHP注释实例技巧
2008/10/03 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
ThinkPHP之getField详解
2014/06/20 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python中处理时间的几种方法小结
2015/04/09 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Python字符串的一些操作方法总结
2019/06/10 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
Python实现手绘图效果实例分享
2020/07/22 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
高考励志标语
2014/06/05 职场文书
英语演讲开场白
2015/05/29 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers