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

時間 2019-11-20

標籤關於微信二次分享描述連接解決方法文檔說明简体版

原文原文鏈接

聲明：php

本篇博文只是我的工做中的分享總結，僅表明我的觀點，雖然解決了很多網友的問題，但同時也引來了一些網友的不滿，因此特此聲明，當您遇到本博文解決不了的問題，能夠嘗試從新進行其餘搜索或者一塊兒交流，相信總歸能解決，而不是言語攻擊！該博文的解決方案畢竟不是萬金油，解決不了全部問題！html

前言：前端

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

1、微信JS-SDK說明文檔ajax

1.概述

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

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

此文檔面向網頁開發者介紹微信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對象)來調用，參數是一個對象，除了每一個接口自己須要傳的參數以外，還有如下通用參數：

success：接口調用成功時執行的回調函數。
fail：接口調用失敗時執行的回調函數。
complete：接口調用完成時執行的回調函數，不管成功或失敗都會執行。
cancel：用戶點擊取消時的回調函數，僅部分有用戶取消操做的api纔會用到。
trigger: 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支持Menu中的相關接口。

　　備註：不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，由於客戶端分享操做是一個同步操做，這時候使用ajax的回包會尚未返回。

　　以上幾個函數都帶有一個參數，類型爲對象，其中除了每一個接口自己返回的數據以外，還有一個通用屬性errMsg，其值格式以下：

調用成功時："xxx:ok" ，其中xxx爲調用的接口名
用戶取消時："xxx:cancel"，其中xxx爲調用的接口名
調用失敗時：其值爲具體錯誤信息

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 。

參考如下文檔獲取access_token（有效期7200秒，開發者必須在本身的服務全局緩存access_token）：獲取access token的方法
用第一步拿到的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

　　注意事項

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

　　如出現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出錯誤信息。如下爲常見錯誤及解決方法：

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