h5分享

一、微信分享(需要后臺配合開發(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接口列表});

簽名算法見文末的附錄1江掩,所有JS接口列表見文末的附錄2

步驟四:通過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,
  });

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末芍碧,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子号俐,更是在濱河造成了極大的恐慌泌豆,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,692評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吏饿,死亡現(xiàn)場離奇詭異踪危,居然都是意外死亡,警方通過查閱死者的電腦和手機猪落,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評論 3 392
  • 文/潘曉璐 我一進店門贞远,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人笨忌,你說我怎么就攤上這事蓝仲。” “怎么了官疲?”我有些...
    開封第一講書人閱讀 162,995評論 0 353
  • 文/不壞的土叔 我叫張陵袱结,是天一觀的道長。 經(jīng)常有香客問我途凫,道長垢夹,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,223評論 1 292
  • 正文 為了忘掉前任颖榜,我火速辦了婚禮棚饵,結(jié)果婚禮上煤裙,老公的妹妹穿的比我還像新娘掩完。我一直安慰自己,他們只是感情好硼砰,可當我...
    茶點故事閱讀 67,245評論 6 388
  • 文/花漫 我一把揭開白布且蓬。 她就那樣靜靜地躺著,像睡著了一般题翰。 火紅的嫁衣襯著肌膚如雪恶阴。 梳的紋絲不亂的頭發(fā)上诈胜,一...
    開封第一講書人閱讀 51,208評論 1 299
  • 那天,我揣著相機與錄音冯事,去河邊找鬼焦匈。 笑死,一個胖子當著我的面吹牛昵仅,可吹牛的內(nèi)容都是我干的缓熟。 我是一名探鬼主播,決...
    沈念sama閱讀 40,091評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼摔笤,長吁一口氣:“原來是場噩夢啊……” “哼够滑!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起吕世,我...
    開封第一講書人閱讀 38,929評論 0 274
  • 序言:老撾萬榮一對情侶失蹤彰触,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后况毅,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,346評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡吮龄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,570評論 2 333
  • 正文 我和宋清朗相戀三年俭茧,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片漓帚。...
    茶點故事閱讀 39,739評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡母债,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出尝抖,到底是詐尸還是另有隱情炊林,我是刑警寧澤,帶...
    沈念sama閱讀 35,437評論 5 344
  • 正文 年R本政府宣布纫骑,位于F島的核電站嫉你,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏搅荞。R本人自食惡果不足惜红氯,卻給世界環(huán)境...
    茶點故事閱讀 41,037評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望咕痛。 院中可真熱鬧痢甘,春花似錦、人聲如沸茉贡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽腔丧。三九已至放椰,卻和暖如春作烟,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背砾医。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評論 1 269
  • 我被黑心中介騙來泰國打工拿撩, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人如蚜。 一個月前我還...
    沈念sama閱讀 47,760評論 2 369
  • 正文 我出身青樓绷雏,卻偏偏與公主長得像,于是被迫代替她去往敵國和親怖亭。 傳聞我的和親對象是個殘疾皇子涎显,可洞房花燭夜當晚...
    茶點故事閱讀 44,647評論 2 354

推薦閱讀更多精彩內(nèi)容