折腾了好几天的分享插件开发终于有点成果了,现打包发布的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();
}
}
}
}();
19 个回复
水域心诚
微博分享连接:我的解决办法是,在你分享的文字后面拼接上你要分享的连接地址,分享到微博后就可以打开了
villayong (作者)
分享到新浪微博无法分享链接,发送分享接口中设置msg.href='http://ask.dcloud.net.cn/链接',打开的新浪微博应用也无法显示该链接,IOS,Android都存在该问题,这个专家帮忙解决下啊!!
苏禾然
亲,能否发个分享的独立demo,现在开发MUI急需成功的demo案例,不然真的太痛苦了
DCloud_heavensoft
新建移动app时,看Hello H5+和Hello mui,代码都是开源的。里面都有分享的demo。
此文更多的是意义是指导配置环节,避免配置错误。
王裕会
这个我觉得我肯定会用的到,先留下足迹
冰宁
先留下足迹,然用时参考
BruceAn
收藏了。
小苏
mark
大霸王
先做几号,回去慢慢研究
connor
mark
滴滴哒
s.send( msg, function(){
mui.toast("分享到\""+s.description+"\"成功! ");
console.log("分享到\""+s.description+"\"成功,返回应用 ");//分享给qq好友,微信好友如果不返回应用,无法监听到分享成功回调
那这个问题怎么处理呢
丿白开水
感谢!!!解决了我的问题
6***@qq.com
你这个图片链接的截取很受用,但是我还是有点问题,就是我们客户那边要求分享facebook
林暗风
BusinessTypeEnum 这个是什么枚举啊
1***@qq.com
mark一下
zjiayingok - 托马斯的小火车
qq 分享给好友,返回。没有调用 回调函数。有遇到过 这种问题的吗?
3***@qq.com
请教下为什么plus.share.getServices在HBuilderX 打包能获取到服务对象 可是在android studio离线打包却是空呢?
lkcd
你好这个问题解决了嘛????
2019-11-30 15:15
aikies
APP分享微信,朋友圈,然后在微信点击分享链接跳转唤起APP(用户已下载),跳转下载链接或者H5(未下载)?如何实现?
lkcd
楼主本地打包plus.share.getServices怎么获取对象为空