一、微信分享(需要后臺配合開發(fā)config接口)
注意:去微信公眾平臺申請微信服務號
(按步驟審核大概需7個工作日)[https://mp.weixin.qq.com/]
步驟一:綁定域名
先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”倦零。
備注:登錄后可在“開發(fā)者中心”查看對應的接口權(quán)限。
步驟二:引入JS文件
在需要調(diào)用JS接口的頁面引入如下JS文件飘哨,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
如需進一步提升服務穩(wěn)定性,當上述資源不可訪問時琐凭,可改訪問:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)芽隆。
備注:支持使用 AMD/CMD 標準模塊加載方法加載
步驟三:通過config接口注入權(quán)限驗證配置
所有需要使用JS-SDK的頁面必須先注入配置信息,否則將無法調(diào)用(同一個url僅需調(diào)用一次淘正,對于變化url的SPA的web app可在每次url變化時進行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性,所以使用pushState來實現(xiàn)web app的頁面會導致簽名失敗臼闻,此問題會在Android6.2中修復)鸿吆。
wx.config({ debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù)述呐,可以在pc端打開惩淳,參數(shù)信息會通過log打出,僅在pc端時才會打印乓搬。 appId: '', // 必填思犁,公眾號的唯一標識 timestamp: , // 必填,生成簽名的時間戳 nonceStr: '', // 必填进肯,生成簽名的隨機串 signature: '',// 必填激蹲,簽名 jsApiList: [] // 必填,需要使用的JS接口列表});
步驟四:通過ready接口處理成功驗證
wx.ready(function(){ // config信息驗證后會執(zhí)行ready方法学辱,所有接口調(diào)用都必須在config接口獲得結(jié)果之后乘瓤,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調(diào)用相關接口策泣,則須把相關接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行衙傀。對于用戶觸發(fā)時才調(diào)用的接口,則可以直接調(diào)用萨咕,不需要放在ready函數(shù)中统抬。});
步驟五:通過error接口處理失敗驗證
wx.error(function(res){ // config信息驗證失敗會執(zhí)行error函數(shù),如簽名過期導致驗證失敗危队,具體錯誤信息可以打開config的debug模式查看聪建,也可以在返回的res參數(shù)中查看,對于SPA可以在這里更新簽名交掏。});
分享接口
請注意妆偏,不要有誘導分享等違規(guī)行為,對于誘導分享行為將永久回收公眾號接口權(quán)限盅弛,詳細規(guī)則請查看:朋友圈管理常見問題
請注意钱骂,原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage挪鹏、wx.onMenuShareQQ见秽、wx.onMenuShareQZone 接口,即將廢棄讨盒。請盡快遷移使用客戶端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData解取、updateTimelineShareData 接口。
自定義“分享給朋友”及“分享到QQ”按鈕的分享內(nèi)容(1.4.0)
wx.ready(function () { //需在用戶可能點擊分享按鈕前就先調(diào)用 wx.updateAppMessageShareData({ title: '', // 分享標題 desc: '', // 分享描述 link: '', // 分享鏈接返顺,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: '', // 分享圖標 success: function () { // 設置成功 } })});
自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內(nèi)容(1.4.0)
wx.ready(function () { //需在用戶可能點擊分享按鈕前就先調(diào)用 wx.updateTimelineShareData({ title: '', // 分享標題 link: '', // 分享鏈接禀苦,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: '', // 分享圖標 success: function () { // 設置成功 } })});
獲取“分享到朋友圈”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口(即將廢棄)
wx.onMenuShareTimeline({ title: '', // 分享標題 link: '', // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: '', // 分享圖標 success: function () { // 用戶點擊了分享后執(zhí)行的回調(diào)函數(shù)},
獲取“分享給朋友”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口(即將廢棄)
wx.onMenuShareAppMessage({title: '', // 分享標題desc: '', // 分享描述link: '', // 分享鏈接遂鹊,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致imgUrl: '', // 分享圖標type: '', // 分享類型,music振乏、video或link,不填默認為linkdataUrl: '', // 如果type是music或video秉扑,則要提供數(shù)據(jù)鏈接慧邮,默認為空success: function () {// 用戶點擊了分享后執(zhí)行的回調(diào)函數(shù)}});
獲取“分享到QQ”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口(即將廢棄)
wx.onMenuShareQQ({title: '', // 分享標題desc: '', // 分享描述link: '', // 分享鏈接imgUrl: '', // 分享圖標success: function () {// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)},cancel: function () {// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)}});
獲取“分享到騰訊微博”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口
wx.onMenuShareWeibo({title: '', // 分享標題desc: '', // 分享描述link: '', // 分享鏈接imgUrl: '', // 分享圖標success: function () {// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)},cancel: function () {// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)}});
二、QQ分享
(1)分享當前頁面
// 使用meta同樣可以達到該接口的作用
<meta itemprop="name" content="這是分享的標題"/>
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="這是要分享的內(nèi)容" />
(有的手機分享標題取得是title標簽舟陆,所以)
<meta itemprop="name" content="這是分享的標題"/>
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="這是要分享的內(nèi)容" />
<title>這是分享的標題</title>
(2)需要自定義分享鏈接
注意限制:
share_url -- 可選 String 頁面可以定制分享出去的url误澳,可去掉某些敏感參數(shù)等,如果不傳秦躯,則使用頁面的url忆谓,長度不能超過120字節(jié),超過的請轉(zhuǎn)短鏈踱承。另外陪毡,url必須跟頁面url同一個域名米母,否則設置不生效。
title -- 必選 String 分享的標題毡琉,最大45字節(jié)
desc -- 必選 String 分享的摘要铁瞒,最大60字節(jié)
image_url -- 可選 String 圖片URL,原 imageUrl 參數(shù)桅滋,可以繼續(xù)使用 imageUrl慧耍。
注意:圖片最小需要200 * 200,否則分享到Qzone時會被Qzone過濾掉丐谋。
頁面內(nèi)引入:share.js
(分享js)[https://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js]
js內(nèi)配置
setShareInfo({
title: title,
summary: desc,
pic: imgUrl,
url: share_link,
});