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

阿新 • • 發佈：2019-01-27

HBuilder是支援微信分享（好友和朋友圈），QQ分享，新浪微博和騰訊微博分享。
但是在使用的過程中，官方給的文件似乎很坑爹。
《分享外掛配置》
《分享外掛開發指南》
都是2014年7月發表的文件，後期也沒看見更新說明；有使用者過來提問，就都給引導去看這兩篇文件，真不知道有什麼好看的。
在公司的專案中，實際也使用了分享。昨天下班回去就重新寫了一下程式碼，弄到半夜12點多。

HBuilder的配置

配置許可權
雙加manifest.json檔案，我們需要先配置許可權（預設是有分享許可權的）所以我們只需要再看看核實一下。
配置相關的appkey
開啟manifest.json的SDK配置檢視。

這些appkey我們可以在其他第三方平臺上面獲取做測試。例如ShareSDK。實際專案中需要實際自己公司的。再勾選對應的平臺。
檢視程式碼檢視

程式碼視圖裡面我們只需要看看有這些東西就可以了。不需要修改。

基本介面和工作流程

介面

介面裡面我已經把存在的問題和解決方案都列出來了。
工作流程
點選右上角的分享按鈕，彈出分享檢視，選擇相應的平臺，然後就會跳轉到對應的平臺，分享成功之後就會返回我們的應用，原生應用也是這樣的流程。但是在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.
程式碼下載地址：請點選我！

更新日誌：
2016.07.12
應CSDN網友u012155655 要求，增加騰訊微博分享，github程式碼已更新。

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

HBuilder的配置

基本介面和工作流程

程式碼

遇見的坑

最後

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

解決UmengSDK社會化分享過程中微信,QQ,新浪微博分享不成功的問題

使用路由器上網微信qq絕地求生騰訊系開啟慢或打不開的問題

微信域名檢測、騰訊微信域名檢測的機制原理以及實現方式

實現QQ、微信、新浪微博和百度第三方登錄(Android Studio)

IOS 使用ShareSDK進行QQ，微信，新浪微博分享失敗經驗

unity3d利用sharesdk分享內容至微信、新浪微博、qq空間等國內主流社交平臺（ios篇）

獲取微信、新浪微博等apk簽名的方法

分享到空間或微信或新浪的程式碼

微信小程式開通騰訊雲開發實踐流程附詳細圖解

用友盟社會化元件，分享到微信和新浪微博

微信小程序獲取騰訊經緯度，得到具體地址

微信小程序基於騰訊雲對象存儲的圖片上傳

微信小程序-使用騰訊Wxpage

微信小程式--21騰訊雲伺服器配置-nodejs版本

微信小程式使用騰訊雲PHP啟動模板時兩個小錯誤

微信小程式嵌入騰訊視訊源

微信小程式引用騰訊視訊

【小程式】微信小程式使用騰訊雲IM（三）：歷史訊息展示

微信小程式使用騰訊地圖sdk

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

HBuilder的配置

基本介面和工作流程

程式碼

遇見的坑

最後

相關推薦