微信自定义分享链接

微信自定义分享链接

微信现在是众多公司营销的重点。

遍布朋友圈和消息群组里的html5各位可能也是天天见了，不过自从微信更新了官方api后，对整个微信内的页面管控都严格了不少。而官方的分享卡片，是众多在微信生态中传播的html5静态页面的一个重点。不过很多人会发现分享的图片和摘要达不到预期。这篇文章就讲下这个，供初次接触微信开发的前端参考。（其实官方的文档也蛮详细的了，不过有些地方官方没忽略了，容易给新人造成坑）这段话来自这里

你需要准备好的

PS：本文的方法只适合6.0.2.58以及更高版本的微信客户端。早期微信是可以通过WeixinJSBridge这个对象实现的，不过新版本必须是通过jssdk才能进行配置。旧版参考这个非官方的API

只说新版，不管新旧版本。下面这几个是超越代码之上的存在，没有这几个认证，即使配置全正确也不能获得正常的自定义分享内容

1.微信认证过的公众号

必须是经过认证的，没有认证的或者认证过期的都不可以微信公众平台

2.经过备案的域名

必须是备案过的，不然是无法使用的

3.后台服务器

前台页面需要后台服务器传过来一些配置参数，比如appId、timestamp、nonceStr、signature这几个参数都是后台从微信公众平台获取到的，

需要后台进行配合，所以一台服务器是必不可少的

完事具备，只欠开发

配置过程

1.绑定域名

首先你需要将需要分享的网址的域名绑定到微信公众平台上面，具体操作：先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

2.获取access_token

利用公共号APPID、APPSECRET从微信服务器获取对应的access_token，这里是后台开发小伙伴的范围不多做解释，微信官方都有现成的damo，不过要注意的是官方的后台代码没有缓存access_token，很容易触发每日的2k次API调用上限，一旦到了上限，当天就无法继续认证

所以后台需要存一下

3.前端验证配置

下面才是属于前端小伙伴的工作范围，官网上的后台是不能直接通过ajax直接获取到需要的参数，可以让后台小伙伴改一下，我这里就是通过ajax直接调用的后台的接口，不然你需要吧文件名的后缀更改为.php或者.jsp。

3.1 引入js文件

在分享的页面需要引入一个微信官方的js文件,支持https（这里有个坑，如果你的页面是https的话就需要引入https路径的js，要不然会很精彩）

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

3.2 通过ajax获取参数

前台通过ajax调后台小伙伴写的接口，把需要配置的参数获取到，你需要得到着四个参数：appId、timestamp、nonceStr、signature

这里有个坑，你需要把当前分享的页面的url传到后台去，必须动态的获取当前页面，而且一定要对url进行编码，要不然会不起作用

var localUrl = encodeURIComponent(location.href.split('#')[0]);
var url = "wechatShare?url=" + localUrl;
var nonceStr,signature,timestamp,appId,shareUrl;
$.ajax({
url: ip() + url,
beforeSend: function (xhr) {
xhr.setRequestHeader("Token", getCookie("token"));
},
type: 'GET',
data: '',
dataType: "json",
contentType: 'application/json',
success: function (result) {
appId = result.data.appid;
nonceStr = result.data.nonceStr;
signature = result.data.signature;
timestamp = result.data.timestamp;
shareUrl = result.data.url;   // 这个url就是分享的地址，就是传到后台的地址
},
error: function (err) {
errorCallback(err);
},
});

3.3 通过微信config接口注入配置

wx.config({
debug: false,   // 默认为false  为true的时候是调试模式，会打印出日志
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
]
});

3.4 配置自定义分享内容

window.share_config = {
'share': {
'imgUrl': 'https://www.jing-cloud.com/images/logo_share.png',  // 这里是需要展示的图标
'desc': '采用比特币钱包加密技术，密码存放在你自己的设备中，我们不存储密码',  // 这是分享展示的摘要
'title' : '钥匙盒子-您随身的密码库',   // 这是分享展示卡片的标题
'link': shareUrl,   // 这里是分享的网址
'success':function(rr){
console.log('成功' + JSON.stringify(rr))
},
'cancel': function (tt) {
console.log('失败' + JSON.stringify(tt));
}
}
};
wx.ready(function () {
wx.onMenuShareAppMessage(share_config.share);  // 微信好友
wx.onMenuShareTimeline(share_config.share);    // 微信朋友圈
wx.onMenuShareQQ(share_config.share);          // QQ
});

最后附上微信jssdk开发文档