關於微信二次分享,描述變鏈接的解決方法(一)----文檔說明


聲明:

本篇博文只是個人工作中的分享總結,僅代表個人觀點,雖然解決了不少網友的問題,但同時也引來了一些網友的不滿,所以特此聲明,當您遇到本博文解決不了的問題,可以嘗試重新進行其他搜索或者一起交流,相信總歸能解決,而不是言語攻擊!該博文的解決方案畢竟不是萬金油,解決不了所有問題!

前言:

最近工作中遇到了使用微信二次分享的時候,標題被截短,描述也變成了鏈接,圖片也沒有,運營人員半夜還在嚷嚷,無奈只好硬着頭皮去百度,去google,但是悲催的是沒有詳細的解決方法,最終只能自己去研究,還好最終搞出來了,決定分享一下,幫助需要的人。博文,分兩篇,第一篇主要是微信的官方文檔說明第二篇主要是代碼部分

 

一、微信JS-SDK說明文檔

1.概述

微信JS-SDK是微信公眾平台面向網頁開發者提供的基於微信內的網頁開發工具包。

通過使用微信JS-SDK,網頁開發者可借助微信高效地使用拍照、選圖、語音、位置等手機系統的能力,同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,為微信用戶提供更優質的網頁體驗。

此文檔面向網頁開發者介紹微信JS-SDK如何使用及相關注意事項

2.JSSDK使用步驟

  2.1步驟一:綁定域名

  先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”,可以按照提示進行填寫,最多填寫三個。

  備注:登錄后可在“開發者中心”查看對應的接口權限,只有獲取了權限才能保證后面的工作繼續進行。

 

 

     2.2 步驟二:引入JS文件

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

  備注:支持使用 AMD/CMD 標准模塊加載方法加載

  2.3 步驟三:通過config接口注入權限驗證配置

  所有需要使用JS-SDK的頁面必須先注入配置信息,否則將無法調用(同一個url僅需調用一次,對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客      戶端不支持pushState的H5新特性,所以使用pushState來實現web app的頁面會導致簽名失敗,此問題會在Android6.2中修復)。

  

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可以在這里更新簽名。

});

  

3.接口調用說明

  所有接口通過wx對象(也可使用jWeixin對象)來調用,參數是一個對象,除了每個接口本身需要傳的參數之外,還有以下通用參數:

  1. success:接口調用成功時執行的回調函數。
  2. fail:接口調用失敗時執行的回調函數。
  3. complete:接口調用完成時執行的回調函數,無論成功或失敗都會執行。
  4. cancel:用戶點擊取消時的回調函數,僅部分有用戶取消操作的api才會用到。
  5. trigger: 監聽Menu中的按鈕點擊時觸發的方法,該方法僅支持Menu中的相關接口。

  備注:不要嘗試在trigger中使用ajax異步請求修改本次分享的內容,因為客戶端分享操作是一個同步操作,這時候使用ajax的回包會還沒有返回


  以上幾個函數都帶有一個參數,類型為對象,其中除了每個接口本身返回的數據之外,還有一個通用屬性errMsg,其值格式如下:

  1. 調用成功時:"xxx:ok" ,其中xxx為調用的接口名
  2. 用戶取消時:"xxx:cancel",其中xxx為調用的接口名
  3. 調用失敗時:其值為具體錯誤信息

4.基礎接口(只列出了使用到的接口)

  4.1判斷當前客戶端版本是否支持指定JS接口(測試的時候使用很不錯)

  備注:checkJsApi接口是客戶端6.0.2新引入的一個預留接口,第一期開放的接口均可不使用checkJsApi來檢測。

