1. 程式人生 > >微信二次分享

微信二次分享

動態獲取 message 建議 導致 駝峰 校驗 微信js-sdk dataurl 錯誤

Q: 使用微信二次分享的時候,標題被截短,描述也變成了鏈接,圖片也沒有

solution

文檔說明

  1. 微信JS-SDK說明文檔

  2. JS-SDK使用步驟

    2.1 綁定域名

    登錄微信公眾平臺進入“公眾號設置”-->>“功能設置”-->>“JS接口安全域名”,按照提示進行填寫。

    前端

    2.2 引入js文件

    在需要調用JS接口的頁面引入如下JS文件,http://res.wx.qq.com/open/js/jweixin-1.2.0.js

    2.3 通過config接口註入權限驗證配置

    wx.config({
        debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
        appId: ‘‘, // 必填,公眾號的唯一標識
        timestamp: , // 必填,生成簽名的時間戳
        nonceStr: ‘‘, // 必填,生成簽名的隨機串
        signature: ‘‘,// 必填,簽名,見附錄1
        jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
    });

    2.4 通過ready接口處理成功驗證

    wx.ready(function(){
    
        // config信息驗證後會執行ready方法,所有接口調用都必須在config接口獲得結果之後,  config是一個客戶端的異步操作,所以如果需要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口,則可以直接調用,不需要放在ready函數中。
    });

    2.5 通過error接口處理失敗驗證

    wx.error(function(res){
    
        // config信息驗證失敗會執行error函數,如簽名過期導致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數中查看,對於SPA可以在這裏更新簽名。
    
    });

    分享接口

    獲取“分享到朋友圈”按鈕點擊狀態及自定義分享內容接口

    wx.onMenuShareTimeline({
        title: ‘‘, // 分享標題
        link: ‘‘, // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
        imgUrl: ‘‘, // 分享圖標
        success: function () {
        // 用戶確認分享後執行的回調函數
    },

    獲取“分享給朋友”按鈕點擊狀態及自定義分享內容接口

    wx.onMenuShareAppMessage({
        title: ‘‘, // 分享標題
        desc: ‘‘, // 分享描述
        link: ‘‘, // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
        imgUrl: ‘‘, // 分享圖標
        type: ‘‘, // 分享類型,music、video或link,不填默認為link
        dataUrl: ‘‘, // 如果type是music或video,則要提供數據鏈接,默認為空
        success: function () {
            // 用戶確認分享後執行的回調函數
        },
    });

    後端

    1. 獲取access_token接口調用憑據。 獲取access_token

      開發者需要全局緩存access_token

    2. 用第一步獲取access_token獲取(get)jsapi_ticket https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
      開發者需要全局緩存jsapi_ticket

      response json示例:

      {
      "errcode":0,
      "errmsg":"ok",
      "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
      "expires_in":7200
      }
    3. 獲取簽名

      簽名生成規則如下:參與簽名的字段包括noncestr(隨機字符串), 有效的jsapi_ticket, timestamp(時間戳), url(當前網頁的URL,不包含#及其後面部分) 。對所有待簽名參數按照字段名的ASCII 碼從小到大排序(字典序)後,使用URL鍵值對的格式(即key1=value1&key2=value2…)拼接成字符串string1。這裏需要註意的是所有參數名均為小寫字符。對string1作sha1加密,字段名和字段值都采用原始值,不進行URL 轉義。

      步驟1. 對所有待簽名參數按照字段名的ASCII 碼從小到大排序(字典序)後,使用URL鍵值對的格式(即key1=value1&key2=value2…)拼接成字符串

      步驟2. 對string1進行sha1簽名,得到signature:

    註意事項:

    1.簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。

    2.簽名用的url必須是調用JS接口頁面的完整URL。

    3.出於安全考慮,開發者必須在服務器端實現簽名的邏輯。

常見錯誤及解決方法

invalid url domain

當前頁面所在域名與使用的appid沒有綁定,請確認正確填寫綁定的域名,僅支持80(http)和443(https)兩個端口,因此不需要填寫端口號(一個appid可以綁定三個有效域名。)。

invalid signature(建議按順序驗證)

1.確認簽名算法正確,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign頁面工具進行校驗。

2.確認config中nonceStr(js中駝峰標準大寫S), timestamp與用以簽名中的對應noncestr, timestamp一致。

3.確認url是頁面完整的url(請在當前頁面alert(location.href.split(‘#‘)[0])確認),包括‘http(s)://‘部分,以及‘?‘後面的GET參數部分,但不包括‘#‘hash後面的部分。

4.確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。

5.確保一定緩存access_token和jsapi_ticket。

6.確保你獲取用來簽名的url是動態獲取的,動態頁面可參見實例代碼中php的實現方式。如果是html的靜態頁面在前端通過ajax將url傳到後臺簽名,前端需要用js獲取當前頁面除去‘#‘hash部分的鏈接(可用location.href.split(‘#‘)[0]獲取,而且需要encodeURIComponent),因為頁面一旦分享,微信客戶端會在你的鏈接末尾加入其它參數,如果不是動態獲取當前鏈接,將導致分享後的頁面簽名失敗。

代碼示例

後端(python)


import time
import random
import string
import hashlib


nonce_str = ‘‘.join(random.choice(string.ascii_letters + string.digits) for _ in range(15))

timestamp = int(time.time())

jsapi_ticket = ""  # 用access_token獲取
url = ""  # 當前請求頁面的url,url是動態獲取的

ret = {
    "nonceStr": nonce_str,
    "jsapi_ticket": jsapi_ticket,
    "timestamp": timestamp,
    "url": url
}

string_ = ‘&‘.join([%s=%s % (key.lower(), ret[key]) for key in sorted(ret)])

ret[‘signature‘] = hashlib.sha1(string).hexdigest()

return ret

前端

<!DOCTYPE html>
<html>
<head>
    <!--這個js必須引入-->
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>
<body>
<script type="text/javascript">
    wx.config({
        //debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
        appId: ‘‘, // 必填,公眾號的唯一標識
        timestamp: "", // 必填,生成簽名的時間戳
        nonceStr: ‘‘, // 必填,生成簽名的隨機串
        signature: ‘‘,// 必填,簽名,
        jsApiList: [‘onMenuShareTimeline‘,‘onMenuShareAppMessage‘,‘onMenuShareQQ‘,‘onMenuShareWeibo‘,‘onMenuShareQZone‘] // 必填,需要使用的JS接口列表
    });
    wx.ready(function(){
        wx.onMenuShareTimeline({//分享到朋友圈
            title: ‘‘, // 分享標題
            link: ‘‘, // 分享鏈接
            imgUrl: ‘‘ // 分享圖標
        });
        wx.onMenuShareAppMessage({//分享給朋友
            title: ‘‘, // 分享標題
            desc: ‘‘, // 分享描述
            link: ‘‘, // 分享鏈接
            imgUrl: ‘‘, // 分享圖標
            type: ‘‘, // 分享類型,music、video或link,不填默認為link
            dataUrl: ‘‘, // 如果type是music或video,則要提供數據鏈接,默認為空
            success: function () {
                // 用戶確認分享後執行的回調函數
            },
            cancel: function () {
                // 用戶取消分享後執行的回調函數
            }
        });
        // config信息驗證後會執行ready方法,所有接口調用都必須在config接口獲得結果之後,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口,則可以直接調用,不需要放在ready函數中。
    });

</script>
<div class="wrap">
    
</div>
</body>
</html>

微信二次分享