微信二次分享
Q: 使用微信二次分享的時候,標題被截短,描述也變成了鏈接,圖片也沒有
solution
文檔說明
微信JS-SDK說明文檔
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 () { // 用戶確認分享後執行的回調函數 }, });
後端
獲取access_token接口調用憑據。 獲取access_token
開發者需要全局緩存access_token
用第一步獲取access_token獲取(get)jsapi_ticket https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
開發者需要全局緩存jsapi_ticketresponse json示例:
{ "errcode":0, "errmsg":"ok", "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA", "expires_in":7200 }
獲取簽名
簽名生成規則如下:參與簽名的字段包括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>
微信二次分享