<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta itemprop="name" content="陪它趣闻"/> <meta itemprop="image" content="" /> <meta name="description" itemprop="description" content="" /> <title>陪它趣闻</title> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/dropload.min.js"></script> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js"></script> <script type="text/javascript" src="js/interesting.js"></script> <link type="text/css" href="css/interesting.css" rel="stylesheet"> <link type="text/css" href="css/dropload.css" rel="stylesheet"> <style> *{ margin: 0px; padding: 0px; } body{ overflow-x:hidden; width:100%; } .download{ width: 100%; height: 50px; background-color: rgba(0,0,0,0.5); position: fixed; top: 0px; left: 0px; font-family: "微软雅黑"; } .download>img{ float: left; margin-left: 10px; width: 30px; height: 30px; margin-top: 10px; } .peita{ float: left; color: #FFFFFF; margin-left: 5px; line-height: 50px; } .open{ float: right; margin-right: 10px; width: 50px; height: 30px; background-color: #ff6879; text-align: center; margin-top: 10px; color: #FFFFFF; line-height: 30px; border-radius: 5px; } </style> </head> <body> <div class=""> <div id="body"> <div class="title" id="title"></div> <div class="details">作者：<span id="author"></span> 编辑：<span id="editer"></span> <br>来源：<span id="froms"></span><br><span style="float: right;" id="create_time"></span></div> </div> </div> <div class="stripes"></div> <div class="content"><span id="browse_num"></span><span>浏览</span><span style="margin-left: 10px;" id="count"></span><span>条回复</span></div> <div class="changchangde"> <div class="baipinglun"> <!--<div class="baihuif"> 回复</div>--> </div> </div> <a class="huifu1"><img style="width: 100%;" src="images/shuru.jpg" alt="" /></a> <div class="download"> <img src="http://fx.peita.net/pet160.png"> <div class="peita"><b>陪它宠物社区</b></div> <div class="open"><b>打开</b></div> </div> <script type="text/javascript"> var signature,nonceStr,timestamp,urll var url = encodeURIComponent(location.href) var requestUrl = "这里是请求后台接口获取wx.config需要的数据" $.ajax({ type:"get", url:requestUrl, async:false, dataType:"json", success:function(data){ if (data.msg == "成功") {} signature = data.data.signature nonceStr = data.data.noncestr timestamp = data.data.timestamp urll = data.data.url //注入权限 wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '填写自己的appid就可以了', // 必填，公众号的唯一标识 timestamp: timestamp, // 必填，生成签名的时间戳 nonceStr: nonceStr, // 必填，生成签名的随机串 signature: signature,// 必填，签名，见附录1
//这里是配置一些使用的微信方法 jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', ] }); }, error:function(XMLHttpRequest, textStatus, errorThrown){ console.log(XMLHttpRequest) console.log(textStatus) console.log(errorThrown) } }); //注入检验 wx.ready(function(){ url = url.substr(0, url.indexOf('%26')); var title = "陪它趣闻" var desc = $("#title").html() var imgUrl = $("img").first().attr("src") document.title = title wx.checkJsApi({ jsApiList: ['onMenuShareQZone','onMenuShareWeibo','onMenuShareQQ','onMenuShareAppMessage','onMenuShareTimeline'] , success: function(res) { } }); wx.onMenuShareAppMessage({ title: title, desc: desc, link: '',//这里的链接不要写会自己默认当前路径，写了的话可能出现样式等等的一些不必要的小错误等 imgUrl: imgUrl, type: '', dataUrl: '', success: function () { }, cancel: function () { } }); }); wx.error(function(res){ alert("微信验证失败") }); $(".download").click(function(){ var u = navigator.userAgent if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=cc.petnet.LovePets" }else if (u.indexOf("iPhone") > -1){ window.location.href = "https://itunes.apple.com/cn/app/%E9%99%AA%E5%AE%83-%E5%85%B3%E7%88%B1%E5%AE%A0%E7%89%A9%E4%BB%8E%E9%99%AA%E5%AE%83%E5%BC%80%E5%A7%8B/id1142508480?mt=8" }else{ window.location.href = "https://www.peita.net" } }) $(".huifu1").click(function(){ var u = navigator.userAgent if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=cc.petnet.LovePets" }else if (u.indexOf("iPhone") > -1){ window.location.href = "https://itunes.apple.com/cn/app/%E9%99%AA%E5%AE%83-%E5%85%B3%E7%88%B1%E5%AE%A0%E7%89%A9%E4%BB%8E%E9%99%AA%E5%AE%83%E5%BC%80%E5%A7%8B/id1142508480?mt=8" }else{ window.location.href = "https://www.peita.net" } }) $("body").on("touchstart",function(e){ touchStart(e) }) $("body").on("touchmove",function(e){ touchMove(e) }) $("body").on("touchend",function(e){ touchEnd(e) }) var startX = 0, startY = 0; function touchStart(e){ var _touch = e.originalEvent.targetTouches[0]; var _x = parseInt(_touch.pageX); var _y = parseInt(_touch.pageY); startY = _y; } function touchMove(e){ var _touch = e.originalEvent.targetTouches[0]; var _y = parseInt(_touch.pageY); if (_y - startY > 0) { $(".download").slideDown() } if(_y-startY<0){ $(".download").slideUp() } } function touchEnd(e){ } setShareInfo({ title: "陪它趣闻", summary: $("#title").html(), pic: $("img").first().attr("src"), url: window.location.href }); </script> </body> </html>
参考链接：http://www.jb51.net/article/93251.htm
尽量采用线上开发，后台可以本地开发~
微信分享如果出现第一次分享成功，第二次分享就出现问题的话，一定要前后端一起检查获取当前域名的那块是不是写错了，后端格外的要检查是不是把接到的域名转义了，比如下列的解决方案中的&
还有更多关于签名失败的问题，请参考微信文档！
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
如上图，常见的就是签名的错误！