zoukankan      html  css  js  c++  java
  • 微信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里面,以达到同步执行的目的;

    服务端接口:

    //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&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配置成功!");
                //实例化titleimgUrl
                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();
        }
    }
    
  • 相关阅读:
    设计模式--工厂模式
    docker
    学习的网址
    showslow小记
    .Net学习线路图
    《掌握软件测试九大技术》
    Apache和Tomcat
    Visual Studio 2017 更新到15.3后 提示错误:包含了重复的“Compile”项 的解决方法
    Asp.Net Core MVC项目实现多语言(Globalization/Localization)
    7月23日 会议纪要(项目有重要变动)
  • 原文地址:https://www.cnblogs.com/chq3272991/p/7066614.html
Copyright © 2011-2022 走看看