微信分享可以让我们的网站在微信中分享链接，提高网站的露出率，这对于初创企业或新兴网站来说非常有用。可以使用NodeJS编写一个中间层，来实现生成微信签名以及管理分享的过程。
用户点击“分享到微信朋友圈”或“分享给微信好友”按钮时，微信客户端会请求我们网站的签名信息和分享页面的链接。我们的网站需要在请求到来时，返回一组签名信息和分享页面的链接，微信客户端则会使用这组信息进行微信分享。
以下为分享流程的详细说明：
用户在微信中点击分享链接，微信会向服务器请求签名信息和分享页面的链接。
服务器接收到请求，根据分享页面的链接和当前用户的查询生成签名信息。
服务器将签名信息和分享页面链接返回给微信客户端。
微信客户端使用签名信息和分享链接进行分享。
生成签名信息的过程中，需要使用到微信提供的API以及NodeJS中的crypto模块。
使用微信提供的https://api.weixin.qq.com/cgi-bin/token接口，获取AccessToken。AccessToken是微信用来验证我们身份的必要参数，需要使用申请的appId和appSecret。
示例代码：
/**
* 获取AccessToken
* @param {string} appId 应用ID
* @param {string} appSecret 应用Secret
* @returns {Promise<string>}
*/
async function getAccessToken(appId, appSecret) {
const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`;
const res = await axios.get(url);
const accessToken = res?.data?.access_token;
if (!accessToken) {
console.error('获取access_token失败');
return '';
}
return accessToken;
}
使用微信提供的https://api.weixin.qq.com/cgi-bin/ticket/getticket接口，获取api ticket。 ticket过期时间为7200秒，需要在使用前检查ticket是否过期，如果过期则重新获取。
示例代码：
/**
* 生成签名信息
* @param {string} url 分享链接
* @param {string} accessToken 微信AccessToken
* @returns {Object} WX api signature object
*/
async function makeWXSignature(url, accessToken) {
// 检查 ticket 是否过期
let ticket = config.WXTicket;
let expiredAt = config.WXTicketExpiredAt;
if (new Date().getTime() > expiredAt) {
const ticketUri = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${accessToken}&type=jsapi`;
const res = await axios.get(ticketUri);
if (res.data.errcode === 0) {
ticket = res.data.ticket;
expiredAt = new Date().getTime() + (res.data.expires_in - 300) * 1000; // 过期时间比实际过期时间少300秒，以防万一
config.WXTicket = ticket;
config.WXTicketExpiredAt = expiredAt;
} else {
console.error(`获取WX ticket失败: ${JSON.stringify(res.data)}`);
return null;
}
}
// 生成签名信息
const nonceStr = crypto.randomBytes(16).toString('hex');
const timestamp = parseInt(new Date().getTime() / 1000);
const wxParams = {
noncestr: nonceStr,
jsapi_ticket: ticket,
timestamp: timestamp,
url: url
};
const sortKeys = Object.keys(wxParams).sort();
const wxString = sortKeys.map(key => `${key}=${wxParams[key]}`).join('&');
const signature = crypto.createHash('sha1').update(wxString).digest('hex');
return {
appId: config.WXAppId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature
};
}
我们需要在网站的head标签中定义好微信分享所需要的元标签。以下为一个示例：
<meta property="og:title" content="这里是标题" />
<meta property="og:description" content="这里是简介" />
<meta property="og:image" content="这里是图片链接" />
<meta property="og:type" content="website" />
<meta property="og:url" content="这里是分享的地址" />
其中，og:title代表分享的标题，og:description代表分享的简介，og:image代表分享的缩略图，og:type代表分享的类型，可以是website、music等，og:url代表分享的链接地址。
点击“分享到微信朋友圈”或者“分享给微信好友”按钮后，需要调用客户端的分享接口。
/**
* 微信分享到朋友圈
* @param {string} title 分享的标题
* @param {string} link 分享的链接
* @param {string} imgUrl 分享的图片地址
* @returns {Promise<void>}
*/
async function shareTimeline(title, link, imgUrl) {
wx.onMenuShareTimeline({
title: title,
link: link,
imgUrl: imgUrl,
success: function () {
console.log('分享成功');
},
fail: function (err) {
console.error('分享失败', err);
}
});
}
/**
* 微信分享给好友
* @param {string} title 分享的标题
* @param {string} desc 分享的描述
* @param {string} link 分享的链接
* @param {string} imgUrl 分享的缩略图链接
*/
async function shareFriend(title, desc, link, imgUrl) {
wx.onMenuShareAppMessage({
title: title,
desc: desc,
link: link,
imgUrl: imgUrl,
success: function () {
console.log('分享成功');
},
fail: function (err) {
console.error('分享失败', err);
}
});
}
以上两个函数均需要在初始化微信JSSDK时调用。具体实现请参照微信JSSDK开发文档。
通过以上步骤，我们可以实现一个完整的微信分享功能。生成微信签名信息时，需要获取微信AccessToken以及API Ticket，分享流程中需要在网站head标签中定义分享的元标签，并且点击分享按钮时，需要在前端调用微信JSSDK提供的分享接口。
本文链接：http://task.lmcjl.com/news/7032.html