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

来源:http://www.cnblogs.com/chq3272991/archive/2017/06/22/7066614.html
-Advertisement-
Play Games

微信JS SDK接入,主要可以先參考 "官網說明文檔" ,總結起來有幾個步驟: 1.綁定功能變數名稱: 先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS介面安全功能變數名稱”。 備註:登錄後可在“開發者中心”查看對應的介面許可權。 2.引入JS文件:在需要調用JS介面的頁面引入如下JS文件,(支持htt ...


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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • margin重疊 摘自css2.1規範中文版 CSS中,兩個或者多個盒(可能但不一定是兄弟)的相鄰的margin會被結合成一個margin。Margin按這種方式結合叫重疊(collapse),產生的結合的margin叫做重疊margin。 margin重疊的計算規則 摘自css2.1規範中文版 當 ...
  • vue的選擇居於react與angular之間,框架自身的語法比react多一點,但是又比angular少一點。 也正是由於選擇的不同,所呈現出來的寫法與思考方式就一定會有所差異,不論優劣,但肯定會導致不同的偏好。 react的簡單在於,它的核心API其實非常少。所以我們會看到很多地方在說react ...
  • require 模塊化開發問題,正常自己寫的模塊 是exports 導出一個模塊 //模塊化引入jquery 不同和問題 require 引入jquery swiper .... 插件和庫的時候需要 require.config({ baseUrl:"js/libs", //文件夾目錄相對與html ...
  • 今天說面向對象,嗯,不是那個對象,是這個對象。 接下來就開始今天的內容: 什麼是面向對象: 就是把數據及數據的操作方法放在一起,作為一個相互依存的整體 對象。對同類對象抽象出其共性,形成類。 類中的大多數據,只能用本類的方法進行處理。類通過一個簡單的外部介面與外界發生關係,對象與對象之間通過消息進行 ...
  • 一、簡單請求與非簡單請求 跨域請求分為簡單與非簡單請求,同時滿足以下兩種條件的可以確定為簡單請求。 簡單請求的請求方法 簡單請求的HTTP頭信息 二、簡單請求處理原理 註意事項 三、非簡單請求處理原理 如果請求方法是PUT、DELETE,或者Content-type的類型為applicetion/j ...
  • 結合上面的,今天寫一下validate的使用方法。 validate()驗證所選的form。 validate 方法返回一個 Validator 對象。Validator 對象有很多方法可以用來引發校驗程式或者改變 form 的內容。 validate()的可選項: submitHandler:通過 ...
  • 代碼github地址:https://github.com/haozhaohang/library 作者: 易憐白 項目中使用了時間日期的處理方法,只使用了部分方法,為了不在引入第三方的庫(moment.js),這裡自己封裝了項目中使用到的方法。 要實現以下功能: 一、基礎代碼: arg = new ...
  • 在做慕課的javascript的教程時,遇到了一些關於 var 的問題。 一個是對於函數中變數聲明的問題,發現不論用不用 var聲明(req1丶req2丶sumq),程式都可以正常運行。代碼如下: 有點困惑,網上搜了下,看了下書。《javascript語言精粹》中提到:直接使用未經聲明的變數,這被稱 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...