villayong
villayong
  • 发布:2015-08-04 16:03
  • 更新:2018-08-11 13:26
  • 阅读:7773

分享插件开发经验总结,希望对正在摸索中的朋友有所帮助

分类:HTML5+

折腾了好几天的分享插件开发终于有点成果了,现打包发布的app已可以成功分享到QQ,微信,新浪微博,太不容易了,以下是一些经验教训,希望对正在探索分享插件开发的朋友有所帮助。

入门资料参考:
Hbuilder 配置第三方分享
http://ask.dcloud.net.cn/docs#http://ask.dcloud.net.cn/article/27

分享插件开发指南
http://ask.dcloud.net.cn/article/36

html5 分享接口
http://www.html5plus.org/doc/zh_cn/share.html

重大问题:
1:Android包名和签名问题,在以上分享开放平台注册应用时都需要填写这个东西, 根据Android包名获取android签名,工具下载地址https://github.com/mobileresearch/weibo_android_sdk/blob/master/app_signatures.apk
安装到Android手机上进行签名生成,使用前一定要在该手机上安装打包好的app,否则该工具无法生成签名。

2:新浪微博回调地址问题
2.1 Hbuilder打包配置文件中,回调地址属性是redirect_uri 不是 redirect_url,平时写地址命名为url习惯了,这里可要注意了。
2.2 新浪开放平台配置的授权回调页和取消授权回调页,我配置为同一个请求:
http://域名/app/userShare/shareCallBack,打包manifest.json 文件中redirect_uri也配置为这个就可以了。

3:分享网络图片问题
最纠结的也就是如何分享网络图片了,IOS不存在问题,Android存在以下问题:
3.1 分享到QQ,微信,如果网络图片太大了,可能会分享失败,有两种解决办法1下载图片到本地,2进行图片裁剪(我们是采用阿里云存储图片的,网络路径后可以加参数进行图片裁剪,可能对大多数朋友不大实用),我使用的第2种办法,分享发送时图片参数:
msg.thumbs=[裁剪后的网络路径];
msg.pictures=[原网络路径];

3.2 分享到新浪微博完全就不支持网络路径,解决办法,下载图片到本地,然后再分享,代码参考
http://ask.dcloud.net.cn/article/183

4:微信分享一闪关闭并回到APP
Android包名与签名不一致导致,一定要先打包好正式的APP,然后再用签名生成工具生成签名,并配置到对应开放平台。

遗留问题,希望专家们能给出解决方案!!
1:分享到新浪微博无法分享链接,发送分享接口中设置msg.href='http://ask.dcloud.net.cn/链接',打开的新浪微博应用也无法显示该链接,IOS,Android都存在该问题。

2:Android分享到新浪微博时,手机上(红米)已经安装过新浪微博应用,就是无法弹出新浪微博应用进行文字输入(IOS可以),只能默认分享。

以下是分享相关的js代码,经供参考

