微信H5页面自定义微信分享内容

一、概述

默认在微信中打开的网页，微信分享后，标题只显示公众号名称，描述为网页URL，当我们想要微信分享后的标题、内容、图表、链接都是自定义内容，则需要集成微信JS-SDK的分享接口，在分享所在的页面注入JS-SDK权限验证，监听拦截分享接口，设置自定义分享的标题、内容、图标和链接。

二、参考资料

微信JS-SDK说明文档官方资料：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
JAVA方式分享整体集成：https://blog.csdn.net/zhengyangzkr/article/details/70187486

三、集成过程

1）在微信公众号后台绑定分享URL所在的域名
2）引入微信js-sdk js文件
3）config接口注入权限验证配置，config注入权限时，需要访问微信接口获取临时临牌和SHA1加密串，验证临牌通过后执行ready接口

获取access_token

StringBuffer buffer = new StringBuffer();
buffer.append("https://api.weixin.qq.com/cgi-bin/token?");
buffer.append("appid="+map.get("appid"));
buffer.append("&secret="+map.get("secret"));
buffer.append("&grant_type=client_credential");
String resultMsg = SendUtils.sendGet(buffer.toString(), "UTF-8");

获取ticket

StringBuffer buffer = new StringBuffer();
buffer.append("https://api.weixin.qq.com/cgi-bin/ticket/getticket?");
buffer.append("access_token="+access_token);
buffer.append("&type=jsapi");
String ticket = SendUtils.sendGet(buffer.toString(), "UTF-8");

SHA1签名

String noncestr = WXUtil.getNonceStr();
//生成签名
SortedMap<Object,Object> finalpackage = new TreeMap<Object,Object>();
finalpackage.put("timestamp", Long.toString(new Date().getTime()/1000));
finalpackage.put("noncestr",noncestr);
finalpackage.put("jsapi_ticket",ticket);
finalpackage.put("url",url);//url地址StringBuffer sb = new StringBuffer();
Set es = finalpackage.entrySet();
Iterator it = es.iterator();
while (it.hasNext()) {Map.Entry entry = (Map.Entry) it.next();String k = (String) entry.getKey();Object v = entry.getValue();sb.append(k + "=" + v + "&");
}
String signStr = sb.toString().substring(0,sb.toString().length() - 1);
String sign = Sha1Util.getSha1Sign(signStr);// 签名
finalpackage.put("signature", sign);
finalpackage.put("appId", pubAccessKeyId);

SHA1签名返回timestamp、noncestr、signature

4）ready接口处理成功验证
5）自定义“分享给朋友”等接口的分享内容

