微信分享網頁顯示縮略圖,摘要和標題


后端

  • 認證微信公眾號后添加安全的域名后可以查看對應的appidsecret
  • 根據appidsecret請求微信提供的api,拿到對應的access_token
https.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET', function(res) {
	//這里的回調函數能夠拿到包含access_token的一個json數據
	//{"access_token":"ACCESS_TOKEN","expires_in":7200}
})
  • 根據獲取到的access_token請求微信的api獲取簽名所需的ticket
https.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi', function(res) {
	//這里的回調函數能拿到ticket
	/**
	 * {
	        'errcode': 0,
	        'errmsg': 'ok',
	        'ticket': '字符串',
	        'expires_in': 7200
	    }
	 */
})
  • 生成簽名(需要參數如下)
    • ticket: 已經拿到
    • noncestr: 隨機串
    • timestamp: 時間戳
    • url: 打開前端頁面的url
//noncestr
var noncestr = Math.random().toString(36).substr(2, 15);

//timestamp
var timestamp = parseInt(new Date().getTime() / 1000) + '';

//簽名算法
var calcSignature = function (ticket, noncestr, timestamp, url) {
    var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url' + url
     shaObj = new jsSHA(str, 'TEXT');
     return shaObj.getHash('SHA-1', 'HEX');
}

//簽名生成成功
var signature = calcSignature(ticket, noncestr, timestamp, url);
注意:

access_token和ticket生成后的有效期是7200s,微信官方建議將其進行緩存,避免短時間內大量的請求微信服務器,導致請求上限機制被觸發

客戶端

  • 在html中引入所必須的微信js-sdk: https://res.wx.qq.com/open/js/jweixin-1.2.0.js
  • 通過ajax的方式想后台服務器發送請求,拿到帶有signature, timestamp, appid, nonceStr的數據后對wx.config進行配置
//config:進行配置
wx.config({
	debug: true, //開啟debug模式,在驗證簽名過程中會返回對應信息
	appId: appid,
	timestamp: timestamp,
	nonceStr: nonceStr,
	signature: signature,
	jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
})
//ready中調用api
wx.ready(function(){
	var sdata = {
	    title: 'str',
	    desc: 'str',
	    link: link,
	    imgUrl: url,
	    success: function () {
	        alert('用戶確認分享后執行的回調函數');
	    },
	    cancel: function () {
	        alert('用戶取消分享后執行的回調函數');
	    }
	};
	wx.onMenuShareTimeline(sdata);
	wx.onMenuShareAppMessage(sdata);
});


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM