Vue單頁式應用Hash模式下如何實現微信分享

這篇文章將為大家詳細講解有關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函數中。”

個人認為，這個可能是針對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
});

4.在config下方，有一個ready方法，該方法用來初始化我們要應用的js列表，而且任何方法一定要放在config方法后才可以。

如在Vue中，可以將該方法放在mounted中，并在其中放入‘分享給朋友'，‘分享至朋友圈'的js接口。

值得注意的是：兩個接口并不是寫在觸發事件的方法中(如@click='Fun')，而是直接在頁面初始化的時候，放在ready中直接被調用。

wx.ready(function() {
  wx.onMenuShareAppMessage({
    title: shareTitle, // 分享標題
    desc: 'This is a test!', // 分享描述
    link: shareUrl, // 分享鏈接
    imgUrl: imgUrl, // 分享圖標
    type: '', // 分享類型,music、video或link，不填默認為link
    dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空
    success: function() {
      // 用戶確認分享后執行的回調函數
    },
    cancel: function() {
      // 用戶取消分享后執行的回調函數
    }
  });
  wx.onMenuShareTimeline({
    title: shareTitle, // 分享標題
    link: shareUrl,
    imgUrl: imgUrl, // 分享圖標
    success: function() {
      // 用戶確認分享后執行的回調函數
    },
    cancel: function() {
      // 用戶取消分享后執行的回調函數
    }
  });
});

以上部分代碼放在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~可以直接拿來使用。

關于“Vue單頁式應用Hash模式下如何實現微信分享”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。