微信、QQ分享內容定製

1、微信分享之*.qq.com域(騰訊自家產品)

<code>if (typeof WeixinJSBridge === "undefined") { 

if (document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}
} else {
onBridgeReady();
}

var options = {
title: '偶是騰訊,偶第一',
desc: '分享描述,我只支持自家產品,其他繞行',
link: 'https://www.tencent.com/', // 這個可以定製分享出去卡片的鏈接。QQ不可以
img_url: 'https://zhengxin-pub.bj.bcebos.com/logopic/0853a576ef27edff11f375f8f0880f8b_fullsize.jpg?x-bce-process=image/resize,m_lfit,w_200',
img_width: '110',
img_height: '110'
}
function onBridgeReady () {
// 分享給微信好友
WeixinJSBridge.on('menu:share:appmessage', function (argv) {
WeixinJSBridge.invoke('sendAppMessage', {
'img_width': options.width || '120',
'img_height': options.height || '120',
'title': options.title,
'link': options.link,
'desc': options.desc,
'img_url': options.img_url
}, function (res) {
console.log(res)
if (res.err_msg === 'send_app_msg:ok') {
console.log('分享好友成功')
}
});
});

// 分享到微信朋友圈
WeixinJSBridge.on('menu:share:timeline', function (argv) {
WeixinJSBridge.invoke('shareTimeline', {
'img_width': options.width || '120',
'img_height': options.height || '120',
'title': options.title,
'link': options.link,
"desc": options.desc,
'img_url': options.img_url
}, function (res) {
console.log(res)

if(res.err_msg === 'share_timeline:ok') {
console.log('分享朋友圈成功')
}
});
});
}/<code>

2、微信分享之非*.qq.com(普通大眾)

  • 官方API技術文檔:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1
  • 綁定域名

先登錄微信公眾平臺進入“公眾號設置”的“功能設置”裡填寫“JS接口安全域名”。

  • 引入jssdk文件

https://res.wx.qq.com/open/js/jweixin-1.4.0.js

  • 通過config接口注入權限驗證配置
<code>wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
appId: '', // 必填,公眾號的唯一標識
timestamp: , // 必填,生成簽名的時間戳
nonceStr: '', // 必填,生成簽名的隨機串

signature: '',// 必填,簽名
jsApiList: [] // 必填,需要使用的JS接口列表
});/<code>

注:此處需要後臺開發接口支撐。

  • 通過ready接口處理成功驗證
<code>wx.ready(function(){
// config信息驗證後會執行ready方法,所有接口調用都必須在config接口獲得結果之後,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口,則可以直接調用,不需要放在ready函數中。
});/<code>
  • 通過error接口處理失敗驗證
<code>wx.error(function(res){
// config信息驗證失敗會執行error函數,如簽名過期導致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數中查看,對於SPA可以在這裡更新簽名。
});/<code>
  • 分享接口

自定義“分享給朋友”及“分享到QQ”按鈕的分享內容(1.4.0)

<code>wx.ready(function () {   //需在用戶可能點擊分享按鈕前就先調用
wx.updateAppMessageShareData({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '', // 分享圖標
success: function () {
// 設置成功
}
})
});/<code>

自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內容(1.4.0)

<code>wx.ready(function () {      //需在用戶可能點擊分享按鈕前就先調用
wx.updateTimelineShareData({
title: '', // 分享標題
link: '', // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '', // 分享圖標
success: function () {
// 設置成功
}
})
});/<code>

獲取“分享到騰訊微博”按鈕點擊狀態及自定義分享內容接口

<code>wx.ready(function () {      //需在用戶可能點擊分享按鈕前就先調用
wx.onMenuShareWeibo({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享鏈接
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
});/<code>


H5 - 微信、QQ分享內容定製


3、QQ分享

<code>





/<code>
  • 分享給QQ朋友截圖:
H5 - 微信、QQ分享內容定製

  • 分享到QQ空間截圖:


H5 - 微信、QQ分享內容定製


分享到:


相關文章: