微信分享真的是神坑，前几天怎么弄都弄不好，今天重新试了下竟然没问题了，所以想记录下这一过程，需要注意的点，别人讲过的我就不会再详细讲了
坑1：加密的url不需要encodeURIComponent编码,我也不知微信官方为什么说要编码，我真的是日了哪条dog,而且必须动态获取：window.location.href.split('#')[0]！
坑2：提示invalid url domain,证明你没有在微信后台配置安全域名，具体配置路径（【设置】-【公众号设置】-【功能设置】-【JS接口安全域名】）把你的域名添加上去即可，不需要带协议，比如服务器域名是http://www.baidu.com?param=test,则只需要填写www.baidu.com
坑3：随机字符串字母错误，前端config中的实际字符串参数名为nonceStr，后端签名的随机字符串参数名为noncestr,前者s为大写，后者s为大写，求你别太粗心好不好
坑4：一直提示invalid signature,当初小弟我就是一直在这里，怎么调试都调试不对，可能就是因为我对签名的url进行编码了，真的日了哪条dog，出现这个应该是概率最大的，然而要不是你url的问题的话可以去看看时间戳/随机字符串前后端的是否一致，基本注意下动态获取url就好了
坑5：为什么在微信开发者工具中点击分享可以有效，在真机测试却一直无效呢？这里是因为跨域了，分享的内容中的参数link必须是全路径，而且域名跟端口号一定要跟你配置的JS接口安全域名一致，也就是说不能跨域，否则在真机上是无效的！
我是要的是nodejs框架Eggjs写的，所以有需要代码的老铁可以看后面，没需要的看完上面即可！
===================我是分隔线===================
===================前端代码===================
在需要分享的页面引入微信的js
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
var appid = getValeByUrlOrLocal('appid');
var HOST = "http://www.baidu.com";//这是您配置到微信公众号的JS安全域名
//获取微信分享配置
var configObj = {
debug: false,//是否开通调试
appId: 'wxfe974e4552b52cd6',//这是您的公众号appid
timestamp: null,
nonceStr: '',
signature: '',
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
};
function getShareConfig() {
$.post(`${HOST}/wxshare/getConfig`, { url: window.location.href.split('#')[0] }, function (res) {
var { result, msg, data } = res;
configObj.timestamp = data.timestamp;
configObj.nonceStr = data.noncestr;
configObj.signature = data.signature;
wx.config(configObj);
wx.ready(function () {
var shareParams = {
title: '话费大促销',
desc: '广东移动慢充话费大促销,名额有限,先到先得！',
link: `http://www.baidu.com/public/wx/index.html?appid=${appid}`,
imgUrl: 'http://www.baidu.com:8081/xl_cz/images/qhf.png',
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
};
wx.onMenuShareAppMessage(shareParams);//分享到朋友圈
wx.onMenuShareTimeline(shareParams);//分享给微信好友
});
}, "json")
}
getShareConfig();//调用函数
</script>
===================后端代码（需要在定时任务先获取access_token和jsapi_ticket）===================
//1.添加路由（在router.js文件）
router.post('/wxshare/getConfig', controller.wxshare.getConfig);//微信分享获取接口
//2.控制器（在controller->wxshare.js文件）
'use strict';
const Controller = require('egg').Controller;
class WxshareController extends Controller {
async getConfig() {
const ctx = this.ctx;
const {url} = ctx.request.body;
const res = await ctx.service.wxshare.getConfig(url);
ctx.set('Access-Control-Allow-Origin', '*');
ctx.body = res;
}
}
module.exports = WxshareController;
//3.添加服务（在service->wxshare.js文件）
const Service = require('egg').Service;
const systemCode = require('../lib/exportCode');
const MD5 = require('md5');
const _ = require('lodash');
var sha1 = require('sha1');
class WxshareService extends Service {
constructor(ctx) {
super(ctx);
this.config = this.ctx.app.config;
}
//获取微信分享配置
async getConfig(url) {
const ctx = this.ctx;
const jsapi_ticket = ctx.app.jsapi_ticket;
let resp = {};
try {
const signObj = await this.sign(jsapi_ticket, url);
resp = ctx.helper.reinstallSuccessRes(systemCode.HANDLE_SUCCESS, `获取分享配置成功`,signObj);
} catch (err) {
resp = ctx.helper.reinstallFailRes(systemCode.UNKNOWN_EXCEPTION, `获取分享配置失败[${err.message}]`);
}
return resp;
}
//签名函数
async sign(jsapi_ticket, url) {
const ctx = this.ctx;
var ret = {
jsapi_ticket,
noncestr: "Wm3WZYTPz0wzccnW",
timestamp: ctx.helper.getTimeStamp(),
url
};
var string = await this.raw(ret);
console.log(string)
ret.signature = sha1(string);
console.log(ret)
return ret;
}
//参数排序函数
async raw(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;
}
}
module.exports = WxshareService;
网友评论