我先描述一下该h5的业务场景：想实现微信中的h5页面分享给好友或者是朋友圈时有自定义的标题，描述，分享图片；而不是...如下图
前提条件：
1、请确认公众号已经认证，只有认证的公众号才具有分享相关接口权限
2、登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。(需要调用微信接口的h5域名)
3、配置IP白名单，基本配置-公众号开发信息-IP白名单。(调用后台接口的域名)
h5实现具体步骤如下：（只有前端部分，别问为啥，因为后端我不会···泪目）
1.页面引入JS-SDK文件 <script src="https://res./open/js/jweixin-1.6.0.js"></script>
2.调用后端接口，获取微信api需要的参数
3.拿到后端返回的参数去配置微信api
下面是源代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><title class="webTitle">微信h5分享</title> <link rel="stylesheet" href="css/index.css"/><script type="text/javascript" src="js/flexible.debug.js"></script><script type="text/javascript" src="js/jquery-1.12.1.min.js"></script><script src="https://res./open/js/jweixin-1.6.0.js"></script></head><body><div class="container"><div class="newsContent"><div class="title"></div><div class="newsDate"></div><div class="newsText"></div></div></div><script>$(document).ready(function () {var ua = navigator.userAgent.toLowerCase();var isWx = falseif (ua.match(/MicroMessenger/i)) { //判断是否在微信打开isWx = true;} else {isWx = false;}getAppUserInfo();if (isWx) {var winUrl = window.location.href.split("&")[0];var link = '...'// 后端接口地址if(winUrl !== window.location.href){window.location.href = winUrl}var des = '';var title = '';var id = GetUrlParam('id')var img = '...' // 微信分享图片$.ajax({type: "GET",url: link + "/activityTwo/cover"+'?id='+id,crossDomain: true,dataType: "json",contentType: "application/json; charset=utf-8",success: function (res) {wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: res.params.appId, // 必填，公众号的唯一标识timestamp: res.params.timestamp, // 必填，生成签名的时间戳nonceStr: res.params.noncestr, // 必填，生成签名的随机串signature: res.params.signature, // 必填，签名，见附录1jsApiList: ['updateAppMessageShareData','updateTimelineShareData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.ready(function () {title = $('.newsContent .title').html()var str1 = $(".newsContent .newsText").html();var content1 = str1.replace(/>/gi, '>');content1 = content1.replace(/</gi, '<');var contents1 = content1.replace(/<[^>]+>/g, '').replace(/<style[^>]*?>[\\s\\S]*?<\/style>/g,'').replace(/<img[^bai>]+>|<\s*\/>/gi,'');contents1 = contents1.replace(/ /ig, "");des = replaceQuote(contents1.substr(0, 40))//分享到微信朋友wx.updateAppMessageShareData({title: title, // 分享标题desc: des, // 分享描述link: winUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: img, // 分享图标success: function () {// alert.log('已分享');},cancel: function () {// alert.log('已取消');},fail:function(res){alert(JSON.stringify(res))}});//分享给微信朋友圈wx.updateTimelineShareData({title: title, // 分享标题link: winUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: img, // 分享图标success: function () {// alert('已分享');},cancel: function () {// alert.log('已取消');},fail:function(res){alert(JSON.stringify(res))}});wx.error(function (res) {console.log("res:", res)})});},error: function (XMLHttpRequest, textStatus, errorThrown) {console.log("error" + errorThrown);}});}})function getAppUserInfo() {var id = GetUrlParam('id')var link = '...'// 后台接口地址getNews(id,link);}function getNews(id,linkStr){$.ajax({url: linkStr+'/activity/appInfoListWeiXin?infoId='+id,type:'GET',async:false,success: function(data){if(data.content){$('.newsContent .title').text(data.title);$('.webTitle').text(data.webTitle);var d = new Date(data.CreateDate);var dataStr = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();$('.newsContent .newsDate').text(dataStr);var str = data.content;var content = str.replace(/>/gi, '>');content = content.replace(/</gi, '<');$('.newsContent .newsText').html(content);}},error: function(e){console.log(e);}});}function getDate(ns) {var time = new Date(ns);var y = time.getFullYear();var m = time.getMonth()+1;var d = time.getDate();var h = time.getHours();var mm = time.getMinutes();var s = time.getSeconds();return y+'-'+Modification(m)+'-'+Modification(d)+" "+Modification(h)+':'+Modification(mm)+':'+Modification(s);};// 得到中文字符串function replaceQuote(input) {for(var begin = input.indexOf('\''), end = input.lastIndexOf('\''); begin!=-1&&end!=-1&&begin<=end; begin = input.indexOf('\'', begin+1), end = input.lastIndexOf('\'', end-1)){input = setCharAt(input,begin, '\u');input = setCharAt(input,end, '\u');}for(var begin = input.indexOf('"'), end = input.lastIndexOf('"'); begin!=-1&&end!=-1&&begin<=end; begin = input.indexOf('"', begin+1), end = input.lastIndexOf('"', end-1)){input = setCharAt(input,begin, '\u201c');input = setCharAt(input,end, '\u201d');}return input.toString();}function setCharAt(myStr,i,c){myStr = myStr.split('');myStr[i] = c;myStr = myStr.join('');return myStr;}// 路径取参数function GetUrlParam(paraName) {var url = document.location.toString();var arrObj = url.split("?");if (arrObj.length > 1) {var arrPara = arrObj[1].split("&");var arr;for (var i = 0; i < arrPara.length; i++) {arr = arrPara[i].split("=");if (arr != null && arr[0] == paraName) {return arr[1];}}return "";}else {return "";}}function Modification(m){return m<10?'0'+m:m};</script></body><script type="text/javascript" src="js/jquery.base64.min.js" ></script></html>
我总结一下我遇到的问题：
1.h5怎么调试？
答：在微信开发者工具中调试，微信开发者工具的Console中，可以看到jssdk调用是否成功，我遇到了如右图中的错误，这一般情况下后端返回的签名有问题，具体开发中可以和后端同事一起联调，排查一下。
2.自定义标题，描述，分享图片相关问题
答：因为我实现的这个h5是资讯详情页，它的内容都是动态变化的，所以在分享的时候不可以写死标题和描述。我是这样实现的：ajax请求资讯详情接口的时候，我把请求设置为了同步请求，当接口返回数据并渲染到页面上时，我再去请求后端的获取微信配置信息的接口，这时候在去取页面上对应的内容赋值给标题和描述，这样就是动态的了。（源码都放在上面啦，还不快去瞅瞅...）。如果说分享出去的时候，标题和描述不需要动态变化，那直接写死就好啦（产品说啥就是啥，good...）
3.还有一个注意点，微信分享的时候，微信会在分享地址上面加参数：https://.../news_s.html?id=C5...67&from=timeline &form=timeline就是微信加的，所以我们在设置分享路径的时候要去掉&form=timeline。下面的代码中winUrl是我要分享的链接，总之一句话，去掉一切不属于分享链接的参数就行。
var winUrl = window.location.href.split("&")[0];if(winUrl !== window.location.href){window.location.href = winUrl}
如果有什么不太清楚的问题，可以评论哦，看到会及时回复的
