微信JS SDK接入的幾點注意事項

時間 2019-11-21

原文原文鏈接

微信JS SDK接入，主要能夠先參考官網說明文檔，總結起來有幾個步驟：html

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,後面須要用jquery

3.獲取access_token，再獲取jsapi_ticket，因爲不能頻繁調用獲取jsapi_ticket的函數，能夠保存一份全局的jsapi_ticket，存放在cookie中，若是過期了再從新獲取；另外，這兩個獲取操做建議放到服務端確保安全性;ajax

4.拼接noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網頁的URL，不包含#及其後面部分），對全部待簽名參數按照字段名的ASCII 碼從小到大排序（字典序）後，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這裏須要注意的是全部參數名均爲小寫字符。json

5.sha1加密生成簽名signature；api

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配置成功！");
            //實例化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();
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。