注意：微信自定义分享需要在配置号的域名下测试，本地测试传入的url会导致signature计算错误。
开发步骤 添加微信js-sdk 依赖
在js引入需要用到的js
//vue引入微信sdk
**import** wx **from 'weixin-js-sdk'**;
//vue引入支持axios 进行ajax请求
**import** axios **from 'axios'**;
**var** appid;
**var** timestamp;
**var** nonceStr;
**var** signature;
**var** url;
**var** introduce;
**var** venueName;
**var** pictureUrl;
mounted() {
*//获取微信配置参数
share*();
**function** *share*() {
**var** url = **location**.**href**.replace(/#/g, **"%23"**);
**var** _this = **this**;
//调用后台接口返回signature等相关数据，传入的url应该是#之前的url
//比如http://www.baidu.com/#/AAAAAA
//url应该是http://www.baidu.com/而不是加上#之后的全部值
//本项目因为业务需要将#转码了
axios.get(**'/api/wechat/jsapi/signature?redirectURI='** + url).then(**function** (v) {
**if** (v.**code** == 200) {
**console**.log(v.**result**);
**var** result = v.**result**;
**var** params = result.wxJsapiSignature;
appid = params.**appId**;
timestamp = params.**timestamp**;
nonceStr = params.**nonceStr**;
signature = params.**signature**;
url = params.**url**;
//业务相关数据 可以省略
**if** (result.artVenueTpl) {
**var** artVenueTpl = result.artVenueTpl;
venueName = artVenueTpl.**name**;
pictureUrl = artVenueTpl.pictureUrl;
introduce = artVenueTpl.**introduce**;
}
*initWXShare*();
}
});
}
**function** *initWXShare*() {
wx.config({
//设置debug为ture可以在访问时打印信息
**debug**: **false**,
**appId**: appid, *// 和获取Ticke的必须一样------必填，公众号的唯一标识
***timestamp**: timestamp, *// 必填，生成签名的时间戳
***nonceStr**: nonceStr, *// 必填，生成签名的随机串
***signature**: signature,*// 必填，签名，见附录1
//需要分享的列表项:发送给朋友，分享到朋友圈，分享到QQ，分享到QQ空间
***jsApiList**: [
**'onMenuShareAppMessage'**, **'onMenuShareTimeline'**,
**'onMenuShareQQ'**, **'onMenuShareQZone'
**]
});
*//处理验证失败的信息
*wx.error(**function** (res) {
logUtil.printLog(**'验证失败返回的信息:'**, res);
});
}
*//处理验证成功的信息
*wx.ready(**function** () {
*// alert(window.location.href.split('#')[0]);
//分享到朋友圈
*wx.onMenuShareTimeline({
**title**: venueName, *// 分享标题
***desc**: introduce, *// 分享描述
***link**: url, *// 分享链接
***imgUrl**: pictureUrl, *// 分享图标
*trigger: **function** (res) {
*// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
*},
fail: **function** (res) {
alert(***JSON***.stringify(res));
}
});
*//分享给朋友
*wx.onMenuShareAppMessage({
**title**: venueName, *// 分享标题
***desc**: introduce, *// 分享描述
***link**: url, *// 分享链接
***imgUrl**: pictureUrl, *// 分享图标
*trigger: **function** (res) {
*// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
*},
fail: **function** (res) {
alert(***JSON***.stringify(res));
}
});
*//分享到QQ
*wx.onMenuShareQQ({
**title**: venueName, *// 分享标题
***desc**: introduce, *// 分享描述
***link**: url, *// 分享链接
***imgUrl**: pictureUrl, *// 分享图标
*trigger: **function** (res) {
*// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
*},
fail: **function** (res) {
alert(***JSON***.stringify(res));
}
});
*//分享到QQ空间
*wx.onMenuShareQZone({
**title**: venueName, *// 分享标题
***desc**: introduce, *// 分享描述
***link**: url, *// 分享链接
***imgUrl**: pictureUrl, *// 分享图标
*trigger: **function** (res) {
*// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
*},
fail: **function** (res) {
*// mui.toast(JSON.stringify(res));
*}
});
});
},
},
主要错误，有一下两个：
1.config:invalid signature
这个错误主要是传入url不正确导致的
解决办法 看代码中注释 请求signature的
2.** config:invalid url domain**
image.png
是因为微信公众号js安全域名没有配置或配置错误，需要将用到的主域名入 如>baidu.com
配置在微信公众平台，详见如下图
image.png
域名配置出现下面错误
image.png
需要将Mp文件下载到本地上传到域名直接访问的根目录下，然后就能配置成功。
网友评论