Vue單頁式應(yīng)用Hash模式下如何實(shí)現(xiàn)微信分享

這篇文章將為大家詳細(xì)講解有關(guān)Vue單頁式應(yīng)用Hash模式下如何實(shí)現(xiàn)微信分享，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、南芬網(wǎng)站維護(hù)、網(wǎng)站推廣。

具體如下：

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

一.綁定域名：

先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。這個(gè)不多說，微信開發(fā)的都應(yīng)該清楚。

二.引入js文件：

在需要調(diào)用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js。

請(qǐng)注意，如果你的頁面啟用了https，務(wù)必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否則將無法在iOS9.0以上系統(tǒng)中成功使用JSSDK。

這里我采用了https，而且我用Vue-cli生成的項(xiàng)目，因此我將文件直接在index.html中引入。

三.通過config接口注入權(quán)限驗(yàn)證配置：

在下面會(huì)有實(shí)例說明，這里我只想說，接口可以放在自己寫的AJAX回調(diào)用，將成功回調(diào)的值直接傳入到wx.config需要的參數(shù)中。

四.通過ready接口處理成功驗(yàn)證

文檔中說：“ config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中?！?/p>

個(gè)人認(rèn)為，這個(gè)可能是針對(duì)APP的，我的項(xiàng)目是微信的H5功能頁面，如果想分享的話只能從右上角的“三個(gè)點(diǎn)點(diǎn)”中直接分享。（這僅是小生的個(gè)人想法，還望有學(xué)識(shí)有智謀的您給出確切的答案）。

五.通過error接口處理失敗驗(yàn)證：這個(gè)我只是寫到了項(xiàng)目中，不多做說明。

其他的文檔中寫的很清楚，聰明的你可能不需要我更多的解釋。微信API給的還算詳細(xì)，很多地方直接調(diào)用就可以。只是對(duì)于初次使用的人來說，放到自己的環(huán)境中會(huì)有些許小坑很難發(fā)現(xiàn)，導(dǎo)致浪費(fèi)很多時(shí)間，但解決后發(fā)現(xiàn)并不難處理。以下是我開發(fā)時(shí)的部分筆記，如有不足還望各位觀眾老爺多多提點(diǎn)：

1.觸及某個(gè)頁面分享時(shí)，需要得到當(dāng)前該頁面的Url，用來傳給后臺(tái)。換取config中的參數(shù)。

2.頁面分享出去的窗口中對(duì)應(yīng)著一個(gè)接口，該接口中包含一個(gè)Url，這個(gè)Url是分享者希望分享出去的頁面鏈接。在這個(gè)Url中可以拼加自己需要的參數(shù)，實(shí)現(xiàn)分享的追蹤。

如：var shareUrl = 'https://show.mypro.com/#/product_details?userId=' + userId + '&level=' + level;這個(gè)shareUrl可以直接傳到街口的參數(shù)中。

3.分享頁面的JS中必須配置有config，在config中有一個(gè)jsApiList，在其中放置需要使用的JS接口列表，并以字符串的形式寫入。

//接口入住權(quán)限驗(yàn)證配置
wx.config({ 
   debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。

   appId: appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí) 
   timestamp: timestamp, // 必填，生成簽名的時(shí)間戳 
   nonceStr: nonceStr, // 必填，生成簽名的隨機(jī)串 
   signature: signature, // 必填，簽名，見附錄1 
   jsApiList: [
     'onMenuShareTimeline',
     'onMenuShareAppMessage'
  ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});

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

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

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

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

以上部分代碼放在Vue的mounted中，當(dāng)頁面組件生成的時(shí)候直接被調(diào)用。

5.坑點(diǎn)

個(gè)人認(rèn)為比較坑的點(diǎn)（1）：因?yàn)槲业捻?xiàng)目為單頁式應(yīng)用，并且采用了Vue中的hash模式，因此項(xiàng)目路徑中帶有#號(hào)的部分，微信可能會(huì)在其前面加一個(gè)？號(hào)（不知未來還會(huì)不會(huì)有變化）。這樣當(dāng)自己拼值時(shí)（如“？userId=123”）則需要取第二個(gè)問號(hào)后的值。之前無論如何都取不到自己拼在路徑后的值，復(fù)制鏈接后才發(fā)現(xiàn)，微信默默地給加了一個(gè)問號(hào)和其他參數(shù)在其中。

