前端實現微信平臺實現分享

隨着微信的升級，關於微信的一些jssdk接口需經過簽名以後纔可使用，今天主要與你們講解一下前端如何調用jssdk接口，以及如何來簽名實現的。以及還有一些接口配置。

首先與你們講解一下微信js-sdk的的一些基本介紹：

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

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

本次主要講解的內容：如何自定義分享到朋友圈，朋友，屏蔽分享到qq，qq空間等功能。

JSSDK使用步驟：

一：綁定域名

首先登陸微信公衆平臺，進入"公衆號"裏的功能設置，填寫"js接口安全域名"。主意：1.要查看本身的公衆號是否有您須要的相對就的開發權限

2.js接口安全域名，就是你項目發佈的地方，還有必定要把.txt文件放到你前端項目的根目錄。若是在配置過程當中不清楚能夠聯繫我，cyh_nini

圖1

圖2

2、引入JS文件

在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

請注意，若是你的頁面啓用了https，務必引入https://res.wx.qq.com/open/js/jweixin-1.0.0.js，不然將沒法在iOS9.0以上系統中成功使用JSSDK

圖3

3、經過config接口注入權限驗證配置

微信源碼配置介紹以下：

wx.config({

debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。

appId: '', // 必填，公衆號的惟一標識

timestamp: , // 必填，生成簽名的時間戳

nonceStr: '', // 必填，生成簽名的隨機串

signature: '',// 必填，簽名，見附錄1

jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2

});

4、經過ready接口處理成功或失敗驗證

wx.ready(function(){

// config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。

});

wx.error(function(res){

// config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。

});

圖4

前端代碼就完了，但當大家寫上這些代碼的時候，你會發現一直報錯：

errMsg:config: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），由於頁面一旦分享，微信客戶端會在你的連接末尾加入其它參數，若是不是動態獲取當前連接，將致使分享後的頁面簽名失敗。

但是我都是按步驟來的，簽名工具也驗證簽名沒問題，這6個都確認經過了，但一直不知道錯在哪裏。

最後才知道，原來是經過url去獲取簽名，就是由於url沒有encode，由於js-sdk接口去驗證的你簽名是否正確時，它是把url進行encode了，真是坑呀，搞了一天才發現是這麼這緣由。不說了，直接上代碼：

圖5

這段代碼是經過把動態生成的url傳給後臺，讓後臺去生成處理相應的簽名算法。

重點提醒：

Token請求天天也是有上限的，天天請求最多2000次，超過了次數將沒法在此請求，一旦超出，能夠在公衆號管理後臺-開發-接口權限-獲取access_token的操做哪裏重置，不過每月只有10此機會

有一個網頁調試工具，來查看token的，地址：

https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token