最近公司新加了个需求说我的H5分享在微信里太难看了（没图片 描述是链接，标题是网页默认title），而且和别人家的不一样。然后我去看了一下别人家的果然别人家的网页分享出来和手机app分享出来的一样（之前做ios开发，公司需要就学习了一下H5）。于是我就去找了微信官方文档。
一般的H5网页分享不能自定义标题 图片的原因。
在微信里不是所有的网页都可以按照微信友好的分享形式分享的，对于一般的网页来说（如非被微信屏蔽掉）是可以分享传播的，但仅限于分享转发（就是默认的没图片 默认标题 链接显示）
如果想要更好看，自定义标题 图片 描述，可以。必须要微信认证过，加到自己的白名单里就可以了 说白点就是要掏钱购买公众号，在公众号里绑定Js安全域名。
首先 我们需要一个公众号（
必须是经过认证的，没有认证的或者认证过期的都不可以），还要有备案过的域名（必须是备案过的，不然是无法使用的）
1 绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限
2 引入js文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
如果是和我一样是Vue的在 index.html 文件中的引入
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
3 通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用
(同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用）
也就是说如果你所分享的是多页面的并且都想让别人从H5 入口页面进入那么你只需要进入时配置一次信息就可以了，并不需要每个页面配置一次.
1 首先你需要从后台获取分享配置信息
你需要上传你要分享的的网页链接的 # 以前的
对当前页面链接以# 切割获取# 以前部分进行编码（后台需要相应的解码）
var localUrl = encodeURIComponent(location.href.split('#')[0])
然后传给后台获取配置信息。（因为签名是根据你当前的分享链接 和时间戳生成的），其实这样我们分享出去的链接是被微信加过签名参数的链接，和我们看的链接有点不一样了
httpGet('xforh5/service/sys/wechat/js/config?url=' + localUrl, {}).then(response => {
//在这里获取到配置信息 进行配置
}
获取回来的配置信息
{
"status": 0,
"result": {
"appId": "wx9e3d362372762cc1",
"timestamp": 1563269390,
"nonStr": "u1n8BylqEcBBlkZ7",
"signature": "72a46eac7b1505e51b148b0949f1f8e90e5ef9ab"
}
}
获取到配置信息后就已完成大半了，接下来就要用的引入的微信 JS Api
wx.config({
})
wx.config({
debug: false, //默认为false 为true的时候是调试模式，开启调试模式,调用的所有api的返回值会在客户端alert出
appId: appId,//必填，公众号的唯一标识
timestamp: timestamp,// 必填，生成签名的时间戳
nonceStr: nonStr,// 必填，生成签名的随机串
signature: signature,// 必填，签名
// 必填，需要使用的JS接口列表
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'updateAppMessageShareData',
'updateTimelineShareData',
],
});
需要的JS接口列表 根据公司分享需要选择接口
wx.ready(function () {
})
上面 config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.ready(function () {
wx.onMenuShareAppMessage(window.share_config.share); // 微信好友
wx.onMenuShareTimeline(window.share_config.share); // 微信朋友圈
wx.onMenuShareQQ(window.share_config.share); // QQ
wx.updateAppMessageShareData(window.share_config.share);
wx.updateTimelineShareData(window.share_config.share);
});
window.share_config.share 挂载的分享的配置信息
//配置自定义分享内容
window.share_config = {
share: {
title:自定义标题, // 这是分享展示卡片的标题
desc:自定义描述, // 这是分享展示的摘要
link:要分享的链接, // 这里是分享的网址
imgUrl:右下角显示图标, // 这里是需要展示的图标
success: function (rr) {
分享成功回调 可以在这儿加 alert 打印 便于调试
console.log('成功' + JSON.stringify(rr))
},
cancel: function (tt) {
分享失败回调 可以在这儿加 alert 打印 便于调试
console.log('失败' + JSON.stringify(tt));
}
}
};
wx.error(function (res) {
})
在error 函数中可获取的错误信息，尤其是配置信息的错误，因为需要先配置配置信息然后微信验证，验证通过后再调用 wx.ready() 里的分享配置信息（其实验证不通过也会走 应该是异步的）
所以在这里看错误信息很重要 可以加 alert 当然如果是调试模式它自己也会跳出alert 提示
注意
发生错误信息检查
1 公众号 appid是否绑对了
2 安全域名是否改了
3 就是取配置信息的时候是否取到并且上传对了（我就是以为对着api字段就没事儿，结果有个字段和后台传过来的不一致然后一直配置信息失败 提示 invalid signature）
最后附上完整分享函数 只需要在你获取到需要分享的必要信息在调用（记得修改里面的参数）
share() {
//对url 进行编码
var localUrl = encodeURIComponent(location.href.split('#')[0]);//
// //url传到后台的格式
// var url = 'URL=' + localUrl;
// //这几个参数都是后台从微信公众平台获取到的
// var nonceStr,signature,timestamp,appId,shareUrl;
//+ this.$route.query.viewid
let currentUrl = location.href
httpGet('xforh5/service/sys/wechat/js/config?url=' + localUrl, {}).then(response => {
const {appId, nonStr, signature, timestamp} = response.result
//通过微信config接口注入配置
wx.config({
debug: false, //默认为false 为true的时候是调试模式，会打印出日志
appId: appId,
timestamp: timestamp,
nonceStr: nonStr,
signature: signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'updateAppMessageShareData',
'updateTimelineShareData',
],
});
//配置自定义分享内容
window.share_config = {
share: {
title: `自定义标题`, // 这是分享展示卡片的标题
desc: `自定义描述`, // 这是分享展示的摘要
link: `要分享的链接`, // 这里是分享的网址
imgUrl: `右下角显示图标`, // 这里是需要展示的图标
success: function (rr) {
` 分享成功回调 可以在这儿加 alert 打印 便于调试`
console.log('成功' + JSON.stringify(rr))
},
cancel: function (tt) {
` 分享失败回调 可以在这儿加 alert 打印 便于调试`
console.log('失败' + JSON.stringify(tt));
}
}
};
// config
wx.ready(function () {
wx.onMenuShareAppMessage(window.share_config.share); // 微信好友
wx.onMenuShareTimeline(window.share_config.share); // 微信朋友圈
wx.onMenuShareQQ(window.share_config.share); // QQ
wx.updateAppMessageShareData(window.share_config.share);
wx.updateTimelineShareData(window.share_config.share);
});
wx.error(function (res) {
});
});
}
