vue實現微信分享
效果圖
前提： 公衆號相關配置
後臺返回配置參數格式參考
根據自身情況吧，如有返回直接使用，不用一一賦值。這裏後臺把所有數據放在
data裏面
使用
- 安裝 npm i weixin-js-sdk -S
- 在需要組件上引入： import wx from 'weixin-js-sdk’
- 以下相關代碼塊
<script>
import wx from 'weixin-js-sdk'
export default {
mounted() {
//測試
this.shareWx();
},
methods: {
shareWx() {
// alert(encodeURI(location.href.split('#')[0]));
//處理url
let params = {
url: decodeURIComponent(location.href.split('#')[0])
}
//發送請求
this.axios.getShareSdk(params).then((response) =>{
console.log("123", response);
// wx.config(response.data); //如後臺配置好相關的參數， 可以直接使用
//配置參數
wx.config({
debug: false, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
appId: response.appId, // 必填，公衆號的唯一標識
timestamp: response.timestamp, // 必填，生成簽名的時間戳
nonceStr: response.nonceStr, // 必填，生成簽名的隨機串
signature: response.signature,// 必填，簽名，見附錄1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
/**
* 通過ready接口處理成功驗證
* config信息驗證成功後會執行ready方法
* 需在用戶可能點擊分享按鈕前就先調用
*/
wx.ready(function() { //
let tel = getStore('account'); //從本地獲取
let imgs = 'https://common.cnblogs.com/images/wechat.png',
links = '域名訪問地址/?#/share?invite='+ tel; // 分享鏈接
let shareData = {
title: '努力學習',
desc: '好的東西我都想與你一起分享~',//這裏請特別注意是要去除html
link: links,
imgUrl: imgs,
};
//兼容新老版本接口， 如不需要處理邏輯情況下， 調試好可以直接使用
if(wx.onMenuShareAppMessage){ //微信文檔中提到這兩個接口即將棄用，故判斷
wx.onMenuShareAppMessage(shareData);//1.0 分享到朋友
wx.onMenuShareTimeline(shareData);//1.0分享到朋友圈
}else{
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
}
//調試，需單獨處理回調使用
// wx.updateAppMessageShareData({ // 分享給朋友 ,在config裏面填寫需要使用的JS接口列表，然後這個方法纔可以用
// title: '這裏是標題1', // 分享標題
// desc: 'This is a test!', // 分享描述
// link: '域名訪問地址/#/share?invite='+ tel, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
// imgUrl: '', // 分享圖標
// success() {
// // 用戶確認分享後執行的回調函數
// alert("分享給朋友成功1");
// },
// cancel() {
// // 用戶取消分享後執行的回調函數
// alert("分享給朋友取消1");
// },
// fail(res) {
// // alert(JSON.stringify(res));
// }
// });
// wx.updateTimelineShareData({ //分享朋友圈
// shareData, //直接調用配置好的參數
// success() {
// // 用戶確認分享後執行的回調函數
// alert("成功2");
// },
// cancel() {
// // 用戶取消分享後執行的回調函數
// alert("取消2");
// },
// fail(res) {
// // alert(JSON.stringify(res));
// }
// });
});
wx.error(res =>{//通過error接口處理失敗驗證
// config信息驗證失敗會執行error函數
console.log(res);
});
})
}
}
}
</script>
遇到問題
Q： 安卓設備中微信會自動截取 #號 後面的內容， 導致無法分享
A： 在 #號前面加 ？號
links = '域名訪問地址/?#/share?invite='+ tel; // 分享鏈接
常見錯誤及解決方法
- 以下是常見問題一部分，點擊查看更多
