微信网页进入,右上角有三个小点,没错,我们用到的就是它!我们只要通过将小点列表下的按钮进行自定义,就可以随心所欲的分享我们自己的内容了。
注意:(WeixinJSBridge只能在微信内打开的网页有效)
按钮一之------发送给好友
复制代码 代码如下:
function sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){ alert("发送给好友"); });
}
这样,只要在某处调用 sendMessage 函数就可以改变发送好友的按钮响应了,再点击,便会弹出“发送给好友字符串”,是不是很简单。
分享函数
复制代码 代码如下:
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", //appid 设置空就好了。
"img_url": imgUrl, //分享时所带的图片路径
"img_width": "120", //图片宽度
"img_height": "120", //图片高度
"link":url, //分享附带链接地址
"desc":"我是一个介绍", //分享内容介绍
"title":"标题,再简单不过了。"
}, function(res){/*** 回调函数,最好设置为空 ***/});
注意,如果将这个微信私有函数单独拿出来调用,道理上是讲的通,但是!第一次打开页面直接调用它的话,无论如何是没有任何反映的,必须要手动,点一下右上角分享给好友按钮,待弹出一次通讯录之后,返回来在直接使用,就没有任何问题,似乎内部初始化什么东西一样。所以建议直接嵌入到上面那个 绑定方法中。
如下:
复制代码 代码如下:
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){/*** 回调函数,最好设置为空 ***/
});
});
}
这样,你在点击发送给好友按钮,就可以直接弹出通讯录选择 ‘单个' 好友进行分享。
同理,分享到朋友圈也是调用 invoke 私有函数,只是按钮绑定名称不同而已。
复制代码 代码如下:
function sendMessage(){
......//此处省略发送给好友代码
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){/*** 回调函数,最好设置为空 ***/});
});
});
}
注意,on绑定的是 “menu:share:timeline” 不是 "menu:share:appmessage"。invoke里面也是。
还一个微博分享,我没试过,不知道有没有用,想玩的试试,一切分享都是调用当前微信帐号分享。
复制代码 代码如下:
WeixinJSBridge.on('menu:share:weibo', function(argv){
WeixinJSBridge.invoke('shareWeibo',{
"content":dataForWeixin.title+' '+dataForWeixin.url,
"url":dataForWeixin.url
}, function(res){});
});
如果微信浏览器内部尚未初始化,所有的接口都会是undefined。为了避免进去马上就调用出错,获取微信初始化完成响应事件,初始化完成调用sendMessage进行绑定。
如下:
复制代码 代码如下:
if(document.addEventListener){
document.addEventListener('WeixinJSBridgeReady', sendMessage, false); }else if(document.attachEvent){
document.attachEvent('WeixinJSBridgeReady' , sendMessage); document.attachEvent('onWeixinJSBridgeReady' , sendMessage); }
下面还有几个小功能:
复制代码 代码如下:
WeixinJSBridge.call('hideToolbar'); //隐藏右下面工具栏
WeixinJSBridge.call('showToolbar'); //显示右下面工具栏
WeixinJSBridge.call('hideOptionMenu'); //隐藏右上角三个点按钮。
WeixinJSBridge.call('showOptionMenu'); //显示右上角三个点按钮。
我是一个菜鸟,写完了,写的不好,请大家多多包含!
完整测试代码(用微信打开):
复制代码 代码如下:
<!docType html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>微信接口测试</title>
<script>
function sendMessage(){
WeixinJSBridge.on('menu:share:appmessage', function(argv){
WeixinJSBridge.invoke('sendAppMessage',{
"appid":"", //appid 设置空就好了。
"img_url":"", //分享时所带的图片路径
"img_width":"120", //图片宽度
"img_height":"120", //图片高度
"link":"https://www.jb51.net", //分享附带链接地址
"desc":"极客标签--https://www.jb51.net", //分享内容介绍
"title":"发现 极客标签 - 做最棒的极客知识分享平台"
}, function(res){/*** 回调函数,最好设置为空 ***/
});
});
WeixinJSBridge.on('menu:share:timeline', function(argv){
WeixinJSBridge.invoke('shareTimeline',{
"appid":"", //appid 设置空就好了。
"img_url":"", //分享时所带的图片路径
"img_width":"120", //图片宽度
"img_height":"120", //图片高度
"link":"https://www.jb51.net", //分享附带链接地址
"desc":"极客标签--https://www.jb51.net", //分享内容介绍
"title":"发现 极客标签 - 做最棒的极客知识分享平台"
}, function(res){/*** 回调函数,最好设置为空 ***/
});
});
alert("调用成功!现在可以通过右上角按钮分享给朋友或者朋友圈!");
}
function hideMenu(){
WeixinJSBridge.call('hideOptionMenu');
}
function showMenu(){
WeixinJSBridge.call('showOptionMenu');
}
function hideTool(){
WeixinJSBridge.call('hideToolbar');
}
function showTool(){
WeixinJSBridge.call('showToolbar');
}
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("调用失败,请用微信扫一扫,扫描下面二维码打开网页!");
}
</script>
</head>
<body>
<center>
<h2>分享请点击右上角</h2>
<button onclick="hideMenu()" style="width:100px;height:100px;font-size:16px;">隐藏右上角三个点</button> <br /><br />
<button onclick="showMenu()" style="width:100px;height:100px;font-size:16px;">显示右上角三个点</button> <br /><br />
<button onclick="hideTool()" style="width:100px;height:100px;font-size:16px;">隐藏下面导条</button> <br /><br />
<button onclick="showTool()" style="width:100px;height:100px;font-size:16px;">显示下面导条</button> <br /><br />
</center>
</body>
</html>
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 柏菲·珞叔作品集《金色大厅2》限量开盘母带ORMCD[低速原抓WAV+CUE]
- Gareth.T《sad songs(Explicit)》[320K/MP3][29.03MB]
- Gareth.T《sad songs(Explicit)》[FLAC/分轨][152.85MB]
- 证声音乐图书馆《海风摇曳·盛夏爵士曲》[320K/MP3][63.06MB]
- 龚玥《金装龚玥HQCD》头版限量[WAV分轨]
- 李小春《吻别》萨克斯演奏经典[原抓WAV+CUE]
- 齐秦《辉煌30年24K珍藏版》2CD[WAV+CUE]
- 证声音乐图书馆《海风摇曳·盛夏爵士曲》[FLAC/分轨][321.47MB]
- 群星 《世界经典汽车音乐》 [WAV分轨][1G]
- 冷漠.2011 《冷漠的爱DSD》[WAV+CUE][1.2G]
- 陈明《流金岁月精逊【中唱】【WAV+CUE】
- 群星《Jazz-Ladies1-2爵士女伶1-2》HQCD/2CD[原抓WAV+CUE]
- 群星《美女私房歌》(黑胶)[WAV分轨]
- 郑源.2009《试音天碟》24BIT-96KHZ[WAV+CUE][1.2G]
- 飞利浦试音碟 《环球群星监听录》SACD香港版[WAV+CUE][1.1G]