產品說：“這個活動頁，為了增加曝光量，增分享功能”
那想這種帶圖片文字的分享怎麽弄的呢？
一、解析
1.需要一個公眾號
2.需要後台將你網站的域名配置到微信開發網頁後端
3.需要appId、timestamp、nonceStr、signature（這個讓後端給你，具體怎麽獲取我也會貼後端代碼）
二、代碼
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script><script type="text/javascript"> $(function () { var ua = navigator.userAgent.toLowerCase();//獲取判斷用的對象 //在微信中打開 if (ua.match(/MicroMessenger/i) == "micromessenger") { getwxconfig(); var linkurl = "http://dataplat.centaline.com.cn/www_data/data_growth"; var title = "【中原數據平台】40年中原地產大陸區客戶資產，看完熱血沸騰"; var des = "40年中原地產大陸區客戶資產"; var imgurl = "http://dataplat.centaline.com.cn/images/change40.png"; wxshare(linkurl, title, des, imgurl); } }) //獲取微信配置信息 function getwxconfig() { var url = location.href.split('#')[0]; $.ajax({ type: "POST", url: "/www_data/weixintoken", data: { 'action': 'wxApi', 'url': url }, dataType: "json", async:false, success: function (data) { //console.log('配置成功'); wx.config({ debug: false, appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: [ // 所有要調用的 API 都要加到這個列表中 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'chooseImage',//選擇照片或者拍照 'uploadImage'//上傳圖片 ] }); }, error: function (data) { console.log(data); console.log('分享配置失敗'); } }); } //微信分享 function wxshare(linkurl,title,des,imgurl) { wx.ready(function () { //微信分享 wx.onMenuShareTimeline({ title: title, // 分享標題 desc: des, // 分享描述 link: linkurl, // 分享鏈接 imgUrl: imgurl, // 分享圖標 success: function () { // 用戶確認分享後執行的回調函數 //alert("成功"); }, cancel: function () { // 用戶取消分享後執行的回調函數 //alert("失敗"); } }); wx.onMenuShareAppMessage({ title: title, // 分享標題 desc: des, // 分享描述 link: linkurl, // 分享鏈接 imgUrl: imgurl, // 分享圖標 type: '', // 分享類型,music、video或link，不填默認為link dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空 success: function () { // 用戶確認分享後執行的回調函數 //alert("成功"); }, cancel: function () { // 用戶取消分享後執行的回調函數 //alert("失敗"); } }); wx.onMenuShareQQ({ title: title, // 分享標題 desc: des, // 分享描述 link: linkurl, // 分享鏈接 imgUrl: imgurl, // 分享圖標 success: function () { // 用戶確認分享後執行的回調函數 }, cancel: function () { // 用戶取消分享後執行的回調函數 } }); wx.onMenuShareWeibo({ title: title, // 分享標題 desc: des, // 分享描述 link: linkurl, // 分享鏈接 imgUrl: imgurl, // 分享圖標 success: function (res) { }, cancel: function (res) { }, fail: function (res) { } }); wx.onMenuShareQZone({ title: title, // 分享標題 desc: des, // 分享描述 link: linkurl, // 分享鏈接 imgUrl: imgurl, // 分享圖標 success: function (res) { }, cancel: function (res) { }, fail: function (res) { } }); }); }</script>
後端怎麽獲取access_token呢？
1.get請求（參數是appId和appSecret）需要登錄微信開發平台查看哦可以返回得到access_token
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' appId '&secret=' appSecret '
2.get請求得到ticket
http://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' access_token '&type=jsapi
3.到到簽名（timestamp時間戳、noncestr為隨機字符串隨便填、url為頁麵的url、然後憑接成字符串進行hex_sha1加密得到簽名）
var access_token =access_token;var timestamp= Math.round(new Date().getTime()/1000);var noncestr ="xxxxs12";var jsapi_ticket="jsapi_ticket=" ticket "&noncestr=" noncestr "×tamp=" timestamp "&url=" url "";
4.將數據返回前端appId、access_token、timestamp、nonceStr、signature
三、結語
後端調微信接口獲取access_token記得做緩存哦，每天隻能獲取2000次，不然你就嗬嗬吧，作者我就是忘記加緩存，導致朋友圈分享沒有圖片，文字，被批了，那天集團老總還能看到，掉了大。
大家可以收藏哦，或者到github下載源碼哦！
本文到此結束，希望對大家有所幫助呢。
