天天看點
傳回

微信自定義分享JS-SDK制作微信分享

微信分享

現在越來越多的人喜歡分享一些東西給微信好友，是以我們最近需求要自定義分享微信内容，上網找了些資料，終于搞定了，下面來分享些經驗。

·       1.需要自定義分享的設定，需要綁定一個微信公衆号。首先要在公衆号的設定-功能設定裡設定JS安全域名，這樣微信會檢查被分享的連結是否在安全域名内，不在的話，将無法自定義分享。

·       2. 在開發者中心中擷取你的AppID和AppSecret，接下來在擷取令牌時，需要這兩個資訊。

·       3.微信這裡做了很多的安全驗證，是以這裡先需要背景做些準備工作：（後面會有詳細的代碼）

a．需要憑借你的appId和appSecret向騰訊申請access_token，token相當于令牌，說白了就是騰訊認定你是微信公衆号的開發者，可以讓你用一些騰訊的開發功能；

拿到token後要将token緩存起來或者存入資料庫中，每個token有效時間為2小時，如果請求成功了新的token，之前的就廢棄掉了。

傳回成功示例：

{"access_token":"vdlThyTfyB0N5eMoi3n_aMFMKPuwkE0MgyGf_0h0fpzL8p_hsdUX8VGxz5oSXuq5dM69lxP9wBwN9Yzg-0kVHY33BykRC0YXZZZ-WdxEic4","expires_in":7200}

·       b．擷取jsapi的ticket。jsapi_ticket是公衆号用于調用微信JS接口的臨時票據。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來擷取。也就是說，騰訊這麼多開發功能你想使用微信的jsapi，憑借着之前的門票，在給你另一張新的門票，這個門票專門來開發微信的jsapi。

拿到ticket之後，也要緩存起來或者存入資料庫中，因為他跟token失效機制是一樣的。

傳回成功執行個體：

{"errcode":0,"errmsg":"ok","ticket":"sM4AOVdWfPE4DxkXGEs8VMKv7FMCPm-I98-klC6SO3Q3AwzxqljYWtzTCxIH9hDOXZCo9cgfHI6kwbe_YWtOQg","expires_in":7200}

·       c．要獲得一個簽名。

此處要将jsapi_ticket、noncestr、timestamp、分享的url按字母順序連接配接起來，進行sha1簽名。 noncestr是你設定的任意字元串。 timestamp為10位秒級别的時間戳。

然後，背景要做的到此結束。

背景還要将noncestr，timestamp，appId和signature傳給前台

背景demo

//擷取token
function wx_get_token() {
    $token = S('access_token');
    if (!$token) {
        $res = file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='            .'你的AppID'.'&secret='            .'你的AppSecret');
        $res = json_decode($res, true);
        $token = $res['access_token'];
        // 注意：這裡需要将擷取到的token緩存起來（或寫到資料庫中）
        // 不能頻繁的通路https://api.weixin.qq.com/cgi-bin/token，每日有次數限制
        // 通過此接口傳回的token的有效期目前為2小時。令牌失效後，JS-SDK也就不能用了。
        // 是以，這裡将token值緩存1小時，比2小時小。緩存失效後，再從接口擷取新的token，這樣
        // 就可以避免token失效。
        // S()是ThinkPhp的緩存函數，如果使用的是不ThinkPhp架構，可以使用你的緩存函數，或使用資料庫來儲存。
        S('access_token', $token, 3600);
    }
    return $token;
}
           
//擷取ticket
function wx_get_jsapi_ticket(){
    $ticket = "";
    do{
        $ticket = S('wx_ticket');
        if (!empty($ticket)) {
            break;
        }
        $token = S('access_token');
        if (empty($token)){
            wx_get_token();
        }
        $token = S('access_token');
        if (empty($token)) {
            logErr("get access token error.");
            break;
        }
        $url2 = sprintf("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=%s&type=jsapi",
            $token);
        $res = file_get_contents($url2);
        $res = json_decode($res, true);
        $ticket = $res['ticket'];
        // 注意：這裡需要将擷取到的ticket緩存起來（或寫到資料庫中）
        // ticket和token一樣，不能頻繁的通路接口來擷取，在每次擷取後，我們把它儲存起來。
        S('wx_ticket', $ticket, 3600);
    }while(0);
    return $ticket;
}
           
