微信内置浏览器私有接口WeixinJSBridge介绍

原文地址:http://www.3lian.com/edu/2015/05-25/216227.html

这篇文章主要介绍了微信内置浏览器私有接口WeixinJSBridge介绍,本文讲解了发送给好友、分享函数、隐藏工具栏、隐藏三个点按钮等功能,需要的朋友可以参考下

微信网页进入,右上角有三个小点,没错,我们用到的就是它!我们只要通过将小点列表下的按钮进行自定义,就可以随心所欲的分享我们自己的内容了。

注意:(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":"http://www.3lian.net", //分享附带链接地址
"desc":"极客标签--http://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":"http://www.3lian.net", //分享附带链接地址
"desc":"极客标签--http://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>

时间: 2024-08-06 11:57:52

微信内置浏览器私有接口WeixinJSBridge介绍的相关文章

微信内置浏览器私有接口WinXinJsBridge介绍

关于微信内置浏览器私有接口WeiXinJsBridge,只是之前接触过的一个微信公众号项目中遇到过,不过并没有深入研究过,可以说并没有了解过... 刚好今天无意中看到了这方面的知识,就补习一下,弥补一下自己短缺的js知识,虽然只是了解了一点,但是还是先记录下来,一方面增强自己的记忆,另一方面,顺便练练手,不至于将来使用的时候,找到了地方.下面进入正题. 看了这个微信浏览器私有接口WeiXinJsBridge,大致总结了一下几个小的有用的知识点: 1.分享给好友. 2.分享到朋友圈. 3.分享到微

微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记

微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript Interface)的文章,不过随着微信官方的调整,部分API已经不能直接使用,比如类似直接分享到朋友圈 WeixinJSBridge.invoke('shareTimeline',data,callback) 这样的功能,直接调用,会得到

微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏

之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript Interface)的文章,不过随着微信官方的调整,部分API已经不能直接使用,比如类似直接分享到朋友圈 WeixinJSBridge.invoke('shareTimeline',data,callback) 这样的功能,直接调用,会得到一个访问拒绝的response.后来重新调研了下,整理出来了一个WeixinAPI的Javascript类库,分享出来,如果你对微信公众平台开发感兴趣

微信内置浏览器的JsAPI(WeixinJSBridge续)[转载]

原文地址:  http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript Interface)的文章,不过随着微信官方的调整,部分API已经不能直接使用,比如类似直接分享到朋友圈 WeixinJSBridge.invoke('shareTimeline',data,callback) 这样的功能,直接调用,会得到一个访问拒绝的respons

微信内置浏览器打开app下载网页提示已停止访问怎么办?哪些api接口可以恢复访问

微信内置浏览器打开app下载网页提示已停止访问怎么办?哪些api接口可以恢复网页正常访问? 现如今微信对第三方app下载链接的拦截是越来越严格了,下载链接在微信中分享转发经常会被拦截,一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问,如此给用户带来的体验台差,用户量无法有效地累积起来,从而导致推广成本一直在增加,推广效率却无法有明显的提升. 所以针对这个问题,特写这篇文章分享哪些api接口可以免费实现微信内自动跳转浏览器下载app的功能. Mindjump-API接口平台 366API-接

【微网站开发】之微信内置浏览器API使用

最近在写微网站,发现了微信内置浏览器的很多不称心的地方: 1.安卓版的微信内浏览器底部总是出现一个刷新.前进.后退的底部栏,宽度很大,导致屏幕显示尺寸被压缩 2.分享当前网站至朋友圈时,分享的图片一般是网站的截图或者是首张图片,而分享的标题一般是网页title 3.当微网站图片很大或者需要加载耗费流量很大时,怎么提醒用户注意自己的网络状态呢? 就这最简单的两个问题,然后百度了一下,看了些研究过这个的牛们的博客,知道怎么搞了 为什么会有下面的toolbar,为什么会有那么个讨厌的底部栏?而且这个不

微信开发-微信内置浏览器的Javascript API

源代码来自 http://www.baidufe.com/ /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.隐藏/显示右上角的菜单入口 * 5.隐藏/显示底部浏览器工具栏 * 6.获取当前的网络状态 * 7.调起微信客户端的图片播放组件 * 8.关闭公众平台Web页面 * 9.判断当前网页是否在微信内置浏览器中打开 * 10.支持WeixinApi的错误监控 * 11.发送电子邮件 *

微信内置浏览器的JS API

/**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.新的分享接口,包含朋友圈.好友.微博的分享(for iOS) * 5.隐藏/显示右上角的菜单入口 * 6.隐藏/显示底部浏览器工具栏 * 7.获取当前的网络状态 * 8.调起微信客户端的图片播放组件 * 9.关闭公众平台Web页面 * 10.判断当前网页是否在微信内置浏览器中打开 * 11.增加打开扫描二维码 * 12.支持WeixinAp

微信中点击链接直接跳到默认浏览器是怎么实现的?(不是在微信内置浏览器打开)

在我们使用微信营销的时候,很容易碰到推广连接在微信内无法打开或不提示前往浏览器打开.首先说一下推广域名在微信内无法打开的问题,这是因为微信风控系统封杀了第三方下载链接,所以在微信内无法打开.其次再说一下为什么微信内置浏览器不提示前往Safari打开,这是因为缺少了一个微信跳转外部浏览器的接口,如果我们在代码中加入该接口,那么就可以实现ios系统提示前往Safari打开下载页,安卓系统则可以直接跳出到手机默认浏览器. 但很多人不知道这个功能该如何实现,下面就为大家介绍一种实现方式,可直接实现微信外