HBuilder webApp開發(七)微信/QQ/新浪/騰訊微博分享

HBuilder是支持微信分享(好友和朋友圈),QQ分享,新浪微博和騰訊微博分享。
可是在使用的過程當中,官方給的文檔彷佛很坑爹。
《分享插件配置》
《分享插件開發指南》
都是2014年7月發表的文檔,後期也沒看見更新說明;有用戶過來提問,就都給引導去看這兩篇文檔,真不知道有什麼好看的。
在公司的項目中,實際也使用了分享。昨天下班回去就從新寫了一下代碼,弄到半夜12點多。

css

HBuilder的配置

  1. 配置權限 
    雙加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

相關文章
相關標籤/搜索