本文介紹了Vue單頁式應用(Hash模式下)實現微信分享的實例，分享給大家，具體如下：

前端微信分享的基本步驟：

一.綁定域名：

先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“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函數中?！?br />

個人認為，這個可能是針對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接口列表，并以字符串的形式寫入。

//接口入住權限驗證配置wx.config({    debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。   appId: appId, // 必填，公眾號的唯一標識    timestamp: timestamp, // 必填，生成簽名的時間戳    nonceStr: nonceStr, // 必填，生成簽名的隨機串    signature: signature, // 必填，簽名，見附錄1    jsApiList: [     'onMenuShareTimeline',     'onMenuShareAppMessage'  ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2});