本人自己写完全栈小项目，想在微信分享时带标题、描述和缩略图，没想到搞了3天，才搞定！所以写篇文章，记录浪费的时间，以此为戒，以后要多读书。。。
技术栈：vue 2.9.2， node v8.11.1， express 4.15.5
一、前期准备：
一定要看到微信的开发者文档，本人最后发现掉进去的坑，都是开发文档没看仔细。。
二、动手实践
1、后端代码
/getwe 这个接口是用来，接受微信服务器验证的；/getsignature是供前端调用的接口，可以获取签名等信息。
var express = require('express');
var crypto = require('crypto')
var router = express.Router();
var sha1 = require('sha1');
var wxShare = require('./wxShare')
var token = "403106220Asd"
/* GET home page. */
router.get('/getwe', function(req, res, next) {
console.log();
var signature = req.query.signature;
var timestamp = req.query.timestamp;
var nonce = req.query.nonce;
var echostr = req.query.echostr;
console.log(signature, timestamp, nonce, echostr);
/* 加密/校验流程如下： */
//1. 将token、timestamp、nonce三个参数进行字典序排序
var array = new Array(token,timestamp,nonce);
array.sort();
var str = array.toString().replace(/,/g,"");
//2. 将三个参数字符串拼接成一个字符串进行sha1加密
var sha1Code = crypto.createHash("sha1");
var code = sha1Code.update(str,'utf-8').digest("hex");
//3. 开发者获得加密后的字符串可与signature对比，标识该请求来源于微信
if(code===signature){
res.send(echostr)
}else{
res.send("error");
}
});
/**
* 分享
*/
router.post('/getsignature', function(req, res, next) {
let hrefURL = req.body.urlhref;
wxShare.prototype.accessToken(hrefURL, function(data) {
res.json(data);
});
});
module.exports = router;
wxShare：
var url = require('url');
var request = require('request');
var sha1 = require('sha1');
let config = {
appID: "",// 微信公众号ID
appSecret: "" //微信公众号里有
},
configEnd = {
appID: '',
access_token: '',
ticket: '',
timestamp: '', // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '', // 必填，签名，见附录1
};
/**
* 微信分享
*/
class wxShare {
/**
* 请求获取access_token 方法入口
* @param {* URL链接} hrefURL
* @param {* 回调请求方法} callback
*/
accessToken(hrefURL, callback) { // 获取access_token
let _this = this;
var tokenUrl = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + config.appID + '&secret=' + config.appSecret;
request(tokenUrl, function(error, response, body) {
if (response.statusCode && response.statusCode === 200) {
body = JSON.parse(body);
configEnd.access_token = body.access_token;
_this.upJsapiTicket(hrefURL, body.access_token, callback)
}
});
};
/**
* 获取Jsapi_Ticket
* @param {* URL链接} hrefURL
* @param {* token} access_Ttoken
* @param {* 回调请求方法} callback
*/
upJsapiTicket(hrefURL, access_Ttoken, callback) { // Jsapi_ticket
let _this = this;
var ticketUrl = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_Ttoken + '&type=jsapi';
request(ticketUrl, function(err, response, content) {
content = JSON.parse(content);
if (content.errcode == 0) {
configEnd.appID = config.appID;
configEnd.ticket = content.ticket; // ticket
configEnd.timestamp = _this.createTimestamp(); // 时间戳
configEnd.nonceStr = _this.createNonceStr(); // 随机数
configEnd.signature = _this.sign(hrefURL); // 签名
callback && callback(configEnd); // 回调前端JS方法
}
})
};
/**
* 随机字符串
*/
createNonceStr() {
return Math.random().toString(36).substr(2, 15);
};
/**
* 时间戳
*/
createTimestamp() {
return parseInt(new Date().getTime() / 1000).toString();
};
/**
* 拼接字符串
* @param {*} args
*/
rawString(args) {
var keys = Object.keys(args);
keys = keys.sort()
var newArgs = {};
keys.forEach(function(key) {
newArgs[key.toLowerCase()] = args[key];
});
var string = '';
for (var k in newArgs) {
string += '&' + k + '=' + newArgs[k];
}
string = string.substr(1);
return string;
};
/**
* 签名
* @param {*} url
*/
sign(url) {
let _this = this;
var ret = {
jsapi_ticket: configEnd.ticket,
nonceStr: configEnd.nonceStr,
timestamp: configEnd.timestamp,
url: url
};
var string = _this.rawString(ret);
var shaObjs = sha1(string);
return shaObjs;
};
}
module.exports = wxShare;
2、前端代码
在想要分享的页面的mounted写上调用，同时引入已经封装好的js。
这里有个小坑就是，当用npm i weixin-js-sdk 在2019年2月17日下载的是1.40 test版本，可能不是很稳定，在测试时候，wx.config总是显示错误信息error massage “config ok”，最后发现目前开发文档推荐的updateAppMessageShareData和updateTimelineShareData根本返回不了数据，所以用以前版本的接口函数，就通过了。
import wxshare from '@/utils/wxshare'
export default {
data() {
return {
// jsonurl: ''
}
},
// created() {
// // console.log('self.router', this.$route)
// this.jsonurl = this.$route.query
// },
mounted() {
wxshare.do(this.$route.query, '缩略图url', '想用的标题', '这是一段描述')
}
wxshare：
import axios from 'axios'
import wx from 'weixin-js-sdk'
const wxshare = {
do(queryId, icon = '', title = '', desc = '') {
const url = location.href.split('#')[0] // ruoter是hash模式的时候 获取锚点之前的链接
console.log('前端传输前的url地址', location.href)
console.log('前端传输前的url地址', url)
axios.post('https:/..../getsignature', { // 服务端获取配置jssdk 签名等 文件
urlhref: url
}).then(response => {
const res = response.data
console.log('调用微信js接口返回的签名：', res)
this.wxInit(res, queryId, icon, title, desc)
})
},
// 微信分享
wxInit(res, queryId, icon = '', title = '', desc = '') {
const url = location.href.split('#')[0] // 获取锚点之前的链接
// let links = url+'#/Food/' + this.$route.params.id; //用于签名的url 和 用于微信分享的url可以不同
// const links = url + '#/?jsonurl=' + queryId
const links = url
console.log('url link:', links)
wx.config({
debug: false,
appId: res.appID,
timestamp: res.timestamp,
nonceStr: res.nonceStr,
signature: res.signature,
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
})
wx.ready(function() {
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: icon, // 分享图标
success: function() {
// 设置成功
console.log('设置成功')
}
})
// 微信分享菜单测试
wx.onMenuShareTimeline({
title: title, // 分享标题
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: icon, // 分享图标
success: function() {
// 设置成功
console.log('设置成功')
}
})
})
wx.error(function(err) {
alert(JSON.stringify(err))
})
}
}
export default wxshare
PS：本人此次也是站在了巨人的肩膀上，所以避免了二次分享的坑、router是否是history的坑……如可以更优化代码地方，可以指正，共同进步！
文末奉上友情链接：
这位大神已经把vue前端如何设置写的明明白白 https://github.com/SevenChen/VueWxShare
后台部分借鉴了 https://blog.csdn.net/baidu_31333625/article/details/72673958
