VUE專案微信分享

一、引入sdk

npm install --save-dev weixin-js-sdk

二、外部js wetchat.js

import { weixinGetSign } from '@/api/index'; //weixinGetSign 為後臺介面名

import wx from 'weixin-js-sdk'; // 引入wxJS

const wxApi = {

/**

* [wxRegister 微信Api初始化]

* @param {Function} callback [ready回撥函式]

*/

wxRegister(sys) {

let url = {

url: window.location.href

};

// var title = '';

if (sys == 'ios') {

url = window.entryUrl;

}

weixinGetSign(url).then(res => {

wx.config({

//在測試的時候一定要開啟這個 debug: true 只要有報錯就一定會彈出來，

debug: false, // 開啟除錯模式

appId: res.body.data.appId, // 必填，公眾號的唯一標識

timestamp: res.body.data.timestamp, // 必填，生成簽名的時間戳

nonceStr: res.body.data.noncestr, // 必填，生成簽名的隨機串

signature: res.body.data.signature, // 必填，簽名，見附錄1

ticket: res.body.data.ticket, // 獲取微信授權頁

url: res.body.data.url,

jsApiList: [

'checkJsApi', //必填，檢測api是否有許可權

//自定義“分享給朋友”及“分享到QQ”按鈕的分享內容

'onMenuShareTimeline',

'onMenuShareAppMessage',

'onMenuShareQQ',

'onMenuShareQZone',

'onMenuShareWeibo'

] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2

});

}),

wx.ready(() => {

//一定要保證分享的url和傳遞給後端url是一致的，如果路由發生了變化一定要獲取當前的路由

let links = window.location.href;

let shareTitle = sessionStorage.getItem('title');

let shareIcon = sessionStorage.getItem('icon');

let shareDesc = sessionStorage.getItem('desc');

let shareTitleSub = shareTitle.substring(1, shareTitle.length - 1); //去掉雙引號

let shareIconSub = shareIcon.substring(1, shareIcon.length - 1); //去掉雙引號

let shareDescSub = shareDesc.substring(1, shareDesc.length - 1); //去掉雙引號

注：因為後臺沒有返回相關資料，所以把資料存在了本地獲取

let optionApp = {

title: shareTitleSub, // 分享標題, 請自行替換

desc: shareDescSub,//分享內容

link: links //分享連結

imgUrl: shareIconSub // 分享圖示, 請自行替換，需要絕對路徑

};

let optionTimeline = {

title: shareTitleSub, // 分享標題, 請自行替換

link: links, // 分享連結，根據自身專案決定是否需要split

imgUrl: shareIconSub, // 分享圖示, 請自行替換，需要絕對路徑

desc: shareDescSub //分享內容

};

// 微信分享給朋友

wx.onMenuShareTimeline({

title: optionApp.title, // 分享標題

link: optionApp.link, // 分享連結

imgUrl: optionApp.imgUrl, // 分享圖示

desc: optionApp.desc, // 分享圖示

success() {},

cancel() {

// 使用者取消分享後執行的回撥函式

},

fail() {

// alert("分享失敗！"+JSON.stringify(s));

}

}),

// 微信分享到朋友圈

wx.onMenuShareAppMessage({

title: optionTimeline.title, // 分享標題

link: optionTimeline.link, // 分享連結

imgUrl: optionTimeline.imgUrl, // 分享圖示

desc: optionTimeline.desc, //分享內容

success() {

// 使用者成功分享後執行的回撥函式

},

cancel() {

// 使用者取消分享後執行的回撥函式

},

fail() {

// alert(JSON.stringify(msg));

}

});

// 微信分享給QQ

wx.onMenuShareQQ({

title: optionApp.title, // 分享標題

link: optionApp.link, // 分享連結

imgUrl: optionApp.imgUrl, // 分享圖示

desc: optionApp.desc, // 分享內容

success() {},

cancel() {

// 使用者取消分享後執行的回撥函式

},

fail() {

// alert("分享失敗！"+JSON.stringify(s));

}

}),

// 微信分享到QQ空間

wx.onMenuShareQZone({

title: optionTimeline.title, // 分享標題

link: optionTimeline.link, // 分享連結

imgUrl: optionTimeline.imgUrl, // 分享圖示

desc: optionTimeline.desc,//分享內容

success() {

// 使用者成功分享後執行的回撥函式

},

cancel() {

// 使用者取消分享後執行的回撥函式

},

fail() {

// alert(JSON.stringify(msg));

}

});

// 微信分享到微博

wx.onMenuShareWeibo({

title: optionTimeline.title, // 分享標題

link: optionTimeline.link, // 分享連結

imgUrl: optionTimeline.imgUrl, // 分享圖示

desc: optionTimeline.desc,//分享內容

success() {

// 使用者成功分享後執行的回撥函式

},

cancel() {

// 使用者取消分享後執行的回撥函式

},

fail() {

// alert(JSON.stringify(msg));

}

});

wx.error(function() {

// alert(JSON.stringify(e)+'--------error')

// config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。

});

}

};

export default wxApi;

三、頁面引用

1.在生命週期中呼叫

mounted() {

this.checkSign(); //使用者分享

}

2.在methods()方法中

checkSign() {

// window.__wxjs_is_wkwebview為true 時為 IOS 裝置 false時為安卓裝置

if (window.__wxjs_is_wkwebview) {

// IOS

if (window.entryUrl == '' || window.entryUrl == undefined) {

var url = location.href.split('#')[0];

window.entryUrl = url; // 將後面的引數去除

}

wxapi.wxRegister(location.href.split('#')[0], 'ios');

} else {

// 安卓

wxapi.wxRegister(location.href.split('#')[0], 'android');

}

},

VUE專案微信分享

相關文章