这里使用到了request来请求微信接口，sign.js是微信提供的node签名算法，自己可以下载，通过微信接口请求以及node签名算法就可以获取到如下签名数据。
timestamp: , // 生成签名的时间戳
nonceStr: \'\', // 生成签名的随机串
signature: \'\',// 签名
第五步：编写接口返回config数据
上面wx.js已经获得数据， 接下来我们用node编写接口返回数据。注意下面的href，href是前端传回的用来生成签名的，而且这个网页地址的域名一定是在设置里加入白名单了的。
var express = require("express");
var app = express();
var getConfigData = require("./server/wx.js");
var port = "3000";
//获取微信配置数据接口
app.get("/wxconfigdata", function(req, res){ //获取配置
let href = req.query.href;//get获取前端传来的base64网页地址
getConfigData(href).then((data)=>{
res.send(JSON.stringify(data));
});
});
var server = http.createServer(app);
server.listen(port);
server.on("listening", onListening);
这样就启动了一个3000端口的服务
我们通过访问 ":3000/wxconfigdata" 就可以拿到数据，但这个数据是不正确的，因为locahost跟在设置里的白名单域名不匹配，所以在开发时我们要放到测试服务器里测试。
步骤六：前端请求获取签名数据
/*********************************************************************************
* @file: src/wxconfig.js 通过接口获取微信config数据
* @ahthor: leinov
* @usedate:2018-11-07
**********************************************************************************/
import { Base64 } from "js-base64";
const axios = require("axios");
/**
* 页面调用微信分享方法
*
* @param {Object} obj
分享的标题，描述，图片等
* @param {type} callback
* @return {type}
*/
function wxShare(obj,callback){
const href = Base64.encode(location.href);
//base64当前页面地址传给后端生成签名
axios.get(`${location.origin}/wxconfigdata?href=${href}`).then((res)=>{
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.appid, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.signature,// 必填，签名，见附录1
jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见文档
});
shareConfig(obj,callback);
}).catch((err)=>{
shareConfig({},callback);
});
}
function shareConfig(obj,callback){
wx.ready(function(){
//分享到朋友圈
wx.onMenuShareTimeline({
title: obj.timelinetitle ? obj.timelinetitle : obj.title , // 分享标题
link: obj.link, // 分享链接
imgUrl: obj.imgUrl ? obj.imgUrl :"" , // 分享图标
success: function () {
if (typeof callback === "function"){
callback();
}
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
// 分享给微信好友
wx.onMenuShareAppMessage({
title: obj.title, // 分享标题
desc: obj.desc, // 分享描述
link: obj.link, // 分享链接
imgUrl: obj.imgUrl ? obj.imgUrl:"",
success: function () {
if (typeof callback === "function"){
callback();
}
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
}
export default wxShare;
步骤七：页面使用
假设我们使用的是react 在react 打包入口js文件里调用配置即可
import wxShare from "../component/wxconfig.js";
wxShare({
title: "驾多多-小程序时代的驾校管理系统", // 分享标题
desc:"驾多多驾校管理系统。帮助驾校在互联网时代，零门槛使用小程序工具，提升招生量、提升服务能力、降低运营成本，是为驾校提供人、财、物及业务办理的综合管理系统。", // 分享描述
link: location.href, // 分享链接
imgUrl:"https://***/jiaddwxicon.png" , // 分享图标
});
在配置正确的情况下就可以实现配置分享标题描述和图片了，并且微信提供的可用接口都可以实现。
tips
在微信开发者工具中调试
appid和secret一定要正确
域名一定是备案的
绑定域名需要的放在服务器上的txt位置一定要正确
参考
微信公众号开发文档
