您的位置：首页 > 移动开发 > 微信开发

微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制

2014-10-16 17:10 796 查看

1.设置分享调用的标题、图片、url预览。

2.控制右上角三个点按钮的隐藏显示（和底部工具栏的显示隐藏--未测试）。

3.判断网页是否在微信中被调用。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>微信分享功能引入页面-控制分享时候调用的标题、图片和url</title>
<style>
html,body{ font-size: 100%; width:100%; height:100%; overflow:hidden}
</style>
</head>
<body >
<div class="box">
<p><a href="javascript:void(0);" onclick="hideMenu()" id="hideRigUp">隐藏右上角三个点按钮。</a></p>
<p><a href="javascript:void(0);" onclick="showMenu()" id="showRigUp">显示右上角三个点按钮。</a></p>
<!-- <p><a href="javascript:void(0);" onclick="hideTool()" id="hideRigDown">隐藏右下面工具栏</a></p>
<p><a href="javascript:void(0);" onclick="showTool()" id="showRigDown">显示右下面工具栏</a></p> -->
<p id="tdc" style="display:none"><img src=""></p>

</div>
<script type="text/javascript">

//title如果没有设置就会调用页面title标签里面的title
var url = window.location.href;
var imgUrl = "http://i0.cy.com/tl3d_m/main/20141009/home_logo.png";
function sendMessage(){
//按钮一之------发送给好友
WeixinJSBridge.on('menu:share:appmessage', function(argv){
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"",                                     //appid 设置空就好了。
"img_url":imgUrl,                                   //分享时所带的图片路径
"img_width":"120",                              //图片宽度
"img_height":"120",                             //图片高度
"link":url,                  //分享附带链接地址
"desc":"分享给好友描述",            //分享内容介绍 --这里会显示在预览里面。
"title":"分享测试-好友"
}, function(res){/*** 回调函数，最好设置为空 ***/
aler("分享给好友");//没有效果
});
setTimeout(function () {alert("点击分享或转发后1.5秒后调用"); }, 1500);//点击分享或转发后1.5秒后调用

});
//按钮一之------发送到朋友圈
WeixinJSBridge.on('menu:share:timeline', function(argv){
WeixinJSBridge.invoke('shareTimeline',{
"appid":"",                                     //appid 设置空就好了。
"img_url":imgUrl,                                   //分享时所带的图片路径
"img_width":"120",                              //图片宽度
"img_height":"120",                             //图片高度
"link":url,                  //分享附带链接地址
"desc":"分享给朋友圈描述",   //分享内容介绍 --貌似不显示，没啥用。
"title":"分享测试-朋友圈"
}, function(res){/*** 回调函数，最好设置为空 ***/
aler("分享给朋友圈");//没有效果
});
setTimeout(function () {alert("点击分享或转发后1.5秒后调用"); }, 1500);//点击分享或转发后1.5秒后调用

});
alert("调用成功！现在可以通过右上角按钮分享给朋友或者朋友圈！");

}

//隐藏右上角三个点按钮。
function hideMenu(){
if(window.WeixinJSBridge){
WeixinJSBridge.call('hideOptionMenu');
}
}
//显示右上角三个点按钮。
function showMenu(){
if(window.WeixinJSBridge){
WeixinJSBridge.call('showOptionMenu');
}
}
//隐藏右下面工具栏
function hideTool(){
if(window.WeixinJSBridge){
WeixinJSBridge.call('hideToolbar');
}
}
//显示右下面工具栏
function showTool(){
if(window.WeixinJSBridge){
WeixinJSBridge.call('showToolbar');
}
}

//添加事件监听
//文档的WeixinJSBridgeReady事件触发后绑定微信分享，否则会绑定失败
if(document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', sendMessage, false);
}else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady' , sendMessage);
document.attachEvent('onWeixinJSBridgeReady' , sendMessage);
}

//判断网页是否在微信中被调用
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
} else {
alert("调用失败，请用微信扫一扫，扫描下面二维码打开网页！");
document.getElementById("tdc").style.display = "block";
document.getElementById("tdc").getElementsByTagName("img")[0].src="http://zhidongtdc.duapp.com/getpic.php?url="+ window.location.href +"?1&size=4&margin=2";
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航