HBuilder是支持微信分享(好友和朋友圈),QQ分享,新浪微博和騰訊微博分享。
可是在使用的過程當中,官方給的文檔彷佛很坑爹。
《分享插件配置》
《分享插件開發指南》
都是2014年7月發表的文檔,後期也沒看見更新說明;有用戶過來提問,就都給引導去看這兩篇文檔,真不知道有什麼好看的。
在公司的項目中,實際也使用了分享。昨天下班回去就從新寫了一下代碼,弄到半夜12點多。
css
配置權限
雙加manifest.json文件,咱們須要先配置權限(默認是有分享權限的)因此咱們只須要再看看覈實一下。 html
2. 配置相關的appkey java
打開manifest.json的SDK配置視圖。 android
這些appkey咱們能夠在其餘第三方平臺上面獲取作測試。例如ShareSDK。實際項目中須要實際本身公司的。再勾選對應的平臺。git
3.查看代碼視圖 github
代碼視圖裏面咱們只須要看看有這些東西就能夠了。不須要修改。web
界面
json
界面裏面我已經把存在的問題和解決方案都列出來了。
工做流程
點擊右上角的分享按鈕,彈出分享視圖,選擇相應的平臺,而後就會跳轉到對應的平臺,分享成功以後就會返回咱們的應用,原生應用也是這樣的流程。可是在HBuilder裏面多了一個更新分享服務,也許就至關無原生裏面的註冊吧。詳細能夠看看下面的代碼。
代碼
代碼部分註釋都有了,使用流程也會更加清晰。服務器
<html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--標準mui.css--> <link rel="stylesheet" href="../css/mui.min.css"> <link rel="stylesheet" href="../css/mui.css" /> <!--App自定義的css--> <style type="text/css"> .share { float: right; } .tip-title { font-size: 20px; color: blue; padding-left: 10px; } .content { padding-top: 5px; padding-bottom: 10px; padding-left: 10px; } .content span { color: red; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <a class="share mui-icon mui-icon-redo" onclick="shareHref()"></a> <h1 class="mui-title">第三方分享</h1> </header> <div class="mui-content"> <span class="tip-title">分享平臺:</span><br> <div class="content"> 1.微信分享:微信好友/微信朋友圈 <br> 2.QQ分享 <br> 3.新浪微博分享 <br> </div> <span class="tip-title">注意事項:</span><br> <div class="content"> <span> 微信分享圖片大小不能超過32kb限制 <br> </span> </div> <span class="tip-title">解決辦法:</span><br> <div class="content"> 1.把分享的圖片的url轉換成圖片對象image; <br> 2.把生成的圖片對象image壓縮後上傳服務器返回新的圖片的url; <br> 3.分享圖片地址使用壓縮上傳後從服務器獲取的url; <br> 或者:<br> 第一次服務器返回的圖片的體積就是32kb如下的. <br> </div> </div> </body> <script src="../js/mui.min.js"></script> <script src="../js/mui.zoom.js"> </script> <script src="../js/mui.previewimage.js"></script> <script src="../js/tools.js" ></script> <script> mui.init({ swipeBack:true //啓用右滑關閉功能 }); var Intent = null, File = null, Uri = null, main = null; var shares = null; var shareImageUrl = ''; mui.plusReady(function() { updateSerivces(); if (plus.os.name == "Android") { Intent = plus.android.importClass("android.content.Intent"); File = plus.android.importClass("java.io.File"); Uri = plus.android.importClass("android.net.Uri"); main = plus.android.runtimeMainActivity(); } }) /** * 更新分享服務 */ function updateSerivces() { plus.share.getServices(function(s) { shares = {}; for (var i in s) { var t = s[i]; shares[t.id] = t; } outSet("獲取分享服務列表成功"); }, function(e) { outSet("獲取分享服務列表失敗:" + e.message); }); } /** * 分享操做 */ function shareAction(id, ex) { var s = null; if (!id || !(s = shares[id])) { outLine("無效的分享服務!"); return; } if (s.authenticated) { outSet("---已受權---"); shareMessage(s, ex); } else { outSet("---未受權---"); s.authorize(function() { shareMessage(s, ex); }, function(e) { outLine("認證受權失敗"); }); } } /** * 發送分享消息 */ function shareMessage(s, ex) { var msg = { content: '分享-詳情', href: 'http://blog.csdn.net/zhuming3834', title: 'HGDQ-分享測試-title', content: 'HGDQ-分享測試-content', thumbs: ['http://img3.3lian.com/2013/v10/4/87.jpg'], pictures: ['http://img3.3lian.com/2013/v10/4/87.jpg'], extra: { scene: ex } }; s.send(msg, function() { outLine("分享成功!"); }, function(e) { outLine("分享失敗!"); }); } /** * 分享按鈕點擊事件 */ function shareHref() { var ids = [{ id: "weixin", ex: "WXSceneSession" /*微信好友*/ }, { id: "weixin", ex: "WXSceneTimeline" /*微信朋友圈*/ }, { id: "qq" /*QQ好友*/ }, { id: "tencentweibo" /*騰訊微博*/ },{ id: "sinaweibo" /*新浪微博*/ }], bts = [{ title: "發送給微信好友" }, { title: "分享到微信朋友圈" }, { title: "分享到QQ" }, { title: "分享到騰訊微博" }, { title: "分享到新浪微博" }]; plus.nativeUI.actionSheet({ cancel: "取消", buttons: bts }, function(e) { var i = e.index; if (i > 0) { shareAction(ids[i - 1].id, ids[i - 1].ex); } } ); } // 控制檯輸出日誌 function outSet(msg) { console.log(msg); } // 界面彈出吐司提示 function outLine(msg) { mui.toast(msg); } </script> </html>
實際使用過程當中只須要這麼操做就能夠了。微信
前天晚上在作原生的iOS時,測試給提了一個bug,有的地方能夠調起微信分享,有的不行。之前是出現過這關問題,後來其餘同事解決了。前天我就有看了一下以前同事的代碼,發現了裏面的坑。
以前他們的圖片壓縮是使用的:
UIImageJPEGRepresentation(圖片對象,壓縮係數)
// 項目裏面壓縮係數固定是0.01
使用這個方法作的,以前解決了問題。而後前天在分析中發現這個方法有時會把圖片越壓縮體積越大。好比圖片體積只有37kb,壓縮以後可能會有58kb左右,可是對於500+kb的圖片,壓縮以後的圖片體積能夠達到32kb如下。(萬惡的微信,萬惡的32kb限制)。
最後分析了一下分享的圖片是在那裏使用的
左邊的小圖,纔是分享出去的。
想一想以前本身作二維碼(《CoreImage原生二維碼生成(一)》)的時候,使用過的方法。
個人解決辦法是,直接把調用上面UIImageJPEGRepresentation壓縮以後的圖片再壓縮成制定尺寸的圖片,而後分享。
/**
* 大圖片壓縮成制定尺寸的圖片
*
* @param img 須要壓縮的圖片
* @param size 目標尺寸
*
* @return 壓縮後的圖片
*/
+ (UIImage *)scaleTosize:(UIImage *)img size:(CGSize)size{
// 建立一個bitmap的context
// 並把它設置成爲當前正在使用的context
UIGraphicsBeginImageContext(size);
[img drawInRect:CGRectMake(0, 0, size.width, size.height)];
UIImage *scaledImage = UIGraphicsGetImageFromCurrentImageContext();
return scaledImage;
}
在上面的二維碼生成中我使用的方法你們能夠查看以前的博客。
然而在HBuilder裏面分享的圖片的url,即便經過url獲取的圖片最終超過32kb也不能使用微信分享。
解決辦法就是:
1.把分享的圖片的url轉換成圖片對象image;
2.把生成的圖片對象image壓縮後上傳服務器返回新的圖片的url;
3.分享圖片地址使用壓縮上傳後從服務器獲取的url;
或者:
第一次服務器返回的圖片的體積就是32kb如下的。
這個微信分享圖片32kb的限制,昨晚坑了我一下,最後在HBuilder官網去找答案,最後無果。後來想一想,前天剛剛解決了這個問題,問題,問題是微信對從蘋果手機端分享出去圖片大小的限制,實際在安卓機器上面是沒限制的。
最後
關於效果圖,你們能夠去個人github下載查看,CSDN上傳圖片不能超過2M.
代碼下載地址:請點擊我!
本文來源於https://blog.csdn.net/zhuming3834/article/details/51706256