vue實現微信分享朋友圈和朋友功能
溫馨提示：本文共3536個字，讀完預計9分鍾。
這兩天在開發一個雙十一的活動頁，前端用的是Vue，由於活動的性質需要傳播分享，所以在項目中也集成了微信JS-SDK自定義的功能，下面來說一下實現的思路和方法。
前提：要有公眾號，需要在其后台添加一個安全域名，安全域名用於微信的驗證，沒有這一步操作，下面的都白搭。一般還需要后端提供一個獲取appid，timestamp，簽名等信息的接口給你ajax請求用。如果你自己用nodejs啥的實現，那么也是棒棒的。
下面說一下具體的步驟：
1、通過npm 安裝 微信的js-sdk，當然你也可以在index.html頁面中直接加script標簽來引用，哪種方式都可以。命令如下：
1 |
npm install weixin-js-sdk --save-dev |
2、在Vue目錄下，比如：common文件夾，新建一個js文件，起名你隨意，我這邊叫wxapi.js，貼入下面代碼(PS: Axios根據實際情況來使用)：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
/**
* 微信js-sdk
* 參考文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
*/
import wx from 'weixin-js-sdk'
import Axios from 'axios'
const wxApi = {
/**
* [wxRegister 微信Api初始化]
* @param {Function} callback [ready回調函數]
*/
wxRegister (callback) {
// 這邊的接口請換成你們自己的
Axios.post('/api/wechat/shares', { reqUrl: window.location.href }, { timeout: 5000, withCredentials: true }).then((res) => {
let data = JSON.parse(res.data.data) // PS: 這里根據你接口的返回值來使用
wx.config({
debug: false, // 開啟調試模式
appId: data.appId, // 必填，公眾號的唯一標識
timestamp: data.timestamp, // 必填，生成簽名的時間戳
nonceStr: data.noncestr, // 必填，生成簽名的隨機串
signature: data.signature, // 必填，簽名，見附錄1
jsApiList: data.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
})
}).catch((error) => {
console.log(error)
})
wx.ready((res) => {
// 如果需要定制ready回調方法
if (callback) {
callback()
}
})
},
/**
* [ShareTimeline 微信分享到朋友圈]
* @param {[type]} option [分享信息]
* @param {[type]} success [成功回調]
* @param {[type]} error [失敗回調]
*/
ShareTimeline (option) {
wx.onMenuShareTimeline({
title: option.title, // 分享標題
link: option.link, // 分享鏈接
imgUrl: option.imgUrl, // 分享圖標
success () {
// 用戶成功分享后執行的回調函數
option.success()
},
cancel () {
// 用戶取消分享后執行的回調函數
option.error()
}
})
},
/**
* [ShareAppMessage 微信分享給朋友]
* @param {[type]} option [分享信息]
* @param {[type]} success [成功回調]
* @param {[type]} error [失敗回調]
*/
ShareAppMessage (option) {
wx.onMenuShareAppMessage({
title: option.title, // 分享標題
desc: option.desc, // 分享描述
link: option.link, // 分享鏈接
imgUrl: option.imgUrl, // 分享圖標
success () {
// 用戶成功分享后執行的回調函數
option.success()
},
cancel () {
// 用戶取消分享后執行的回調函數
option.error()
}
})
}
}
export default wxApi |
3、如何使用呢？
在Vue頁面，比如首頁，先引入剛剛的js文件：
1 |
import wxapi from '@/common/wxapi.js' |
在mounted()中加入調用的代碼：
1 |
wxapi.wxRegister(this.wxRegCallback) |
然后再methods中加入下面3個方法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
wxRegCallback () {
// 用於微信JS-SDK回調
this.wxShareTimeline()
this.wxShareAppMessage()
},
wxShareTimeline () {
// 微信自定義分享到朋友圈
let option = {
title: '限時團購周 挑戰最低價', // 分享標題, 請自行替換
link: window.location.href.split('#')[0], // 分享鏈接，根據自身項目決定是否需要split
imgUrl: 'logo.png', // 分享圖標, 請自行替換，需要絕對路徑
success: () => {
alert('分享成功')
},
error: () => {
alert('已取消分享')
}
}
// 將配置注入通用方法
wxapi.ShareTimeline(option)
},
wxShareAppMessage () {
// 微信自定義分享給朋友
let option = {
title: '限時團購周 挑戰最低價', // 分享標題, 請自行替換
desc: '限時團購周 挑戰最低價', // 分享描述, 請自行替換
link: window.location.href.split('#')[0], // 分享鏈接，根據自身項目決定是否需要split
imgUrl: 'logo.png', // 分享圖標, 請自行替換，需要絕對路徑
success: () => {
alert('分享成功')
},
error: () => {
alert('已取消分享')
}
}
// 將配置注入通用方法
wxapi.ShareAppMessage(option)
} |
以上幾步即實現了微信的分享功能，如果期間遇到問題，請自己開啟debug調試模式，並根據錯誤提示的內容去解決。一般如果后端接口沒問題的話，前端一般只會遇到：簽名驗證失敗或者URL的問題。😆
config:fail,Error: AppID 不合法
由於后端返回的是json, 我前台沒有將json轉為對象，所以導致一直報appID不合法。這個細心點就不會遇到了。
補充說明：jsApiList的值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
onMenuShareTimeline onMenuShareAppMessage onMenuShareQQ onMenuShareWeibo onMenuShareQZone startRecord stopRecord onVoiceRecordEnd playVoice pauseVoice stopVoice onVoicePlayEnd uploadVoice downloadVoice chooseImage previewImage uploadImage downloadImage translateVoice getNetworkType openLocation getLocation hideOptionMenu showOptionMenu hideMenuItems showMenuItems hideAllNonBaseMenuItem showAllNonBaseMenuItem closeWindow scanQRCode chooseWXPay openProductSpecificView addCard chooseCard openCard |
以上有些權限菜單可能會被廢棄，請自行查看微信官方文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
寫在最后
好了，本文到此結束！
如果還有什么疑問或者建議，歡迎多多交流，原創文章，文筆有限，文中若有不正之處，萬望告知。
如果覺得文章對你有幫助，打個賞，讓我有更大的動力去創作，謝謝！