wx.checkJsApi({
    jsApiList: ['chooseImage'], // 需要檢測的JS接口列表,所有JS接口列表見附錄2,
    success: function(res) {
        // 以鍵值對的形式返回,可用的api值true,不可用為false
        // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

5.分享接口

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

wx.onMenuShareTimeline({
    title: '', // 分享標題
    link: '', // 分享鏈接
    imgUrl: '', // 分享圖標
    success: function () { 
        // 用戶確認分享后執行的回調函數
    },
    cancel: function () { 
        // 用戶取消分享后執行的回調函數
    }
});

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

wx.onMenuShareAppMessage({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享鏈接
    imgUrl: '', // 分享圖標
    type: '', // 分享類型,music、video或link,不填默認為link
    dataUrl: '', // 如果type是music或video,則要提供數據鏈接,默認為空
    success: function () { 
        // 用戶確認分享后執行的回調函數
    },
    cancel: function () { 
        // 用戶取消分享后執行的回調函數
    }
});

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

wx.onMenuShareQQ({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享鏈接
    imgUrl: '', // 分享圖標
    success: function () { 
       // 用戶確認分享后執行的回調函數
    },
    cancel: function () { 
       // 用戶取消分享后執行的回調函數
    }
});

  5.4 獲取“分享到騰訊微博”按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareWeibo({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享鏈接
    imgUrl: '', // 分享圖標
    success: function () { 
       // 用戶確認分享后執行的回調函數
    },
    cancel: function () { 
        // 用戶取消分享后執行的回調函數
    }
});

  5.5 獲取“分享到QQ空間”按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareQZone({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享鏈接
    imgUrl: '', // 分享圖標
    success: function () { 
       // 用戶確認分享后執行的回調函數
    },
    cancel: function () { 
        // 用戶取消分享后執行的回調函數
    }
});

 

附錄1-JS-SDK使用權限簽名算法

  首先獲取jsapi_ticket

  生成簽名之前必須先了解一下jsapi_ticket,jsapi_ticket是公眾號用於調用微信JS接口的臨時票據。正常情況下,jsapi_ticket的有效期為7200秒

  通過access_token來獲取。由於獲取jsapi_ticket的api調用次數非常有限,頻繁刷新jsapi_ticket會導致api調用受限,影響自身業務,

  開發者必須在自己的服務全局緩存jsapi_ticket 。

  1. 參考以下文檔獲取access_token(有效期7200秒,開發者必須在自己的服務全局緩存access_token):獲取access token的方法

  2. 用第一步拿到的access_token 采用http GET方式請求獲得jsapi_ticket(有效期7200秒,開發者必須在自己的服務全局緩存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

  成功返回如下JSON:

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}

  獲得jsapi_ticket之后,就可以生成JS-SDK權限驗證的簽名了。

  其次獲取簽名,簽名的算法如下:

 

  簽名生成規則如下:參與簽名的字段包括noncestr(隨機字符串), 有效的jsapi_ticket, timestamp(時間戳), url(當前網頁的URL,不包含#及其后面部分) 。

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

  這里需要注意的是所有參數名均為小寫字符。對string1作sha1加密,字段名和字段值都采用原始值,不進行URL 轉義。

   即signature=sha1(string1)。 示例:

    noncestr=Wm3WZYTPz0wzccnW

    jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg

    timestamp=1414587457

    url=http://mp.weixin.qq.com?params=value

 

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

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

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

0f9de62fce790f9a083d5c99e95740ceb90c27ed

  注意事項

  1. 簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
  2. 簽名用的url必須是調用JS接口頁面的完整URL。
  3. 出於安全考慮,開發者必須在服務器端實現簽名的邏輯

  如出現invalid signature 等錯誤詳見附錄5常見錯誤及解決辦法,開啟debug,如簽名無效會彈出invalid signature的提示

 

 

附錄2-所有JS接口列表

版本1.0.0接口

onMenuShareTimeline
onMenuShareAppMessage
onMenuShareQQ
onMenuShareWeibo
onMenuShareQZone
startRecord
stopRecord
onVoiceRecordEnd
playVoice
pauseVoice
stopVoice
onVoicePlayEnd
uploadVoice
downloadVoice
chooseImage
previewImage
uploadImage
downloadImage
translateVoice
getNetworkType
openLocation
getLocation
hideOptionMenu
showOptionMenu
hideMenuItems
showMenuItems
hideAllNonBaseMenuItem
showAllNonBaseMenuItem
closeWindow
scanQRCode
chooseWXPay
openProductSpecificView
addCard
chooseCard
openCard

 

附錄5-常見錯誤及解決方法

  

調用config 接口的時候傳入參數 debug: true 可以開啟debug模式,頁面會alert出錯誤信息。以下為常見錯誤及解決方法:

  1. invalid url domain當前頁面所在域名與使用的appid沒有綁定,請確認正確填寫綁定的域名,如果使用了端口號,則配置的綁定域名也要加上端口號(一個appid可以綁定三個有效域名)
  2. 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),因為頁面一旦分享,微信客戶端會在你的鏈接末尾加入其它參數,如果不是動態獲取當前鏈接,將導致分享后的頁面簽名失敗
  3. the permission value is offline verifying這個錯誤是因為config沒有正確執行,或者是調用的JSAPI沒有傳入config的jsApiList參數中。建議按如下順序檢查:
    1. 確認config正確通過。
    2. 如果是在頁面加載好時就調用了JSAPI,則必須寫在wx.ready的回調中。
    3. 確認config的jsApiList參數包含了這個JSAPI。
  4. permission denied該公眾號沒有權限使用這個JSAPI,或者是調用的JSAPI沒有傳入config的jsApiList參數中(部分接口需要認證之后才能使用)。
  5. function not exist當前客戶端版本不支持該接口,請升級到新版體驗。
  6. 為什么6.0.1版本config:ok,但是6.0.2版本之后不ok(因為6.0.2版本之前沒有做權限驗證,所以config都是ok,但這並不意味着你config中的簽名是OK的,請在6.0.2檢驗是否生成正確的簽名以保證config在高版本中也ok。)
  7. 在iOS和Android都無法分享(請確認公眾號已經認證,只有認證的公眾號才具有分享相關接口權限,如果確實已經認證,則要檢查監聽接口是否在wx.ready回調函數中觸發)
  8. 服務上線之后無法獲取jsapi_ticket,自己測試時沒問題。(因為access_token和jsapi_ticket必須要在自己的服務器緩存,否則上線后會觸發頻率限制。請確保一定對token和ticket做緩存以減少2次服務器請求,不僅可以避免觸發頻率限制,還加快你們自己的服務速度。目前為了方便測試提供了1w的獲取量,超過閥值后,服務將不再可用,請確保在服務上線前一定全局緩存access_token和jsapi_ticket,兩者有效期均為7200秒,否則一旦上線觸發頻率限制,服務將不再可用)。
  9. uploadImage怎么傳多圖(目前只支持一次上傳一張,多張圖片需等前一張圖片上傳之后再調用該接口)
  10. 沒法對本地選擇的圖片進行預覽(chooseImage接口本身就支持預覽,不需要額外支持)
  11. 通過a鏈接(例如先通過微信授權登錄)跳轉到b鏈接,invalid signature簽名失敗(后台生成簽名的鏈接為使用jssdk的當前鏈接,也就是跳轉后的b鏈接,請不要用微信登錄的授權鏈接進行簽名計算,后台簽名的url一定是使用jssdk的當前頁面的完整url除去'#'部分)
  12. 出現config:fail錯誤(這是由於傳入的config參數不全導致,請確保傳入正確的appId、timestamp、nonceStr、signature和需要使用的jsApiList)
  13. 如何把jsapi上傳到微信的多媒體資源下載到自己的服務器(請參見文檔中uploadVoice和uploadImage接口的備注說明)
  14. Android通過jssdk上傳到微信服務器,第三方再從微信下載到自己的服務器,會出現雜音(微信團隊已經修復此問題,目前后台已優化上線)
  15. 綁定父級域名,是否其子域名也是可用的(是的,合法的子域名在綁定父域名之后是完全支持的)
  16. 在iOS微信6.1版本中,分享的圖片外鏈不顯示,只能顯示公眾號頁面內鏈的圖片或者微信服務器的圖片,已在6.2中修復
  17. 是否需要對低版本自己做兼容(jssdk都是兼容低版本的,不需要第三方自己額外做更多工作,但有的接口是6.0.2新引入的,只有新版才可調用)
  18. 該公眾號支付簽名無效,無法發起該筆交易(請確保你使用的jweixin.js是官方線上版本,不僅可以減少用戶流量,還有可能對某些bug進行修復,拷貝到第三方服務器中使用,官方將不對其出現的任何問題提供保障,具體支付簽名算法可參考 JSSDK微信支付一欄
  19. 目前Android微信客戶端不支持pushState的H5新特性,所以使用pushState來實現web app的頁面會導致簽名失敗,此問題已在Android6.2中修復
  20. uploadImage在chooseImage的回調中有時候Android會不執行,Android6.2會解決此問題,若需支持低版本可以把調用uploadImage放在setTimeout中延遲100ms解決
  21. require subscribe錯誤說明你沒有訂閱該測試號,該錯誤僅測試號會出現
  22. getLocation返回的坐標在openLocation有偏差,因為getLocation返回的是gps坐標,openLocation打開的騰訊地圖為火星坐標,需要第三方自己做轉換,6.2版本開始已經支持直接獲取火星坐標
  23. 查看公眾號(未添加): "menuItem:addContact"不顯示,目前僅有從公眾號傳播出去的鏈接才能顯示,來源必須是公眾號
  24. ICP備案數據同步有一天延遲,所以請在第二日綁定

 

其他:

1.最好把微信的js以及對應的配置放在前面

2.關於圖片不能正確獲取的問題:

一般情況下,只要配置沒問題,基本上就可以的,但是有時候,配置文件的圖片明明給到了,但是那張分享圖片仍不是我們想要的效果,而是可能直接抓取了body里面的第一張圖片,所以

處理方法就是:在body里面最前面加入一張不影響頁面的圖片:

<div style=" overflow:hidden; width:0px; height:0; margin:0 auto; position:absolute; top:-800px;"><img src="http://pic4.nipic.com/20090907/1628220_101501018346_2.jpg"></div>

 

3.關於標題及描述獲取不正確的問題:

雖然配置里面title,desc,都是完整的,但分享出去的結果還是錯誤的,所以最好在html的head里面也加上title,及描述

 

<title>微信二次分享</title>
<meta name="keywords" content="微信二次分享" />
<meta name="description" content="獲取微信二次分享描述" />

 4.分享小技巧:

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

wx.onMenuShareTimeline({
    title: '', // 分享標題
    link: '', // 分享鏈接
    imgUrl: '', // 分享圖標
    success: function () { 
        // 用戶確認分享后執行的回調函數
    },
    cancel: function () { 
        // 用戶取消分享后執行的回調函數
    }
});

 

由於分享到朋友圈,是沒有分享描述的,右邊的文字取的是title的值,所以為了右邊的文字能夠更好地展示我們需要傳達的信息,我們可以把title的值換成描述的值

 

5.建議使用微信web開發者工具進行調試,由於集成了Chrome DevTools,所以調試起來更加方便

http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html

 6.確保公眾號已獲取基礎權限以及分享權限

 官網文檔《微信JS-SDK說明文檔

由於博文不能保持和官網最新同步,所以可能會有出入

#JS-SDK

https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.9227353854310705#buzhou2

以上就是文檔部分,下篇將把代碼部分放出來,僅供參考,不喜勿噴。下篇地址:關於微信二次分享,描述變鏈接的解決方法(二)----代碼部分


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM