H5 分享微信 QQ
因为客户项目需要做分享微信和QQ进行投票，自己学习了一下，在网上查了好多大神写的代码，自己总结了一下。
开始真机模拟测试的时候，分享微信和QQ都是没有问题的，后面打包app使用的时候，才发现一直分享不出去，找了原因，是因为Hbuilder中需要配置模块权限配置，所以我们需要在微信公众号平台和腾讯平台申请appID和appsecret配置好Hbuilder的SDK配置才可以在app中进行分享，所以第一步是需要去申请微信的appID和appsecret。
第一步：申请微信appID和appsecret
微信开发平台链接:https://open.weixin.qq.com/cgi-bin/index?t=home/index&lang=zh_CN
1、先申请一个账号。
2、点击首页的移动应用开发，进入到管理中心中创建移动应用，填写您要申请分享的app基本信息，然后再填写平台信息。
我打包时，用的是云端打包，应用签名统一公用的。
云端打包应用签名：59201CF6589202CB2CDAB26752472112
应用包名要和你发行安装包时显示的包名要一致。
要是有自有证书，那就用自己的应用签名就可以了。
填写完平台信息后，需要等待微信开发平台审核，需要7个工作日，在开发功能前就需要提前准备申请了。
第二步：分享功能
准备工作完了，我们就需要在页面添加分享功能了。
<--代码开始-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<button οnclick="share()">分享</button>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript">
var Share={};
Share.info = {
id: 'https://www.baidu.com/',//链接跳转路径
title: '兴趣比赛', //活动标题名称
name: '快来啊，我在这儿等着你！',//标题名称
head_image: "image/100474391_wx.jpg",//自定义图片
introduce: '唱歌跳舞打豆豆'
};
/**
* 更新分享服务
*/
var shares = null;
function getSerivces() {
plus.share.getServices(function(s) {
shares = {};
for (var i in s) {
var t = s[i];
shares[t.id] = t;
}
}, function(e) {
console.log("获取分享服务列表失败：" + e.message);
});
};
function shareAction(id, ex) {
console.log(id);
console.log(ex);
var s = null;
if (!id || !(s = shares[id])) {
console.log("无效的分享服务！");
return;
}
if (s.authenticated) {
console.log(s.authenticated);
console.log("---已授权---");
shareMessage(s, ex);
} else {
console.log("---未授权---");
//TODO 授权无法回调，有bug
s.authorize(function() {
console.log('授权成功...')
shareMessage(s, ex);
}, function(e) {
console.log("认证授权失败：" + e.code + " - " + e.message);
});
}
};
var sharecount = 0;
/**
* 发送分享消息
* @param
*/
function shareMessage(s, ex) {
console.log(ex);
plus.nativeUI.showWaiting();
setTimeout(plus.nativeUI.closeWaiting,5000);//TODO 5秒后自动关闭等待，否则如果用户分享出去后选择‘留在微信’，再手动回到app的时候，waiting无法关闭
var msg = {
extra: {
scene: ex
}
};
// "分享的网址" + "share?hid=" + Share.info.id;
msg.href =Share.info.id;
msg.title = Share.info.title + Share.info.name;
msg.content = Share.info.introduce;
//取本地图片
var img = plus.io.convertAbsoluteFileSystem(Share.info.head_image.replace('file://', ''));
console.log(img);
msg.thumbs = [img];
if (sharecount > 0) {
//如果本地图片过大，导致分享失败，递归时重新分享获取默认图片
msg.thumbs = ["_www/images/icon/A/144.png"];
}
console.log(JSON.stringify(msg));
s.send(msg, function() {
plus.nativeUI.closeWaiting();
var strtmp = "分享到\"" + s.description + "\"成功！ ";
console.log(strtmp);
plus.nativeUI.toast(strtmp, {
verticalAlign: 'center'
});
sharecount = 0;
}, function(e) {
plus.nativeUI.closeWaiting();
if (e.code == -2) {
plus.nativeUI.toast('已取消分享', {
verticalAlign: 'center'
});
sharecount = 0;
} else if (e.code == -3 || e.code == -8) {
console.log(e.code);
if (++sharecount < 2) {
//TODO 分享失败可能是图片过大的问题，递归取默认图片重新分享
shareMessage(s, ex);
} else {
sharecount = 0;
plus.nativeUI.toast('分享失败', {
verticalAlign: 'center'
});
}
}else{
console.error('分享失败:'+JSON.stringify(e))
}
console.log("分享到\"" + s.description + "\"失败: " + e.code + " - " + e.message);
});
};
/**
* 选择分享对象
*/
function share(){
alert("分享");
bhref = true;
var ids = [{
id:"weixin",
ex: "WXSceneSession"
}, {
id: "weixin",
ex: "WXSceneTimeline"
},{
id: "qq" /*QQ好友*/
}],
bts = [{
title: "发送给微信好友"
}, {
title: "分享到微信朋友圈"
}, {
title: "分享QQ好友"
}];
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: bts
},
function(e) {
var i = e.index;
if (i > 0) {
console.log(ids[i - 1].id);
console.log(ids[i - 1].ex);
shareAction(ids[i - 1].id, ids[i - 1].ex);
}
}
);
};
Share.share=share;
window.Share = Share;
/**
* 初始化分享权限
*/
mui.plusReady(function() {
getSerivces();
});
</script>
</body>
</html>
<--代码结束-->
将上面这一段代码直接粘贴到一个页面 就可以直接运行了，我是用的Hbuilder，大家粘贴到Hbuilder中真机模拟运行就可以。
我分享是用H5做的分享, API文档上对分享这块讲的还是蛮清楚的，大家可以看一看
HTML5 API链接：http://www.html5plus.org/doc/zh_cn/push.html
654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
