一、微信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.0.0.js

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

　　Android微信客?? ? ? 　　

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接口（測試的時候使用很不錯）

　　

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。

出于安全考慮，開發者必須在服務器端實現簽名的邏輯。

?

?

附錄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簽名錯誤。建議按如下順序檢查：

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

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

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

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

確保一定緩存access_token和jsapi_ticket。

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

the permission value is offline verifying這個錯誤是因為config沒有正確執行，或者是調用的JSAPI沒有傳入config的jsApiList參數中。建議按如下順序檢查：

確認config正確通過。

如果是在頁面加載好時就調用了JSAPI，則必須寫在wx.ready的回調中。

確認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 () { // 用戶取消分享后執行的回調函數 } });

?

?

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

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

轉載于:https://www.cnblogs.com/duanyue/p/7286612.html

總結

以上是生活随笔為你收集整理的微信分享相关的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。