開發文檔:https://www.html5plus.org/doc/zh_cn/share.html
實現分享的第一要義:【請參閱】
向開放平台申請配置參數 :https://ask.dcloud.net.cn/article/36
主要方法:
獲取分享服務列表:plus.share.getServices(successCB, errorCB);
授權認證操作:obj.authorize(successCallback, errorCallback, options);
發送分享:
obj.send(ShareMessage, successCB, errorCB);
主要概念:
(1)服務標識:
id:(String類型)
有類型:"sinaweibo" - 表示新浪微博;
"tencentweibo" - 表示騰訊微博;
"weixin" - 表示微信;
"qq" - 表示騰訊QQ。
(2)微信分享場景,僅微信分享平台有效:
scene: (String 類型 )
可取值: "WXSceneSession"分享到微信的“我的好友”;[默認值]
"WXSceneTimeline"分享到微信的“朋友圈”中;
"WXSceneFavorite"分享到微信的“我的收藏”中。
(3)
obj.send(ShareMessage, successCB, errorCB);發送分享
ShareMessage對象用於表示分享消息內容,在JS中為JSON對象,用於向系統發送分享信息操作。
type: (String 類型 )分享消息的類型
微信分享平台,可取值:
"web"-分享網頁類型,title(必填)、content(必填)、thumbs(必填)、href(網頁url,必填)屬性值有效;
"text"-分享文字類型,content(必填)屬性值有效;
"image"-分享圖片類型,pictures(必填)屬性值有效;
"music"-分享音樂類型,title(必填)、content(必填)、thumbs(必填)、media(音樂url,必填)屬性值有效;
"video"-分享視頻類型,title(必填)、content(必填)、thumbs(必填)、media(視頻url,必填)屬性值有效;
"miniProgram"-分享小程序類型(僅支持分享到好友),title(必填)、content(必填)、thumbs(圖片小於128K,寬高比為5:4,必填)、miniProgram(小程序參數,必填)屬性值有效;
沒有設置type時,如果href值有效則默認值為"web",如果pictures有效則默認值為"image",否則默認值為"text"。
新浪微博分享平台,可取值:
"web"-分享網頁類型,content、href(網頁url,必填),分享鏈接添加到內容之后;
"text"-分享文字類型,content(必填)屬性有效,可在內容中直接插入鏈接地址;
"image"-分享圖片類型,content(可選)、thumbs(可選)、pictures(必填)屬性有效;
"video"-分享視頻類型,content(可選)、thumbs(可選)、media(本地視頻文件,必填)屬性有效;
沒有設置type時,如果存在thumbs則默認值為"image",如果存在href則默認值為"web",否則默認為"text"。
QQ分享平台,可取值:
"text"-分享文字類型,href(iOS可選,Android必填)、title(必填,最長30個字符)、content(可選,最長40個字符)、pictures或thumbs(可選,優先pictures,iOS不支持)屬性有效;
"image"-分享圖片類型,pictures或thumbs(必填,優先pictures)屬性有效;
"music"-分享音樂類型,title(必填,最長30個字符)、content(可選,最長40個字符)、href(必填)、media(音樂url,必填)、pictures或thumbs(可選,優先pictures)屬性值有效;
沒有設置type時,默認值"text"。
----------------------------------------------------------
content: (String 類型 )分享消息的文字內容
pictures: (Array[ String ] 類型 )分享消息的圖片
分享消息中包含的圖片路徑,僅支持本地路徑。 若分享平台僅支持提交一張圖片,傳入多張圖片則僅提交第一張圖片。 如果未指定type類型,優先級順序為:pictures>content(即設置了pictures則認為分享圖片類型)。
thumbs: (Array[ Stromg ] 類型 )分享消息的縮略圖
分享消息中包含的縮略圖路徑,支持本地路徑及網絡路徑。 若分享平台僅支持提交一張圖片,傳入多張圖片則僅提交第一張圖片。 如果分享平台的信息不支持縮略圖,若沒有設置消息的圖片(pictures)則使用縮略圖,否則忽略其屬性值。 注意:圖片有大小限制,推薦圖片小於20Kb。
media: (Strubg 類型 )分享的多媒體資源
分享的多媒體資源地址,當type值為"music"、"video"時有效。 注意: 微信分享平台支持音樂、視頻類型,僅支持網絡地址(以http://或https://開頭); QQ分享平台支持音樂類型,僅支持網絡路徑(以http://或https://開頭); 新浪微博分享平台支持視頻類型,僅支持本地文件路徑。
href: (String 類型 )分享獨立的鏈接
分享資源地址,僅支持網絡地址(以http://或https://開頭)。 如果未指定type類型,優先級順序為:href>pictures>content(即設置了href則認為分享網頁類型)。
具體deMo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script> <style type="text/css"> li{ height: 30px; background: pink; margin-bottom: 20px;; } </style> </head> <body> <button onclick="TshareAction('weixin')">好友</button> <button onclick="TshareAction('weixin',true)">朋友圈</button> <button onclick="TshareAction('qq')">qq</button> <button onclick="TshareAction('sinaweibo')">微博</button> </body> </html> <script type="text/javascript"> var vConsole = new VConsole(); var shares=null; var shareObj ={}; var shareType = ""; if(window.plus){ plusReady(); }else{ document.addEventListener('plusready', plusReady, false); } function plusReady(){ // 延時獲取服務列表,避免影響窗口動畫 setTimeout(TgetService(), 300); } // 獲取分享服務列表 function TgetService(){ plus.share.getServices(function(s){ shares = s; console.log(shares); var Obj ={} for(var i in s){ Obj[s[i].id] = s[i]; } shareObj = Obj; console.log('xxxx',shareObj); }, function(e){ outSet('獲取分享服務列表失敗:'+e.message); }); } // 判斷是否授權 根據id判斷authenticated function TshareAction(id, type){ if(id=="weixin"){ if(type) { shareType = "WXSceneTimeline" } else { shareType = "WXSceneSession" } } var target = shareObj; if(!target){ console.log("分享組件未准備好,請稍后再試"); return; } console.log('====',target['weixin']); console.log('是否認證',target[id].authenticated); if(target[id].authenticated){ shareMessage(target[id]); }else{ target[id].authorize(function(){ alert("授權成功"); shareMessage(target[id]); },function(){ alert("授權失敗"); }); } } // 發送分享信息 function shareMessage(target,frients=false){ console.log('發送信息目標',target) var config; switch(target.id){ // 分享至微信好友配置 case 'weixin': config ={ type:'web', title:'wwwwwww', content:"DCloud HBuilder-做最好的HTML5開發工具", thumbs:['http://pic.90sjimg.com/design/01/30/13/50/596983bfbb2da.png'], href:"http://www.dcloud.io/", extra:{ scene:shareType, } } break; case 'qq': config ={ type:'text', title:'wwwwwww', content:"DCloud HBuilder-做最好的HTML5開發工具", pictures:['http://pic.90sjimg.com/design/01/30/13/50/596983bfbb2da.png'], href:"http://www.dcloud.io/", } break; case 'sinaweibo': config ={ type:'web', content:"DCloud HBuilder-做最好的HTML5開發工具", href:"http://www.dcloud.io/", } break; } target.send(config, function(){ alert("分享成功!"); },function(e){ alert("分享失敗:"+e.message); }); } </script>