前端微信分享的基本步驟：
一.綁定域名：
先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。這個不多說，微信開發的都應該清楚。
二.引入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。
這里我采用了https，而且我用Vue-cli生成的項目，因此我將文件直接在index.html中引入。
三.通過config接口注入權限驗證配置：
在下面會有實例說明，這里我只想說，接口可以放在自己寫的AJAX回調用，將成功回調的值直接傳入到wx.config需要的參數中。
四.通過ready接口處理成功驗證
文檔中說：“ config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。”
個人認為，這個可能是針對APP的，我的項目是微信的H5功能頁面，如果想分享的話只能從右上角的“三個點點”中直接分享。（這僅是小生的個人想法，還望有學識有智謀的您給出確切的答案）。
五.通過error接口處理失敗驗證：這個我只是寫到了項目中，不多做說明。
其他的文檔中寫的很清楚，聰明的你可能不需要我更多的解釋。微信API給的還算詳細，很多地方直接調用就可以。只是對於初次使用的人來說，放到自己的環境中會有些許小坑很難發現，導致浪費很多時間，但解決后發現並不難處理。以下是我開發時的部分筆記，如有不足還望各位觀眾老爺多多提點：
1.觸及某個頁面分享時，需要得到當前該頁面的Url，用來傳給后台。換取config中的參數。
2.頁面分享出去的窗口中對應着一個接口，該接口中包含一個Url，這個Url是分享者希望分享出去的頁面鏈接。在這個Url中可以拼加自己需要的參數，實現分享的追蹤。
如：var shareUrl = 'https://show.mypro.com/#/product_details?userId=' + userId + '&level=' + level;這個shareUrl可以直接傳到街口的參數中。
3.分享頁面的JS中必須配置有config，在config中有一個jsApiList，在其中放置需要使用的JS接口列表，並以字符串的形式寫入。
1 //接口入住權限驗證配置 2 wx.config({ 3 debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 4 5 appId: appId, // 必填，公眾號的唯一標識 6 timestamp: timestamp, // 必填，生成簽名的時間戳 7 nonceStr: nonceStr, // 必填，生成簽名的隨機串 8 signature: signature, // 必填，簽名，見附錄1 9 jsApiList: [ 10 'onMenuShareTimeline', 11 'onMenuShareAppMessage' 12 ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2 13 });
4.在config下方，有一個ready方法，該方法用來初始化我們要應用的js列表，而且任何方法一定要放在config方法后才可以。
如在Vue中，可以將該方法放在mounted中，並在其中放入‘分享給朋友’，‘分享至朋友圈’的js接口。
值得注意的是：兩個接口並不是寫在觸發事件的方法中(如@click='Fun')，而是直接在頁面初始化的時候，放在ready中直接被調用。
1 wx.ready(function() { 2 wx.onMenuShareAppMessage({ 3 title: shareTitle, // 分享標題 4 desc: 'This is a test!', // 分享描述 5 link: shareUrl, // 分享鏈接 6 imgUrl: imgUrl, // 分享圖標 7 type: '', // 分享類型,music、video或link，不填默認為link 8 dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空 9 success: function() { 10 // 用戶確認分享后執行的回調函數 11 }, 12 cancel: function() { 13 // 用戶取消分享后執行的回調函數 14 } 15 }); 16 wx.onMenuShareTimeline({ 17 title: shareTitle, // 分享標題 18 link: shareUrl, 19 imgUrl: imgUrl, // 分享圖標 20 success: function() { 21 // 用戶確認分享后執行的回調函數 22 }, 23 cancel: function() { 24 // 用戶取消分享后執行的回調函數 25 } 26 }); 27 });
以上部分代碼放在Vue的mounted中，當頁面組件生成的時候直接被調用。
5.坑點
個人認為比較坑的點（1）：因為我的項目為單頁式應用，並且采用了Vue中的hash模式，因此項目路徑中帶有#號的部分，微信可能會在其前面加一個？號（不知未來還會不會有變化）。這樣當自己拼值時（如“？userId=123”）則需要取第二個問號后的值。之前無論如何都取不到自己拼在路徑后的值，復制鏈接后才發現，微信默默地給加了一個問號和其他參數在其中。
個人認為比較坑的點（2）：我的項目中，如果在公眾號中瀏覽各個界面，直接都是通過路由進行跳轉的。但當瀏覽者從分享窗口進入后，他從分享頁按着正常路由跳轉到其他頁面，其他頁面的邏輯中如果有需要獲取當前頁面url的需要，會發現這個url和正常路由跳轉的不一樣。
例如：
這是正常跳轉后的路徑：https://show.mypro.com/#/firPage?userId=1
這是從分享頁跳轉后的路徑：https://show.mypro.com/?#/firPage?userId=1
非常明顯，如果根據問號的索引去獲取當前Id，我永遠獲取不到。不知是否和坑（1）中同一個原因，因此我獨立寫了出來。因為是第一次做這個地方的東西，而且只能在移動端環境，我測了很多遍才發現。得知真相的我宛如醍（bei）醐（gou）灌（ri）頂（le）。可能是我經驗太少，才如此踩坑。
6.后續坑點補充：
(1) 微信分享中：只要是分享出去的頁面，如果為hash模式（在路由中帶有#號），微信都會在#的前邊給加一個‘？’。雖然微信API中有說過關於#的問題。但是很容易單純的認為，僅僅在需要分享的頁面的url會被修改，這也是我疏忽的一個地方。
(2) 蘋果和iPhone打架后，我的微信功能頁也莫名其妙的受到了影響，雖然我的公眾號沒有涉及到打賞的功能。具體問題如下：
我的分享shareUrl為：
var shareUrl = 'https://migxin.mypro.com/#/product_details?custId=null&shareCustId=' + custId + '&shareProductId=' + productId;
通過安卓分享出去的頁面可以成功獲取頁面url后的值，並且成功顯示頁面。url如下：
https://migxin.mypro.com/#/product_details?custId=7&shareCustId=7&shareProductId=1223
但是在iphone中，頁面URl后的值被截取掉了，頁面因為無法獲取值而無法顯示。url如下：
https://migxin.mypro.com/?from=timeline#/product_details
可以看到微信把我的#前給加了東西，並且截取掉了我？后邊拼接的值。這個問題依然存在，也希望有這方面經驗的大神可以留下您寶貴的建議或者解決辦法。
這對這個問題我目前用了個很牽強的處理辦法：把shareUrl換成一個ajax請求，打開時直接像后台發請求，然后返回給我一個他那邊拼的頁面url我來進行解析，這樣我就可以從這個url中解析值了。
7.有關微信公眾號的關注頁面：
目前我們不用自己去做公眾號的關注頁面，進入公眾號，查看歷史消息，在該頁面會提供進入公眾號的接口按鈕。在這個頁面中，按鈕的狀態為“進入公眾號”，“關注”。可以自行判斷當前用戶是否已經關注公眾號。該頁面的鏈接也是直接可以復制得到的，對於迭代期比較緊張的情況 will do the trick~可以直接拿來使用。
這些都是小小的我在短短的時間內收獲的些許經驗，希望老司機可以多多提點，感激~
出自MINGXINICE的博客：http://www.cnblogs.com/mingxinice/p/mingxin.html