var shares=null,share_bhref=false;  
var share_img='';//分享显示图片  
var share_thumb_img=''//缩略图  
var share_content='';//分享内容  
var share_href='';//分享链接  
var share_title='';//分享标题  
var bussType = '';//业务类型  
var bussId = '';//业务单号  
var wrhShare = function(){  
    return {  
        /**  
         * 初始化分享服务  
         */  
        init : function(){  
            plus.share.getServices( function(s){  
                shares={};  
                for(var i in s){  
                    var t=s[i];  
                    shares[t.id]=t;  
                }  
            }, function(e){  
                mui.toast( "获取分享服务列表失败:"+e.message );  
            } );  

        },  
        /**  
         * 分享操作  
         * @param {Object} id  
         * @param {Object} ex  
         */  
        shareAction : function(id,ex){  
            var s=null;  
            if(!id||!(s=shares[id])){  
                mui.toast( "无效的分享服务!" );  
                return;  
            }  
            if ( s.authenticated ) {  
                wrhShare.shareMessage(s,ex);  
            } else {  
                s.authorize( function(){  
                        wrhShare.shareMessage(s,ex);  
                    },function(e){  
                    mui.toast( "认证授权失败:"+e.code+" - "+e.message );  
                });  
            }  
        },  
        shareShow : function(){  
            var ids=[{id:"sinaweibo"},{id:"weixin",ex:"WXSceneSession"},{id:"weixin",ex:"WXSceneTimeline"},{id:"qq"}],  
            bts=[{title:"分享到新浪微博"},{title:"发送给微信好友"},{title:"分享到微信朋友圈"},{title:"分享到QQ"}];  
            plus.nativeUI.actionSheet({cancel:"取消",buttons:bts},  
                function(e){  
                    var i=e.index;  
                    if(i>0){  
                        wrhShare.shareAction(ids[i-1].id,ids[i-1].ex);  
                    }else{  

                    }  
                }  
            );  
        },  
        /**  
         * 打开分享操作列表  
         * @param {Object} bussType_param 业务类型 必填 业务类型枚举类 BusinessTypeEnum  
         * @param {Object} bussId_param 业务Id 必填  
         * @param {Object} title_param 标题 必填  
         * @param {Object} content_param 内容 必填  
         * @param {Object} img_param 图片 可选 格式:album/20150725123555_519.JPG,不需要加图片域名   
         * @param {Object} href_param 链接 可选,格式:'http://wanrenhui.com'  
         */  
        sendShare : function(bussType_param,bussId_param,title_param,content_param,img_param,href_param){  
            wrhShare.init();  
            bussType = bussType_param;  
            bussId = bussId_param;  
            share_title = title_param;  
            share_content = content_param;  
            if(img_param != ''){  
                share_img = imgServer+img_param;  
                share_thumb_img = imgServer+img_param+'@80w_80h_0e';  
            }  
            share_href = href_param;  
            if(share_href == ''){  
                share_bhref=false;  
            }else{  
                share_bhref=true;  
            }  
            wrhShare.shareShow();  
        },  
        /**  
         * 发送分享消息  
         * @param {Object} s  
         * @param {Object} ex  
         */  
        shareMessage : function(s,ex){  
            var msg={extra:{scene:ex}};  
            msg.content = share_content;  
            msg.title = share_title;  
            msg.thumbs=[share_thumb_img];  
            msg.pictures=[share_img];  
            var sendMessage = function(){  
                console.log(JSON.stringify(msg));   
                var params = {bussType:bussType,bussId:bussId,content:share_content,title:share_title,href:share_href,img:share_img,type:s.id};  
                                //保存分享记录到数据库   
                var addShare = function(){  
                    wrhFunc.ajax('/userShare/addShare', params, 'post', function(data){  
                    });  
                }  
                s.send( msg, function(){  
                    mui.toast("分享到\""+s.description+"\"成功! ");  
                    console.log("分享到\""+s.description+"\"成功,返回应用 ");//分享给qq好友,微信好友如果不返回应用,无法监听到分享成功回调  
                    params.status = 0;  
                    addShare();  
                }, function(e){  
                    console.log("分享到\""+s.description+"\"失败! "+e.code+" - "+e.message);  
                    params.status = 1;  
                    params.message = e.code+e.message;  
                    addShare();  
                } );  
            }  
            if('sinaweibo' == s.id){//新浪微博无法分享链接,不传递href,不能写href='',否则无法显示图片  
                if(plus.os.name=="Android"){//Android 不能分享网络图片  
                    //下载图片到本地  
                    mui.toast("下载图片中,即将打开新浪微博分享...");  
                    var dtask = plus.downloader.createDownload();  
                    var localPictures = '';  
                    function onStateChanged( d, status ) {  
                        switch(d.state){  
                            case 4:  
                            if(status == 200){  
                                console.log("图片下载完成:" + d.filename);  
                                localPictures = plus.io.convertLocalFileSystemURL(d.filename);  
                                msg.thumbs=[localPictures];  
                                msg.pictures=[localPictures];  
                                sendMessage();  
                            } else {  
                                mui.toast("下载图片失败");  
                            }  
                            break;  
                            case 1:  
                                console.log("下载开始");  
                            break;  
                            case 2:  
                                console.log("请求已响应");   
                            break;  
                            case 3:  
                                console.log("下载进行中");  
                            break;  
                            default:  
                                console.log("state: " + d.state);  
                            break;  
                        }  
                    }  
                    mui.each(msg.pictures, function(i, n){  
                        // 创建下载任务  
                        var dtask = plus.downloader.createDownload( n );  
                        dtask.addEventListener( "statechanged", onStateChanged, false );  
                        dtask.start();  
                    });  
                }  
            }else{  
                msg.href=share_href;  
                sendMessage();            
            }  

        }  
    }  

}();  
2015-08-04 16:03 2 条评论 分享
已邀请:
水域心诚

水域心诚

微博分享连接:我的解决办法是,在你分享的文字后面拼接上你要分享的连接地址,分享到微博后就可以打开了

villayong

villayong (作者)

分享到新浪微博无法分享链接,发送分享接口中设置msg.href='http://ask.dcloud.net.cn/链接',打开的新浪微博应用也无法显示该链接,IOS,Android都存在该问题,这个专家帮忙解决下啊!!

苏禾然

苏禾然

亲,能否发个分享的独立demo,现在开发MUI急需成功的demo案例,不然真的太痛苦了

DCloud_heavensoft

DCloud_heavensoft

新建移动app时,看Hello H5+和Hello mui,代码都是开源的。里面都有分享的demo。
此文更多的是意义是指导配置环节,避免配置错误。

王裕会

王裕会

这个我觉得我肯定会用的到,先留下足迹

冰宁

冰宁

先留下足迹,然用时参考

可怜的光头强

可怜的光头强

收藏了。

小苏

小苏

mark

大霸王

大霸王

先做几号,回去慢慢研究

connor

connor

mark

滴滴哒

滴滴哒

s.send( msg, function(){
mui.toast("分享到\""+s.description+"\"成功! ");
console.log("分享到\""+s.description+"\"成功,返回应用 ");//分享给qq好友,微信好友如果不返回应用,无法监听到分享成功回调
那这个问题怎么处理呢

丿白开水

丿白开水

感谢!!!解决了我的问题

644259206@qq.com

644259206@qq.com

你这个图片链接的截取很受用,但是我还是有点问题,就是我们客户那边要求分享facebook

林暗风

林暗风

BusinessTypeEnum 这个是什么枚举啊

137474128@qq.com

137474128@qq.com

mark一下

zjiayingok

zjiayingok - it精英

qq 分享给好友,返回。没有调用 回调函数。有遇到过 这种问题的吗?

要回复问题请先登录注册