/**
     * sha1加密, 傳回給前端使用
     */
    public function signature($timestamp, $nonceStr, $url)
    {
        $ticket = $this->getJsapiTicket();
        $wxOri = sprintf("jsapi_ticket=%s&noncestr=%s×tamp=%s&url=%s",
            $ticket, $nonceStr, $timestamp, $url
        );
        return sha1($wxOri);
    }

·       前台的代碼來了：

首先引入微信JS-SDK

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

然後在頁面配置

// 微信配置
wx.config({
    debug: false, 
    appId: "你的AppID", 
    timestamp: '上一步生成的時間戳', 
    nonceStr: '上一步中的字元串', 
    signature: '上一步生成的簽名',
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 功能清單，我們要使用JS-SDK的什麼功能
});
// config資訊驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是一個用戶端的異步操作，是以如果需要在 頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確定正确執行。對于使用者觸發時才調用的接口，則可以直接調用，不需要放在ready 函數中。
wx.ready(function(){
    // 擷取“分享到朋友圈”按鈕點選狀态及自定義分享内容接口
    wx.onMenuShareTimeline({
        title: '分享标題', // 分享标題
        link:"分享的url,以http或https開頭",
        imgUrl: "分享圖示的url,以http或https開頭" // 分享圖示
    });
    // 擷取“分享給朋友”按鈕點選狀态及自定義分享内容接口
    wx.onMenuShareAppMessage({
        title: '分享标題', // 分享标題
        desc: "分享描述", // 分享描述
        link:"分享的url,以http或https開頭",
        imgUrl: "分享圖示的url,以http或https開頭", // 分享圖示
        type: 'link', // 分享類型,music、video或link，不填預設為link
    });
});

·       這裡還有幾個坑要說下，避免大家入坑：

JS安全域名一定要是一級域名，如qq.com，不帶www的，二級域名是不行的，因為相比以前的分享沒有任何域名限制，這裡設定安全域名，目的是為了當發現此公衆平台發現誘導分享行為時，可以根據此域名追溯到所有分享出去的連結，以及通過這些連結增加的粉絲。這樣，微信就可以牢牢控制了你的微信平台，一旦發現違規，讓分享連結失效，删除掉誘導行為增加的粉絲，是瞬間就可以完成的。是以，微信平台的開發者，一定要合理來使用分享功能，不要因小失大。等到你的微信平台被封，估計哭都來不及。

Token請求每天也是有上限的，每天請求最多2000次，超過了次數将無法在此請求，一旦超出，可以在公衆号管理背景-開發-接口權限-擷取access_token的操作哪裡重置，不過每個月隻有10此機會。

有一個網頁調試工具，來檢視token的，位址：

https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token

生成簽名哪裡的被分享的url位址一定要是動态擷取的，之前我做的時候，靜态位址就不可以。

網頁調試工具，對比自己生成的簽名對不對：

http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

常見的報錯:

errMsg : config:invalid signature

簽名錯誤，逐一檢查生成簽名的每一項，是否有錯誤；

errMsg : config:invalid url domain

被分享的連結不再安全域名内，如果是開發完成測試的時候報的這個錯誤，放到線上一般就對了。

官方給的JS-SDK說明文檔：

http://mp.weixin.qq.com/wiki/home/index.html

最後微信也提供了官方的開發者工具，界面仿照chrome做的，可以模拟手機端的一些操作，其實就是模拟分享過程和檢視SDK的消息

微信自定義分享JS-SDK制作微信分享
微信開發 微信 js-sdk
上一篇: android與h5互動設計,H5與native互動之JSBridge
下一篇: 微信js-sdk 微信自定義分享顯示圖檔和描述不顯示

繼續閱讀