個(gè)人認(rèn)為比較坑的點(diǎn)（2）：我的項(xiàng)目中，如果在公眾號(hào)中瀏覽各個(gè)界面，直接都是通過路由進(jìn)行跳轉(zhuǎn)的。但當(dāng)瀏覽者從分享窗口進(jìn)入后，他從分享頁按著正常路由跳轉(zhuǎn)到其他頁面，其他頁面的邏輯中如果有需要獲取當(dāng)前頁面url的需要，會(huì)發(fā)現(xiàn)這個(gè)url和正常路由跳轉(zhuǎn)的不一樣。

 例如：

這是正常跳轉(zhuǎn)后的路徑：https://show.mypro.com/#/firPage?userId=1

這是從分享頁跳轉(zhuǎn)后的路徑：https://show.mypro.com/?#/firPage?userId=1

 非常明顯，如果根據(jù)問號(hào)的索引去獲取當(dāng)前Id，我永遠(yuǎn)獲取不到。不知是否和坑（1）中同一個(gè)原因，因此我獨(dú)立寫了出來。因?yàn)槭堑谝淮巫鲞@個(gè)地方的東西，而且只能在移動(dòng)端環(huán)境，我測(cè)了很多遍才發(fā)現(xiàn)。得知真相的我宛如醍（bei）醐（gou）灌（ri）頂（le）?？赡苁俏医?jīng)驗(yàn)太少，才如此踩坑。

6.后續(xù)坑點(diǎn)補(bǔ)充：

(1) 微信分享中：只要是分享出去的頁面，如果為hash模式（在路由中帶有#號(hào)），微信都會(huì)在#的前邊給加一個(gè)‘？'。雖然微信API中有說過關(guān)于#的問題。但是很容易單純的認(rèn)為，僅僅在需要分享的頁面的url會(huì)被修改，這也是我疏忽的一個(gè)地方。

    (2) 蘋果和iPhone打架后，我的微信功能頁也莫名其妙的受到了影響，雖然我的公眾號(hào)沒有涉及到打賞的功能。具體問題如下：

我的分享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后的值被截取掉了，頁面因?yàn)闊o法獲取值而無法顯示。url如下：

https://migxin.mypro.com/?from=timeline#/product_details

可以看到微信把我的#前給加了東西，并且截取掉了我？后邊拼接的值。這個(gè)問題依然存在，也希望有這方面經(jīng)驗(yàn)的大神可以留下您寶貴的建議或者解決辦法。

這對(duì)這個(gè)問題我目前用了個(gè)很牽強(qiáng)的處理辦法：把shareUrl換成一個(gè)ajax請(qǐng)求，打開時(shí)直接像后臺(tái)發(fā)請(qǐng)求，然后返回給我一個(gè)他那邊拼的頁面url我來進(jìn)行解析，這樣我就可以從這個(gè)url中解析值了。

7.有關(guān)微信公眾號(hào)的關(guān)注頁面：

目前我們不用自己去做公眾號(hào)的關(guān)注頁面，進(jìn)入公眾號(hào)，查看歷史消息，在該頁面會(huì)提供進(jìn)入公眾號(hào)的接口按鈕。在這個(gè)頁面中，按鈕的狀態(tài)為“進(jìn)入公眾號(hào)”，“關(guān)注”?？梢宰孕信袛喈?dāng)前用戶是否已經(jīng)關(guān)注公眾號(hào)。該頁面的鏈接也是直接可以復(fù)制得到的，對(duì)于迭代期比較緊張的情況 will do the trick~可以直接拿來使用。

關(guān)于“Vue單頁式應(yīng)用Hash模式下如何實(shí)現(xiàn)微信分享”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

名稱欄目：Vue單頁式應(yīng)用Hash模式下如何實(shí)現(xiàn)微信分享
文章分享：http://bm7419.com/article20/iihojo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站內(nèi)鏈、網(wǎng)頁設(shè)計(jì)公司、虛擬主機(jī)、做網(wǎng)站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)