liubinwyzbt
liubinwyzbt

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

一、概述

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

二、参考资料

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

三、集成过程

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

  1. 获取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");
  1. 获取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");
  1. SHA1签名
String noncestr = WXUtil.getNonceStr();
//生成签名		 
SortedMap finalpackage = new TreeMap();	       	
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);
  1. 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，不填默认为link
  	    dataUrl: '', // 如果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可以在这里更新签名。
      });
  });

四、总结

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

你可能感兴趣的:(Web前端)