reactJs/js微信分享教程簡單實用版

準備工做：

1. 前兩天作了一個微信分享朋友圈和分享好友功能，遇到了挺多坑，總結一下，但願能幫到第一次開發微信端的小夥伴，廢話很少說，開始正題 準備條件：

• 具有本身的公衆號，一個身份證能夠申請一個（必須是認證過的！）
• 設置ip白名單，後臺服務的ip，（獲取數據的服務器IP）
• 設置js安全域名接口，這個域名必須是備案過的
• 須要在對應的ip的根目錄下上傳一個MP_verify_ajl2qnil5aOtrFuu.txt文件來受權

2. 在線接口調試工具 幫助開發者檢測調用微信公衆平臺開發者API時發送的請求參數是否正確，提交信息後可得到服務器驗證結果。 https://mp.weixin.qq.com/debug
   （用appid和secret生成token,appid和secret能夠在基本信息裏面查到）

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

開發步驟：

1. • 綁定域名 先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。說明：設置此安全域名目的是爲了當發現此公衆平臺發現誘導分享行爲時，能夠根據此域名追溯到全部分享出去的連接，以及經過這些連接增長的粉絲。

二、- 引入js文件 在須要調用JS接口的頁面引入以下JS文件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

三、- 經過config接口注入權限驗證配置 在微信公衆平臺JSSDK說明文檔是這樣解釋的

wx.config({
debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
appId: '', // 必填，公衆號的惟一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
});

四、經過ready接口處理成功驗證

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

五、經過error接口處理失敗驗證

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

分享接口： 一、獲取「分享到朋友圈」按鈕點擊狀態及自定義分享內容接口

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

二、獲取「分享給朋友」按鈕點擊狀態及自定義分享內容接口

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

注意：

1. 必定要在公衆號進行安全域名的配置，這樣，微信就能夠緊緊控制你的微信平臺了，一旦發現違規，讓分享連接失敗，刪除掉誘導行爲增長的粉絲，是瞬間就能夠完成的。所以，微信平臺的開發者，必定要合理來使用分享功能，不要因小失大。等到你的微信平臺被封，估計庫都來不及了。

2.由於微信的權限限制是不能直接在本地調試的，這開發起來就至關不方便了，解決方案有兩種：

• 1.下載花生殼，用內網穿透，會生成一個域名，鏈接本地服務，可是這個也是有條件的， 由於微信加安全域名的時候不能加入對應的端口號，只能使用默認端口8080，若是辦公室的ip沒有備案過，是不能使用8080端口的（能夠找運維的小夥伴協助）

• 2.配置一套服務器操做軟件，在服務器上面直接修改代碼，是即刻生效的， 有人說我是前端工程師，不會服務器那套東東，這就須要平時和後端工程師處好關係了！