首页 > 网站 > WEB开发 > 正文

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

2024-04-27 14:18:00
字体:
来源:转载
供稿:网友

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

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标签里面的titlevar 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>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表