這篇文章主要講解了Vue如何實現(xiàn)微信公眾號網(wǎng)頁分享，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。
創(chuàng)新互聯(lián)建站長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為順昌企業(yè)提供專業(yè)的成都網(wǎng)站制作、做網(wǎng)站，順昌網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
前言
今天做了個分享功能，反正挺詭異的，下面就來說一說步驟
后端使用egg.js,代碼如下：
重慶分公司
重慶分公司
'use strict';
const Subscription = require('egg').Subscription;
class AccessToken extends Subscription {
static get schedule() {
return {
interval: '2h',//2小時獲取一次
type: 'all',
};
}
async subscribe() {
const config = this.ctx.app.config.wechat_config;
const url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET'.replace('APPID', config.appId)
.replace('APPSECRET', config.appSecret);
const res = await this.ctx.curl(url, {
dataType: 'json',
});
console.log(res);//accesstoken
if (res.data.errcode) {
return;
}
console.log('token ' + res.data.access_token);
const jsUrl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi'.replace('ACCESS_TOKEN', res.data.access_token);
const jsRes = await this.ctx.curl(jsUrl, {
dataType: 'json',
});
console.log('ticket ' + jsRes.data.ticket);//ticket
this.ctx.app.ticket = jsRes.data.ticket;
this.ctx.app.access_token = res.data.access_token;
}
}
module.exports = AccessToken;async getJSsdk() {
const appId = this.ctx.app.config.wechat_config.appId;//appid
const ticket = this.ctx.app.ticket;//初始化時獲得的ticket
const nonceStr = Math.random()
.toString(36)
.substr(2, 15);
const timestamp = parseInt(new Date().getTime() / 1000);//秒為單位的時間戳
let url = this.ctx.query.link; //前端的頁面地址
url = decodeURIComponent(url);//解碼
const string = 'jsapi_ticket=' + ticket + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + url;
const hash = crypto.createHash('sha1');
hash.update(string);
const signature = hash.digest('hex');//生成簽名
this.ctx.body = {
status: true,
message: '獲取成功',
data
};
};步驟
1.在vue項目中public目錄下的index.html中引入
2.在想分享的組件的mounted中加入如下代碼:
//如果不創(chuàng)建meta標(biāo)簽分享出去的就會沒有描述
var oMeta = document.createElement('meta');
oMeta.content = '隨意的內(nèi)容';//這里隨便寫
oMeta.name = 'keywords';
document.getElementsByTagName('head')[0].appendChild(oMeta);
var oMeta1 = document.createElement('meta');
oMeta1.content = '隨意的內(nèi)容';//這里隨便寫
oMeta1.name = 'description';
document.getElementsByTagName('head')[0].appendChild(oMeta1);3.initJSSDK方法體：
function initJSSDK() {
let wechaturl = window.location.href.split('#')[0];//單頁應(yīng)用就獲取#前面的東西
let link = encodeURIComponent(wechaturl);
const jssdk = await getJSSDK(link); //給后端接口傳過去當(dāng)前頁面的地址，注意這個地址要配置在js安全域名里
wx.ready(() => {
let shareData = {
title: this.detail.title,
desc: this.detail.summary,
link: location.href, //必須是js安全域名下的地址(分享出去的沒有圖片顯示請檢查這里的link參數(shù))
imgUrl: window.wechatImg,//隨意地址的圖片都行，最好是jpg的，經(jīng)測試無圖片大小約束
success: function () {
console.log(1);
},
cancel: function () {
console.log(2);
}
};
wx.onMenuShareAppMessage(shareData);//分享給好友
wx.onMenuShareQQ(shareData);//分享給手機(jī)QQ
wx.onMenuShareQZone(shareData);//分享到QQ空間
wx.onMenuShareTimeline(shareData);//分享到朋友圈
});
wx.error(function (res) {
console.log(res);
});
wx.config({
debug: true,
appId: jssdk.appId, // 必填，公眾號的唯一標(biāo)識
timestamp: jssdk.timestamp, // 必填，生成簽名的時間戳，精確到秒(后端返回)
nonceStr: jssdk.nonceStr, // 必填，生成簽名的隨機(jī)串(后端返回)
signature: jssdk.signature, // 必填，簽名(后端返回)
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone']
});
}常見問題
無效的簽名:可能是前端encode地址過去后，后端忘記解碼了，也有可能是因為前端地址傳錯了或者沒有encode就傳過去了，后端簽名算法出錯的機(jī)率比較小.
還有可能是后端的ticket失效了(這個在開發(fā)過程中機(jī)率比較小)
無效的domain：前端給后端傳的地址可能沒有配置在js安全域名中
jssdk版本就用上面的1.4版本，同樣的代碼用了新版的就直接不行了，也沒有任何報錯。
暫時沒有發(fā)現(xiàn)網(wǎng)上所說的蘋果會出現(xiàn)問題。經(jīng)測試都是好的
看完上述內(nèi)容，是不是對Vue如何實現(xiàn)微信公眾號網(wǎng)頁分享有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
