<!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
如上圖，常見的就是簽名的錯誤！