var timestamp = data.timestamp;
var nonceStr = data.nonceStr;
var signature = data.signature;
wx.config({debug: true,appId: wxAppId,timestamp: timestamp,nonceStr:  nonceStr,signature: signature,jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','hideMenuItems']});wx.ready(function () {wx.hideMenuItems({menuList: ['menuItem:share:qq', // 分享道QQ'menuItem:share:weiboApp',//分享给微博'menuItem:share:QZone' // 分享到QQ空间],success: function (res) {},fail: function (res) {alert(JSON.stringify(res));}});// 2. 分享接口// 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果wx.onMenuShareAppMessage({title: shareTitle, // 分享标题desc: shareDesc, // 分享描述link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: shareImgUrl, // 分享图标type: '', // 分享类型,music、video或link，不填默认为linkdataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空trigger: function (res) {// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返噿
//                        alert('用户点击发送给朋友');},success: function () { // 用户确认分享后执行的回调函数alert('分享成功');},cancel: function () { // 用户取消分享后执行的回调函数alert('已取消');}});// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果wx.onMenuShareTimeline({title: shareTitle, // 分享标题link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: shareImgUrl, // 分享图标trigger: function (res) {// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返噿
//                        alert('用户点击分享到朋友圈');},success: function (res) {alert('分享成功');},cancel: function (res) {alert('已取消');},});// alert('已注册获取“分享到朋友圈”状态事乿');wx.error(function (res) {alert(res);// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});});

四、总结

注意：获取ticket时的timestamp需和js中wx.config的timestamp一致。
sha1签名时，签名参数需 ASCII 码从小到大排序2、sha1签名时，签名参数需 ASCII 码从小到大排序
引入最新的jweixin-1.4.0.js文件时，需使用最新的自定义分享接口，wx.onMenuShareTimeline、wx.onMenuShareAppMessage接口即将废弃，不需要使用引入最新的jweixin-1.4.0.js文件时，需使用最新的自定义分享接口，wx.onMenuShareTimeline、wx.onMenuShareAppMessage接口即将废弃，不需要使用
使用jweixin-1.4.0.js分享接口时，微信App客户端的版本需升级至6.7.3及以上使用jweixin-1.4.0.js分享接口时，微信App客户端的版本需升级至6.7.3及以上
调用config 接口的时候传入参数 debug: true 可以开启debug模式，进入界面后会alert errMsg属性值，调用成功时：“xxx:ok” ，其中xxx为调用的接口名，调用失败时：其值为具体错误信息。部署至生产环境时，需将debug:false调用config 接口的时候传入参数 debug: true 可以开启debug模式，进入界面后会alert errMsg属性值，调用成功时：“xxx:ok” ，其中xxx为调用的接口名，调用失败时：其值为具体错误信息。部署至生产环境时，需将debug:false
如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent）如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent）
因为token和tictet的每日获取次数有限制，同时请求接口需要时间，为了页面更好的注入config成功，需要在后台将access_token、ticke存储至缓存中，access_token、ticke的时效性为7200秒因为token和tictet的每日获取次数有限制，同时请求接口需要时间，为了页面更好的注入config成功，需要在后台将access_token、ticke存储至缓存中，access_token、ticke的时效性为7200秒

五、其他

1、微信 JS 接口签名校验工具
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

微信H5页面自定义微信分享内容相关推荐

微信 H5页面自定义分享link不起作用
微信 H5页面自定义分享link不起作用最近在做这么一个功能: H5页面在微信内打开并通过设置微信自定义分享来分享出指定的标题.图片.link 但是却遇到了问题,分享指定的link没起作用,正常通过 ...
h5在微信自定义分享php,h5页面自定义微信分享
官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 开发准备:公众号绑定好需要开发的服务器域名. ...
微信h5页面之微信授权、获取头像等
//js代码获取点击事件 var popupBox = document.querySelector('.popupBox') var showPopup = document.querySelect ...
h5页面生成图片分享到微信js_微信端h5页面如何调用分享页面的接口
这次给大家带来微信端h5页面如何调用分享页面的接口,微信端h5页面调用分享页面接口的注意事项有哪些,下面就是实战案例,一起来看一下. 最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加 ...
[html] H5页面在微信中如何禁止分享给好友和朋友圈？
[html] H5页面在微信中如何禁止分享给好友和朋友圈? 利用JSBridge实现调用微信提供的一些原生功能,可以通过调用隐藏操作菜单来实现禁用分享. 代码如下: document.addEvent ...
html(h5)页面实现微信js分享
html(h5)页面实现微信js分享注:并非所有代码原创服务端实现签名等因为引用了第三方dll,所以需先添加nuget包,这个包直接在nuget管理器中搜索不到,在pm控制台输入如下内容:也 I ...
H5页面实现微信分享功能及踩坑历程
看了官网,写的也挺简单的,也在网上搜索了一些demo,然后开始写: 我理解的误区: 我一直以为可以跟app分享一样,有个分享按钮点击触发分享:搜索了很多博客,得到结论,前几年好像是可以通过按钮引导分享 ...
微信H5页面隐藏点击右上角的分享功能
微信H5页面隐藏点击右上角的分享功能注:H5页面右上角的三个点是微信自带的,所以不能去掉,只是可以隐藏点击后的分享功能右上角分享功能的显示与隐藏 <script>// 隐藏docume ...
【经验分享】微信H5页面制作_页面制作教程
现在,H5页面在微信中很受欢迎,邀请函就是其中一种,它有着传播快.影响范围广等特点,看起来虽然很高端复杂,很多企业或个人都不知道如何制作,但是其实非常简单,借汇桔宝平台就能轻松搞定. 它具有海量的场景 ...
vue在微信里面的兼容问题_微信H5页面兼容性问题分析及解决方法
随着H5页面越来越流行,越来越多的开发者都开始用最近H5做微信公众号,在这个过程中自然也会遇到不少的问题.小编在这里整理了五种常见的微信H5页面兼容性问题,来和大家分析一下问题的详情.出现原因以及相对 ...